40. AJAX的原理

AJAX全称是Async JavaScript and XML。

用JS发请求和收响应，这就是AJAX的全部内容。

背景

• AJAX 是浏览器上的功能

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

  • 浏览器在 window 上加了一个 xMLHttpRequest 函

  • 用这个构造函数(类)可以构造出一个对象

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

• 准备一个服务器

  • 使用 serveris 作为我们的服务器

  • 下载或复制代码即可用node server.js 8888 启动

  • 添加 index.html / main.js 两个路由

挑战1

• 加载 CSS

以前我们用

今天请用 AJAX 加载 CSS

• 四个步骤

1. 创建 HttpRequest 对象（全称是 XMLHttpRequest)

2. 调用对象的 open 方法

3. 监听对象的 onload & onerror 事件

4. 一一专业前端会改用 onreadystatechange 事件

5. 一一在事件处理函数里操作CSS 文件内容

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

7. 一一具体代码请打开 MDN 用 CRM 大法搞定

挑战2

• 加载 JS

• 以前我们用

• 今天请用 AJAX 加载 JS

• 四个步骤

1. 创建 HttpRequest 对象（全称是 XMLHttpRequest)

2. 调用对象的 open 方法

3. 监听对象的 onreadystatechange 事件

4. 一一在事件处理函数里操作JS 文件内容

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

6. 一具体代码请打开 MDN 用 CRM大法搞定

挑战3

• 加载HTML

以前我们不会加载3.html

• 四个步骤

1. 创建HttpRequest对象(全称是XMLHttpRequest)调用对象的open方法

2. 监听对象的 onreadystatechange事件

3. 在事件处理函数里操作HTML文件内容

4. 调用对象的 send方法(发送请求，

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

挑战4

• 加载XML

以前我们不会加载4.xml

• 四个步骤

1. 创建HttpRequest对象(全称是XMLHttpRequest)调用对象的open方法

2. 监听对象的 onreadystatechange事件

3. 在事件处理函数里操作responseXML

4. 调用对象的 send方法(发送请求)

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

总结

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

可以装HTML、CSS、JS、XML...... 记得设置正确的 Content-Type，这是好习惯 只要你知道怎么解析这些内容，就可以使用这些内容

• 解析方法

1. 得到CSS之后生成 style标签

2. 得到JS之后生成script标签

3. 得到HTML之后使用innerHTML和 DOM API

4. 得到XML之后使用responseXML和DOM API

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

新的挑战

• 加载JSON......

• 等下，什么是JSON?

  • JavaScript Object Notation

  • 嗯?名字里怎么有个JavaScript

JSON是一门语言 跟HTML、CSS、 XML、JS一样，是一门独立的语言

JSON不是编程语言是标记语言 跟HTML、XML、Markdown 一样，用来展示数据

JSON 很简单

• 中文官网

一页纸就说明了JSON的所有语法 你会看铁轨图就会用JSON

支持的数据类型

• string-只支持双引号，不支持单引号和无引号number-支持科学记数

• bool-true 和 false

• null-没有 undefined

• object

• array

• 就这六种，注意跟 JS 的七种数据类型区别开来

• 不支持函数， 不支持变量(所以也不支持引用)

JSON借(chao)鉴(xi)JS

截屏2023-04-15 上午1.34.45

挑战5

• 加载 JSON

我们需要加载5.json

• 四个步骤

• 创建 HTTPREQUEST 对象 (全称是XMLHttpRequest)

• 调用对象的 open 方法

• 监听对象的 onreadystatechange事件

• --在事件处理函数里使用 JSON.parse

• 调用对象的send方法(发送请求)

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

window.JSON

• JSON.parse

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

  • JSON字符串=> JS数据

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

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

  • 一半用try catch捕获错误

• JSON.stringify

  • 是JSON.parse的逆运算

  • JS数据=> JSON字符串

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

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

综合应用-加载分页

加载列表

• 需求

  • 用户打开页面，看到第一页数据

  • 用户点击下一页，看到第二页数据

  • 用户点击下一页，看到第三页数据

  • 用户点击下一页，提示没用更多了

• 优化点

  • 能不能在点击第三页的时候就禁用下一页按钮

课后作业

• 我已经写好server.js

你直接复制课程网页中提供的server.js到本地使用

• 实现五个挑战

1. 用AJAX加载CSS,并使其生效

2. 用AJAX加载JS，并使其执行

3. 用AJAX加载HTML,并使其出现在页面中

4. 用AJAX加载XML，并获取其节点内容

5. 用AJAX加载JSON,并将其转为对象

6. 可选:用AJAX模拟分页操作

7. 写好代码后.上传GitHub然后回复给我