AJAX的原理

一言沙雕
235 阅读4分钟

AJAX是什么

AJAX（Async JavaScript And XML）是一种技术总结

AJAX的全部内容：用JS发请求和收响应

--资料来源于饥人谷

AJAX的背景

  • AJAX是浏览器上的功能

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

浏览器在window上加了一个XMLHttpRequest函数

XMLHttpRequest

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

   其实和window.Object差不多，Object用来创建普通对象，XMLHttpRequest用来创建XMLRquest对象的。

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

  • 准备一个服务器

使用server.js作为我们的服务器

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

   可以安装yarn global add node-dev用node-dev开发node-dev server.js 8888改动代码保存后会自动重启

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

熟悉AJAX四个步骤

server.js地址

挑战1·加载 CSS

以前我们用、今天请用AJAX加载 CSS

四个步骤

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

  2. 调用对象的open方法

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

—―专业前端会改用onreadystatechange事件

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

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

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

挑战2·加载JS

以前我们用

今天请用AJAX加载JS

  • 四个步骤

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

  2. 调用对象的open方法

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

  4. 调用对象的send方法(发送请求) --具体代码请打开 MDN用CRM 大法搞定

挑战3·加载HTML

以前我们不会加载3.html

现在可以做到轻量化的请求HTML

  • 四个步骤

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

  2. 调用对象的open方法

  3. 监听对象的onreadystatechange事件

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

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

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

挑战·加载XML

以前我们不会加载4.xml

以前没有JSON，用的xml传递数据

  • 四个步骤

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

  2. 调用对象的open方法

  3. 监听对象的onreadystatechange事件

--在事件处理函数里操作responseXML

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

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

总结

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

可以装HTML、CSS、 JS、 XML

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

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

  • 解析方法

得到CSS之后生成style标签

得到JS之后生成script标签

得到HTML之后使用innerHTML和DOM API

得到XML之后使用responseXML和DOM API

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

新的挑战 5·加载JSON---什么是JSON

JSON是一门语言，跟HTML、CSS、XML、JS一样，是一门独立的语言。英文：JavaScript Object Notation。JS对象标记语言。

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

  • JSON很简单

中文官网

铁轨图

一页纸就说明了JSON的所有语法

你会看铁轨图就会用JSON

  • 支持的数据类型

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

  2. number-支持科学记数法

  3. bool - true和false

  4. null-没有undefined

  5. object-object里也只能是这几种

  6. array

就这六种，注意跟JS的七种数据类型区别开来。不支持函数,不支持变量(所以也不支持引用)

JSON借(c)鉴(x)JS

挑战5·加载JSON

我们需要加载5.json

  • 四个步骤

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

  2. 调用对象的open方法

  3. 监听对象的onreadystatechange事件

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

  1. 调用对象的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对象

avatar
文章
阅读
粉丝