devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

原生js、JQuery、axios实现Ajax异步通信以及解决跨域_yinlu js

作者：AllinToyou | 2024-03-18 22:53:24

赞

踩

yinlu js

Ajax简介

Ajax全称为 Asynchronous JavaScript And XML 就是异步的JS和XML
XML：可扩展标记语言 被设计用来传输和存储数据

优点：

  • 可以无刷新页面与服务器进行通信
  • 允许你根据用户时间来更新部分页面内容

缺点：

  • 没有浏览历史，不能回退
  • 存在跨域问题
  • SEO不友好（搜索引擎优化）

Ajax返回的状态

  • 0 - (未初始化) 还没有调用send()方法
  • 1 - (载入)已调用send()方法，正在发送请求
  • 2 - (载入完成)send()方法执行完成，已经接收到全部响应内容
  • 3 - (交互) 正在解析响应内容
  • 4 - (完成) 响应内容解析完成，可以在客户端调用了

Express的使用（首先我们创建一个server.js用来做服务端

  1. 引入express
const express = require('express')

  • 1
  1. 创建应用对象
const app = express()

  • 1
  1. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/',(request,response) => {
// 设置相应
response.send('hello express')
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  1. 监听端口启动服务
app.listen(8000,()=>{
	console.log('服务已经启动')
})

  • 1
  • 2
  • 3
  1. node启动
node server.js

  • 1

Ajax案例(这里开始真正使用Ajax)

客户端代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        // 获取button元素
        const btn = document.querySelector('button')
        const result = document.getElementById("result")
        // 绑定事件
        btn.onclick = function () {
            // 1.创建对象
            const xhr = new XMLHttpRequest()
            // 2.初始化
            xhr.open('GET', 'http://127.0.0.1:8000/server')
            // 3.发送
            xhr.send()
            // 4.事件绑定 处理服务端返回的结果
            // on when 当。。。时候
            // readystate 是xhr中的属性 表示状态0 1 2 3 4
            // change 改变
            xhr.onreadystatechange = function () {
                // 判断（服务端返回了所有结果）
                if (xhr.readyState === 4) {
                    // 判断响应状态码 200 404 403 401 500
                    // 2XX 成功
                    if (xhr.status >= 200 && xhr.status <= 300) {
                        // 处理结果 行 头 空行 体
                        // 响应行
                        console.log(xhr.status) // 状态码
                        console.log(xhr.statusText) // 状态字符串
                        console.log(xhr.getAllResponseHeaders()) // 所有响应头
                        console.log(xhr.response) // 响应体
                        // 设置result文本
                        result.innerHTML = xhr.response
                    }
                }
            }
        }
    </script>
</body>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58

服务器端

const express = require('express')
const app = express()
app.get('/server',(request,response) => {
  // 请求跨域访问
  response.setHeader('Access-Control-Allow-Origin','*')
  response.send('hello Ajax')
})
app.listen(8000,()=>{
	console.log('服务已经启动')
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

演示结果
在这里插入图片描述

Ajax post 请求

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById("result")
        result.addEventListener("mouseover",function(){
            const xhr = new XMLHttpRequest()
            xhr.open('POST', 'http://127.0.0.1:8000/server')
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            // 自定义请求头
			xhr.setRequestHeader('name','yinlu')
			// 设置请求体参数
            xhr.send('a=100&b=200&c=300')
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status <= 300) {
                        result.innerHTML = xhr.response
                    }
                }
            }
        })
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

服务器端

const express = require('express')
const app = express()
// request 是对请求报文的封装
// response 是对响应报文的封装
app.all('/server',(request,response) => {
  // 设置响应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*')
  // 自定义请求头设置
  response.setHeader('Access-Control-Allow-Headers','*')
  // 设置响应体
  response.send('Hello Ajax Post')
})
app.listen(8000,()=>{
	console.log('服务已经启动')
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

演示效果
在这里插入图片描述

设置请求体参数

xhr.send('a=100&b=200&c=300')
xhr.send('a:100&b:200&c:300')

  • 1
  • 2

设置请求头信息

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

// 自定义请求头
xhr.setRequestHeader('name','yinlu')

app.all('/server',(request,response) => {
  // 设置相应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin','*')
  // 自定义请求头
  response.setHeader('Access-Control-Allow-Headers','*')
  // 设置响应体
  response.send('Hello Ajax Post')
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

Ajax服务端响应返回json数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById("result")
        // 绑定键盘按下事件
        window.onkeydown = function () {
            const xhr = new XMLHttpRequest();
          // 自动数据转换设置响应体数据的类型
          // xhr.responseType = 'json'
            xhr.open('GET', 'http:127.0.0.1:8000/json-server')
            xhr.send()
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status <= 300) {
                        result.innerHTML = xhr.response
                      // 1.手动数据转化
                      // let data = JSON.parse(xhr.response)
                      // result.innerHTML = data.name
                      // 2.自动数据转换
                      // result.innerHTML = xhr.response.name
                    }
                }
            }
        }
    </script>
</body>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

服务端

const express = require('express')
const app = express()
app.get('/json-server',(request,response) => {
  response.setHeader('Access-Control-Allow-Origin','*')
  const data = {
    name: 'yinlu'
  }
  let str = JSON.stringify(data)
  response.send(str)
})
app.listen(8000,()=>{
	console.log('服务已经启动')
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

结果演示
在这里插入图片描述

这里在介绍一款可以自动检测文件更改时重新启应用程序来调试node.js的工具nodemon

Ajax-IE 缓存问题解决

xhr.open("GET",'http://127.0.0.1:8000/ie?t=' + Date.now())

  • 1

Ajax 请求超时与网络异常处理

xhr.timeout = 2000 //两秒之内如果没有结果 就取消发送
// 超时回调
xhr.ontimeout = function(){
  alert('网络异常，请稍后重试')
}
// 网络异常回调
xhr.onerror = function(){
  alert('网络出了些问题')
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Ajax手动取消请求

xhr.abort()

  • 1

Ajax重复发送请求

let isSending = false; // 是否正在发送ajax请求
btn.onclick = function(){
		if(isSending) x.abort() // 如果正在发送，则取消该请求，创建一个新的请求
		const xhr = new XMLHttpRequest();
		// 修改标示变量的值
		isSending = true
		xhr.open('GET', 'http:127.0.0.1:8000/json-server')
		xhr.send()
		xhr.onreadystatechange = function () {
		if (xhr.readyState === 4) {
				// 修改标示变量的值
				isSending = false
 				}
		}
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

JQuery发送Ajax请求

// GET
$('button').eq(0).click(function(){
  $.get('url',{a:100,b:200},function(data){
		console.log(data)
  },'json')
})
// POST
$('button').eq(1).click(function(){
  $.post('url',{a:100,b:200},function(data){
		console.log(data)
  })
})
// jQuery通用方法
$('button').eq(2).click(function(){
  $.ajax({
    // url
    url: '',
    // 参数
    data: {
      a: 100,
      b: 200
    },
    // 请求类型
    type: 'GET',
    // 响应体结果
    dataType: 'json',
    // 成功的回调函数
    success: function(data){
      console.log(data)
    },
    // 失败的回调
    error: function(){
      console.log('出错了')
    },
    // 头信息设置
    headers: {
      c: 300,
      d: 400
    }
  })
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

axios 发送Ajax请求

// 配置baseurl
axios.defaults.baseURL = 'http://127.0.0.1:8000'
btns[0].onclick = function(){
  // GET请求
  axios.get('/login',{
    // url参数
    params: {
			id: 100,
      vip: 7
    },
    // 请求头信息
    header: {
    	name: 'yinlu',
    	age: 20
  	}
  }).then(value => {
    console.log(value)
  })
}

// POST请求
axios.post('/login', {
			username: 'admin',
      password: 'admin'
    },{
    // url参数
    params: {
			id: 100,
      vip: 7
    },
    // 请求头信息
    header: {
    	name: 'yinlu',
    	age: 20
  	}
  }).then(value => {
    console.log(value)
  })
}

// axios函数发送请求
axios({
  method: 'POST',
  url: '',
  params: {
		vip: 10,
    level: 30
  },
  headers: {
		a: 100,
    b: 200
  },
  data: {
    uername: 'admin',
    password: 'admin'
  }
}).then(response => {
	console.log(response)
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59

跨域

同源策略：协议、域名、端口号、必须完全相同

违背同源策略就是跨域

JSONP 解决跨域

jsonp：是JSON with Padding 的略称，它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback 的形式实现跨域访问

// 客户端
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        // 处理数据
      function handle(data){
      	const result = document.getElementById("result")
        result.innerHTML = data.name
    	}
    </script>
	<script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
// 服务器端
const express = require('express')
const app = express()
app.all('/jsonp-server',(request,response) => {
  const data = {
    name: 'yinlu'
  }
  let str = JSON.stringify(data)
  response.end(`handle(${str})`)
})
app.listen(8000,()=>{
	console.log('服务已经启动')
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

演示效果
在这里插入图片描述

JQuery 发送JSONP请求

// 客户端
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b
        }
    </style>
</head>
<body>
    <button>点击发送jsonp请求</button>
    <div id="result"></div>
    <script>
        $('button').eq(0).click(function(){
          $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?',function(data){
            // console.log(data)
            $('#result').html(`
								名称：${data.name}</br>
								城市：${data.city}
						`)
          })
        })
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
// 服务器端
const express = require('express')
const app = express()
app.all('/jquery-jsonp-server',(request,response) => {
  response.setHeader('Access-Control-Allow-Origin','*')
  const data = {
    name: 'yinlu',
    city: 'Hohhot'
  }
  let str = JSON.stringify(data)
  // 接受callback参数
  let cb = request.query.callback
  response.end(`${cb}(${str})`)
})
app.listen(8000,()=>{
	console.log('服务已经启动')
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

演示结果
在这里插入图片描述

CORS解决跨域

CORS,跨域资源共享，特点是不需要在客户端做任何的操作，完全在服务器中进行处理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button')
        const result = document.getElementById("result")
        btn.onclick = function () {
            const xhr = new XMLHttpRequest()
            xhr.open('GET', 'http://127.0.0.1:8000/cors-server')
            xhr.send()
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status <= 300) {
                        result.innerHTML = xhr.response
                    }
                }
            }
        }
    </script>
</body>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
// 服务器端
const express = require('express')
const app = express()
app.all('/cors-server',(request,response) => {
  response.setHeader('Access-Control-Allow-Origin','*')
  response.setHeader('Access-Control-Allow-Headers','*')
  response.setHeader('Access-Control-Allow-Method','*')
  response.send('hello cors')
})
app.listen(8000,()=>{
	console.log('服务已经启动')
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

演示效果
在这里插入图片描述
看到应该对Ajax有了不少的了解了吧，感谢各位的支持

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/266040
推荐阅读

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。