Javascript三座大山之 — AJAX

什么是AJAX

概况

AJAX（Async JavaScript And XML）是浏览器上的功能：用JS发请求和收响应

浏览器在window全局对象上自带了一个XMLHttpRequest构造函数，用它可以构造出一个对象，从而实现发请求收响应。

image.png

发起一个AJAX请求

先看一段代码

// 简单的ajax原生请求实现
var url = '1.css';
var request;

var XHR = new XMLHttpRequest();  
//1、new一个xhr对象。     readyState=0
XHR.open('GET', url, true);         
//2、调用xhr对象的open方法。 readyState=1
XHR.send();                                         
//3、send一些数据。   readyState=2

XHR.onreadystatechange = function() {   
//4. onreadystatechange回调
    if (XHR.readyState === 4 && XHR.status === 200) {  
 // readyState有0 1 2 3 4
        request = XHR.response;
        console.log(request);
    }
}

4、onreadystatechange事件。

对服务器的响应过程进行监听，来知道服务器是否正确得做出了响应，接着就可以做一些事情。比如获取服务器响应的内容，在页面上进行呈现。

• 当请求被发送到服务器时，我们需要执行一些基于响应的任务。
• 每当 readyState(0 1 2 3 4) 改变时，就会触发 onreadystatechange 事件。
• readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

1. onreadystatechange

存储函数（或函数名），每当 ready State属性改变时，就会调用该函数

2. readyState

存有 XmlHttpRequest的状态。从0到4发生变化

0：请求未初始化 - XmlHttpRequest已创建还没有调用open()

1：服务器连接已建立 - 已经调用open()

2：请求已接收 - send

3：请求接收完成处理中 - 开始接受到部分数据

4：请求已完成，且响应已就绪 - 数据接收完毕，连接关闭

image.png

3. status

200: "OK"

404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪

注意： onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。

AJAX发请求的实列

1.加载CSS

以前我们用<link rel= stylesheet href='1.css'/>

今天请用AJAX加载CSS

• 四个步骤:

创建 Httprequest对象（全称是 XmlhTtpreQuesT）

调用对象的open方法

监听对象的 onreadystatechange事件（在事件处理函数里操作CSS文件内容)

调用对象的send方法（发送请求）

2.加载JS

以前我们用< script src="2.js"></ script>

• 四个步骤:

创建 Httprequest对象（全称是 XmlhTtpreQuesT）

调用对象的open方法

监听对象的 onreadystatechange事件（在事件处理函数里操作JS文件内容)

调用对象的send方法（发送请求）

3.加载HTML

以前我们不会加载3.html

• 四个步骤:

创建 Httprequest对象（全称是 XmlhTtpreQuesT）

调用对象的open方法

监听对象的 onreadystatechange事件（在事件处理函数里操作HTML文件内容)

调用对象的send方法（发送请求）

4.加载XML

以前我们不会加载4.xml

• 四个步骤:

创建 Httprequest对象（全称是 XmlhTtpreQuesT）

调用对象的open方法

监听对象的 onreadystatechange事件（在事件处理函数里操作responseXML文件内容)

调用对象的send方法（发送请求）

5.加载 JSON

JavaScript Object Notation

和HTML,CSS,XML，JS一样是一门独立的语言，用来展示数据

是一门标记语言（HTML，XML，Markdown一样）

加载5.json

• 四个步骤:

创建 Httprequest对象（全称是 XmlhTtpreQuesT）

调用对象的open方法

监听对象的 onreadystatechange事件（在事件处理函数里使用JSON.pa****rse())

调用对象的send方法（发送请求）

6.综合-用AJAX模拟分页

总结

请求得到everything，如果会解析你就能用啦

• HTTP是个框，什么都能往里装可以装

HTML、CSS、JS、XML

记得设置正确的 Content-Type，这是好习惯

只要你知道怎么解析这些内容，就可以使用这些内容

• 解析方法

得到CSS之后生成stye标签

得到JS之后生成 script标签

得到HTML之后使用 innerhTMl和 DOM API

得到XML之后使用 responseXML和 DOM API

不同类型的数据有不同类型的解析办法

常用的AJAX封装

Jquery AJAX

Axios常见用法

• GET请求
• POST请求
• 并行请求
• 创建实例
• Response
• Config
• 拦截器
• 错误处理
• 取消请求