原生ajax运行原理,【前端自学之路】JS之原生AJAX原理

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