【前端自学之路】JS之原生AJAX原理

Javascript Ajax 原理

什么是 AJAX

AJAX(Asynchronous JavaScript and XML) 异步Javascript 和 XML

AJAX 是指一种创建动态网页的开发技术

说白话点:
AJAX 就是允许JS和后台服务器进行数据交互

AJAX 的原生实现

任何AJAX库或者框架,都是基于原生的AJAX实现的

在这里我们先忽略兼容性问题 ActiveXObject

原生的AJAX实现有四步:

第一步

创建XMLHttpRequest,就可以通过这个对象和服务器进行交互了

IE旧版本

1
var xh = new ActiveXObject('Microsoft.XMLHTTP');

W3C标准实现

1
var 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 可选的密码用于认证
1
xh.open('GET', 'https://www.baidu.com');

第三步

onreadystatechange 监听请求变化过程

XMLHttpRequest.onreadystatechange = function(){}

只要readyState属性变化的时候,就会调用回调处理函数

当请求被 abort() 的时候,事件就不会被触发,事件处理函数也不会被调用

1
2
3
xhr.onreadystatechange = function () {
// do something when readyState change
};

第四步

正式发送出HTTP请求

XMLHttpRequest.send(DataBuffer)
对于异步请求,这个函数执行后会立马返回
对于同步请求,这个函数会等待请求返回后才返回

函数接收一个参数,表示要发送的数据

1
xhr.send('Helloworld');

总结

我们来看完整的AJAX原理步骤

1
2
3
4
5
6
7
var 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
18
data: [
{
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
坚持原创技术分享,谢谢鼓励我继续创作!