AJAX

1.AJAX是什么

AJAX 即Asynchronous Javascript And XML，是指一种创建交互式网页应用的网页开发技术。简单点说，就是使用 XMLHttpRequest对象与服务器通信，可以通过与场景后面的 Web 服务器交换数据来异步更新网页，不需要加载整个网页。

AJAX是浏览器上的功能，浏览器可以发请求，收响应。浏览器在window上加了一个XMLHttpRepuest函数，用这个构造函数（类）可以构造出一个对象，JS通过它实现发请求，收响应。

2. 使用AJAX的四个步骤

①创建HttpRequest对象（XMLHttpRequest）
②调用对象的open方法
③监听对象的onreadystatechange事件
——在事件处理函数里使用js操作文件内容
④调用对象的send方法（发送请求）

• XMLHttpRequest.onreadystatechange
  只要 readyState 属性发生变化，就会调用相应的处理函数。这个回调函数会被用户线程所调用。XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个：

  
  readyState 状态.png

3. 示例：使用AJAX加载css

之前我们使用<link rel = stylesheet herf='1.css'/>，现在来换AJAX试试。
为了更好的展示效果，在页面中创建一个按钮，点击之后通过AJAX来请求css样式。

getCSS.onclick = () => {
  const request = new XMLHttpRequest()
  request.onreadystatechange = () => {
    // 下载完成，并且请求成功后创建css样式
    if (request.readyState === 4) {
      if (request.status === 200) {
        // 创建 style 标签
        const style = document.createElement("style")
        // 填写 style 内容
        style.innerHTML = request.response
        // 插入 head 里面
        document.head.appendChild(style)
      } else {
        alert("加载 CSS 失败")
      }
    }
  }
  request.open("GET", "/style.css")
  request.send()
}

4.jQoery中的AJAX

$.ajax的常见使用方法
url    ：请求的地址
type    ：请求的类型GET或POST
data    ：发送给服务器的数据
    格式有两种：
    一：name=value&name=value
    二：{key:value}
contentType ：发送信息至服务器时内容编码类型。
    默认: 'application/x-www-form-urlencoded; charset=UTF-8'
success  ：请求成功，响应的回调函数
dataType  ：响应的数据类型
常用的数据类型有：
    text 表示纯文本
    xml 表示xml数据
    json 表示json对象(直接将字符串转换成为json对象)
具体可以在jQuery中文文档中查询：https://www.jquery123.com/jQuery.ajax/#jQuery-ajax-settings

$.ajax({
      method:'POST',
      url: '/register',
      contentType: 'text/json; charset=UTF-8',
      data: JSON.stringify({name, password})
})

小结

• AJAX不仅能够传输css样式还可以传输HTML、JSON、JS等数据。
• JSON小记
  ①JSON不是编程语言，是标记语言，跟HTML、XML 、Markdown 一样，用来展示数据。
  ②JSON的数据类型只有一下6种，要与js区别开，并且也不支持函数，不支持变量。

string - 只支持双引号，不支持单引号
number - 支持科学记数法
bool - true和false
null - 没有undefined
object
array

③window.JSON
JSON.parse将符合JSON语法的串转换成JS对应类型的数据，JSON字符串 => JS数据 （转换）。
由于JSON只有六种类型，所以转成的数据也只有6种，如果不符合JSON语法，则直接抛出一个Error对象。一般用try catch捕获错误。

示例.png
JSON.srtingify是JSON.parse的逆运算，JS数据=>JSON字符串。由于JS的数据类型比JSON多，所以不一定能成功。如果失败，就抛出一个Error对象。