AJAX是浏览器上的功能

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

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

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

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

准备一个服务器

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

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

添加index.html / main.js 两个路由（如下图）

图解两个路由 安装遇到的路径问题   ------一定要看自己在哪个目录里面

一.加载CSS 

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

今天我们用AJAX加载CSS

四个步骤

创建HttpRequest对象（全称是XMLHttpRequest）

调用对象的open方法

监听对象的onload&onerror事件

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

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

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

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

加载css图解

二、AJAX加载JS

     以前我们用<script src = 'main.js'></srcipt>

    今天用ajax加载js

    四个步骤

创建HttpRequest对象（全称 XMLHttpRequest）

调用对象的open方法

监听对象的onreadystatechange事件

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

设备对象的send方法（发送请求）

————具体代码请打开MDN用CMR大法搞定

AJAX请求js文件

三 、AJAX 加载HTML

加载HTML 

以前我们不会加载html

四个步骤

创建HttpRequset对象（全称是XMLHttpRequest）

调用对象的open方法

监听对象的onreadystatechange事件

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

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

————具体代码请打开MDN 用CRM大法  

AJAX 请求 html

当我们把路径写错了时 ，它返回的数据不是onerror里面的信息 而是server.js里面的失败404信息

那么 我们想到了解决方法（上面也有提到过 ）

XMLHttpRequest.onreadystatechange

简称onreadystatechange

图解

解决用到三个比较重要的API

onreadystatechange   //  相当于onload事件 但是它比onload事件更好用 因为它可以找返回失败数据

readystate  //  查看上面图 1234步骤是否执行完  一般用于判断 if(元素.readustate === 4 ) //判断它的最后一次是否执行了 执行了才继续后面的

status  // 查看返回状态码  200 或者404 或者其它（看下图）

四 、 加载XML

加载 XML  以前我们不会加载xml文件

    四个步骤

创建HttpRequest 对象（全称是XMLHttpRequest）

调用对象的open方法

监听对象的onreadystatechange事件

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

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

————具体代码请打开MDN用CMR大法搞定(看不懂文案请看下图)

 AJAX   XML 内容获取

总结

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

可以装HTML、CSS 、 JS、XML ……

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

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

   >> 解析方法

得到CSS之后生成style标签

得到JS之后生成script标签

得到HTML之后使用innerHTML和DOM API

得到XML 之后使用responseXML和DOM API

不同类型的数据有不同类型的解析办法(如不懂 可以在上面查看四种图)

五 、 加载JSON

    >> JSON小记

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

跟HTML、XML 、Markdown 一样，用来展示数据

    >>支持的数据类型

string -  只支持双引号，不支持单引号

number - 支持科学记数法

bool - true和false

null - 没有undefined

object 

array 

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

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

JSON官网链接 

window.JSON

    ① JSON.parse

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

JSON字符串 => JS数据  （转换）

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

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

一般用try catch捕获错误

    ② JSON.stringify

是JSON.parse的逆运算

JS数据=>JSON字符串

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

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