AJAX常用知识点及应用

一、概念相关

Async JavaScript And XML 是JS通过异步方式获取响应并且局部更新页面

二、XHLHttpRequest 【在AJAX中被大量使用】

• 是一个API，挂在window上。
• 为客户端提供了在客户端和服务器之间进行数据传输的功能
• 通过URL来获取数据，并且不会使页面整个刷新

AJAX四步

(1)获取XMLHttpRequest对象

(2)打开与服务器的连接

(3)通知服务器发送的数据是请求参数

(4)注册监听，时刻监听服务器处理请求的状态

三、原生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('请求失败')
　　　　}
　　})
}

 五、常用场景

注册时候的用户名的查重：当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来

• 整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
• 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！