一、概念相关
Async JavaScript And XML 是JS通过异步方式啦获取响应并且局部更新页面
二、XHLHttpRequest 【在AJAX中被大量使用】
- 是一个API,挂在window上。
- 为客户端提供了在客户端和服务器之间进行数据传输的功能
- 通过URL来获取数据,并且不会使页面整个刷新
三、原生JS-------AJAX
btn.onclick = function(){
var request = new XMLHttpRequest()//创建HTTP请求对象
request.open('get','./data.json?id=1') //开启一个请求,不是发送;设置请求(打开服务器链接)
request.setRequestHeader('x-limingru','yyy') //设置请求头
request.onreadystatechange = function(){ //只要readystate变化了就会触发这个函数,要想让它触发5次,应该放在最前面
if(request.readyState === 4){ //响应已经下载完毕,请求完成(虽然不一定成功,但是过程完成)
if(request.status >=200 && request.status < 300){
console.log(request.status) // 获取响应码
console.log(request.statusText) // 状态文
console.log(request.getAllResponseHeaders()) //获取响应头
console.log(request.responseText) //获取响应的文本
alert('请求成功')
}else{
alert('请求失败')
}
}
}
request.send('post请求体') //这是http请求的第四部分请求体,但是get请求默认是没有第四部分的,设置了也不会报错,post就有请求体
}
四、jQuery-------AJAX
$.get/post({ url:'./data.json', data:{ id:1, name:'limingru' }, //如果是get这里就是查询参数,如果是post就会出现在请求体里 success: function(response,status,xhr){ console.log(response) console.log(status) console.log(xhr) //这里面封装了XMLHttpRequest的方法,可以从中调用 }, error: function(){ console.log('请求失败') }
})
btn.onclick = function(){ $.ajax({ method:'get', url:'./data.json', data:{ id:1, name:'limingru' }, success: function(response,status,xhr){ console.log(response) console.log(status) console.log(xhr.getAllResponseHeaders()) }, error: function(){ console.log('请求失败') } }) }