前端，AJAX

 

前言：何为AJAX？在很多前端小白刚接触AJAX这个词的时候肯定会对他非常的陌生，其全名为(Asynchronous JavaScript and XML)即异步JavaScript和XML。

---

说到异步这里就要补充一个知识点，何为异步其实异步可以简单理解为，“在烧饭的同时再进行拖地玩手机”举一个生活中形象生动的例子就可以理解，那么同理在浏览器中代码执行就是一步一步的把“烧饭，拖地，玩手机”做完。

​

这样十分浪费时间，在我们生活种可以这样同时干好多个事情，那么同理运用到编程思想中，在计算机中有多线程的概念，什么意思呢，每一个线程做一件事，像下面 任务 1 任务 2 任务 3 这样。

​

---

（1）AJAX概括

用简单的话讲明白AJAX就是：

1.浏览器可以发请求，收响应

2.浏览器再window上加了一个XMLHttpRequest函数

3.用这个构造函数（类）可以构造出一个对象

4.JS通过它实现发请求，收响应

我们为什么需要AJAX？

在我们之前的开发，每当用户向服务器发送请求，哪怕只是需要更新一点点的局部内容，服务器都会将整个页面进行刷新。

• 性能会有所降低(一点内容，刷新整个页面！)
• 用户的操作页面会中断(整个页面被刷新了)

Ajax就是能够做到局部刷新！

---

（2）AJAX四个步骤，理解即完全了解AJAX

创建HttpRequest对象（全称是XMLHttpRequest）

调用对象的open方法

监听对象的onload & onerror事件

--专业前端会改用onreadystatechange事件

--在事件处理函数里操作CSS文件内容

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

--具体代码请打开MDN用CRM大法搞定

代码示例：

​

（3）onreadystatechange的一生

一个请求的一生：

const req = new x () 0

req.open() 1

req.send() 2

下载完成 4

 

代码示例：

request.onreadystatechange = () =>{//监听onload事件 if(request.readyState === 4){ if(request.status>=200 && request.status<300){ //创建style标签 const style = document.createElement('style') //填写style内容 style.innerHTML = request.response //把style插到头里面去 document.body.appendChild(style) }else{ alert('加载CSS失败') } } }

（4）加载xml

代码示例：

​

（5）JSON

JSON是一门语言

JSON不是编程语言是标记语言

JSON只需看铁轨图就能理解其使用方式：

JSON支持的数据类型：

string 只支持双引号，不支持单引号和无引号

number 支持科学计数法

bool true 和 false

null 没有undefined

object

array

就这六种，注意跟JS的七种数据变量区别开来

不支持函数，不支持变量（所以也不支持引用）

 

JSON.parse

将符合JSON语法的字符串转换成JS对应类型的数据

JSON字符串=>JS数据

由于JSON只有六种类型，所以转成的数据也只有6种

如果不符合JSON语法，则直接抛出一个Error对象

一般用try catch 捕获错误

 

JSON.stringify

是JSON.parse的逆运算

JS数据=>JSON字符串

由于JS的数据类型比JSON多，所以不一定能成功

如果失败，就抛出一个Error对象

同理出错可以使用try catch捕获

代码示例：