1 AJAX

Async JavaScript And XML
作用：用 JS 发请求和收响应
背景： 1、AJAX 是浏览器上的功能；

2、浏览器可以发请求、收响应；

3、浏览器在 window 上加了一个 XMLHttpRequest 函数，用这个构造函数（类）可以构造出一个对象；

4、JS 通过它实现发请求、收响应；

2 步骤

2.1 AJAX 加载CSS

1、创建 XMLHTTPRequest 对象；

const request = new XMLHttpRequest()

2、调用对象的 open 方法；

request.open('GET/POST','路由')

3、监听对象的 onreadystatechange 事件，或 onload / onerror 事件；

request.onreadystatechange = ()=>{
    const style = document.createElement('style')
    style.innerHTML = request.response
    document.head.appendChild(style)
}

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

request.send()

2.2 加载 XML

1、创建 XMLHTTPRequest 对象；

const request = new XMLHttpRequest()

2、调用对象的 open 方法；

request.open('GET/POST','路由')

3、监听对象的 onreadystatechange 事件，或 onload / onerror 事件；

request.onreadystatechange = ()=>{
    const xml = request.responseXML  // responseXML 是 XML 独有的方法
    const text = xml.getElementsByTagName('warning')[0].textContent.tirm()
}

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

request.send()

2.3 onreadystatechange 的状态

3 总结

1、HTTP 可以装 HTML、CSS、JS、XML...；

2、设置正确的 Content-Type；

3、解析内容后，使用内容；

4、解析方法：

得到 CSS 之后生成 style 标签，插入 head 里面；
得到 JS 之后生成 script 标签，插入body 里面；
得到 HTML 之后使用 InnerHTML 和 DOM API；
得到 XML 之后使用 responseXML 和 DOM API；

4 JSON

4.1 javaScript Object Notiton

1、JSON 是一门独立的语言，和 HTML、XML、JS 一样；

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

4.2 JSON 内容

1、JSON 官网

2、数据类型

sring: 只支持双引号，不支持单引号和无引号；
number
bool: true/false
null
object
array

3、只支持这六种，不包括 undefined 、function ，和 JS 的七种数据类型不同；

4、不支持变量（所以也不支持引用）

4.3 JSON.parse

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

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

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

4、一般用 try catch 捕获错误；

let obj
try{
  obj = JSON.parse('{'name':'jason'}')  //希望被执行的代码
}catch(error){
  console.log('出错了，错误详情是')  //处理错误的代码
  console.log(error)
  obj = {'name':'no name'}
}
console.log(obj)  //错误被捕获之后，后续的代码能正常执行

4.4 JSON.stringify

1、将 JS 数据转换成符合 JSON 语法的字符串；

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

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