Javascript Ajax 原理
什么是 AJAX
AJAX(Asynchronous JavaScript and XML) 异步Javascript 和 XML
AJAX 是指一种创建动态网页的开发技术
说白话点:
AJAX 就是允许JS和后台服务器进行数据交互
AJAX 的原生实现
任何AJAX库或者框架,都是基于原生的AJAX实现的在这里我们先忽略兼容性问题 ActiveXObject
原生的AJAX实现有四步:
第一步
创建XMLHttpRequest,就可以通过这个对象和服务器进行交互了IE旧版本1var xh = new ActiveXObject('Microsoft.XMLHTTP');
W3C标准实现1var xhr = new XMLHttpRequest();
第二步
通过 XMLHttpRequest对象的 open方法初始化请求
XMLHttpRequest.open(method, url, async, use, password)method,要使用的HTTP方法,如 GET、POST、PUT 等
url 发送请求的url
asyc [可选] 默认为true表示异步操作,false则为同步操作
user [可选] 默认为null 可选的用户名用于认证
password [可选] 默认为null 可选的密码用于认证1xh.open('GET', 'https://www.baidu.com');
第三步
onreadystatechange 监听请求变化过程
XMLHttpRequest.onreadystatechange = function(){}
只要readyState属性变化的时候,就会调用回调处理函数当请求被 abort() 的时候,事件就不会被触发,事件处理函数也不会被调用1
2
3xhr.onreadystatechange = function (){
// do something when readyState change
};
第四步
正式发送出HTTP请求
XMLHttpRequest.send(DataBuffer)
对于异步请求,这个函数执行后会立马返回
对于同步请求,这个函数会等待请求返回后才返回
函数接收一个参数,表示要发送的数据1xhr.send('Helloworld');
总结
我们来看完整的AJAX原理步骤1
2
3
4
5
6
7var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.shuipingguo.com/2h4g/getvideo/search?kw=%E5%80%9A%E5%A4%A9', true);
xhr.onreadystatechange = function(xhr){
console.log(JSON.parse(xhr.target.response));
};
xhr.send();
在浏览器控制台上执行结果:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18data: [
{
author: ""
country: 0
id: 56
img: "http://puui.qpic.cn/qqvideo_ori/0/p0859dffl2v_496_280/0"
imgv: "//puui.qpic.cn/vcover_vt_pic/0/ha7r9z89i9d234y1553076483/220"
max: 50
name: "倚天屠龙记"
number: 50
score: 8
summary: ""
type: 2
url: "//m.v.qq.com/x/cover/h/ha7r9z89i9d234y.html"
vip: 10
},
]
retcode: 0