JavaScript中的ajax
JavaScript中的ajax
1、如何创建一个ajax请求
var xhr = new XMLHttpRequest()
xhr.responseType='json'
// 指定数据发送格式以及数据发送地址
xhr.open('get','http://127.0.0.1/test')
// 设置返回的数据格式
xhr.responseType = 'json'
//设置预定义好的响应头
xhr.setRequestHeader('Content-Type',"xxxxx")
//设置自定义响应头
xhr.setRequestHeader('name','test')
// 向服务器发送数据，只能是post请求往里面发，内容为字符串
xhr.send()
// 监听xhr的状态码的改变,然后进行一些操作
xhr.onreadystatechange= function() {
console.log(xhr.status) // 状态码
console.log(xhr.statusText) // 状态描述
console.log(xhr.getAllResponseHeader) // 获取所有的响应头信息
console.log(xhr.response) // 返回响应
}
2、ajax中的IE缓存问题
2.1、问题描述
当我们请求服务器时，服务器端的数据返回到浏览器中，当服务器中的内容发生改变时，浏览器依然使用上一次保存的数据
2.2、解决办法
// 将url地址增加一个参数，使得每一次访问的地址都不同
var url = 'http://127.0.0.1/test?t='+Data.now()
3、网络请求超时与网络异常
var xhr = new XMLHttpRequest()
// 超时设置，设置延时时间，以毫秒为单位
xhr.timeout = 2000
手动取消网络请求
var xhr = new XMLHttpRequest()
// 取消网络请求
xhr.abort()
4、ajax解决重复请求问题
4.1、问题描述
有的时候用户会疯狂点击一个按钮，导致会发送多个请求
4.2、解决办法
用一个变量标志着ajax是否正在发送，下面是一个代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax重复请求问题</title>
</head>
<body>
<button id="myButton">发送请求</button>
</body>
<script>
var myButton = document.getElementById('myButton')
var isSend = false
myButton.click = function() {
if (isSend) {
xhr.abort()
}
var xhr = new XMLHttpRequest()
xhr.open('get','http://127.0.0.1/queryAllBillWay')
xhr.send()
xhr.onreadystatechange = function() {
isSend = true
if (xhr.readyState === 4) {
console.log(xhr.response)
}
}
}
</script>
</html>
5、跨域
5.1、同源策略
1、同源策略最早是Netscape公司提出的，浏览器的一种安全策略。
2、同源：协议、域名、端口号必须完全相同
3、违背以上的规则就是跨域
5.2、如何解决跨域问题
5.2.1 jsonp的方式
就是使用script标签访问服务器，让后端返回一段js代码给浏览器运行，从而获得数据
5.2.2 设置CORS，跨域资源共享
在服务器端设置一个响应头
响应头，例如：Access-Control-Allow-Origin
5.2.3 使用代理服务器
例如nginx，vue中的proxy
