前置知识

AJXA概念

Async JavaScript And XML
异步 JavaScript 和 XML
即：AJAX 就是异步的 JS 和 XML 的缩写，目前我们一般用 JSON 代替 XML

AJXA作用
用于在不刷新页面的情况下向浏览器发起请求并接受响应，最后局部更新页面（轻量级）
简单用途概括：用JS发请求和收响应

• AJAX是浏览器上的功能
• 浏览器可以发请求，收响应
• JS开发者可以通过JS控制浏览器发请求和收响应—— 通过XMLHttpREquest全局函数
  • 通过这个构造函数（类） 可以构造出一个对象
  • JS通过这个函数实现发请求和收响应

简单的前后端交互demo：

• 准备一个服务器，利用服务器上的JS发送响应，服务器上可以写java等其他语言
• 使用server.js 作为服务器
• 终端命令输入node.server.js +端口 ，注意运行服务器需要添加端口
• server.js中添加路由
• 开发中常用工具：node-dev ，当服务器代码修改时，可以实现自动刷新重启服务器

一个请求的一生

请求在不同阶段会有不同的readyState，了解这个更能理解第三步onreadyStateChange事件

常见状态码

以2开头都是成功

JSON概念

是一门标记语言；同时也可作为JS中的一个对象
JavaScript Object Notation
即js对象标记语言
（且JSON抄袭JS）
标记语言：用来给数据加上一些展示性标记或者逻辑性标记

JSON对象指的是：JSON中有对象

JSON中文官网：http://json.org/json-zh.html

JSON支持的数据类型

JSON数据类型写法图解示例：

JSON对象的方法

window.JSON 挂在window全局对象上的全局变量JSON，是个对象，JSON对象主要有一下两个方法：
JSON.parse()解析JSON字符串并返回JS对象（JS中一切皆可为对象，即返回JS对应类型的数据）
JSON.stringify()返回与指定值对应的JSON字符串

检验JSON语句规范性

**try...catch**语句标记要尝试的语句块，并指定一个出现异常时抛出的响应

AJAX使用方法

行云流水四步法

1. 创建一个XMLHTTPRequest对象

最核心概念是 XMLHttpRequest 对象，该对象可发起 HTTP 请求，我们可以监听其 readystate 的变化获得响应。

let request = new XMLHttpRequest()

1. 设置请求参数

   request.open('GET', '/style.css')   //接收method 和url 两个参数

2. 监听请求成功后的状态变化

只要 readyState 属性发生变化，就会调用相应的处理函数

request.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(request.response)   //readyState 为4表示所有响应下载完成，可以获取所有response，否则只能获取部分response
  }                                    //若状态码非200同样也能将所有响应下载完成，但下载的是非200的页面，故应加上并逻辑                                            
};

1. 发送请求

   request.send()

示例

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

得到CSS后生成style标签
得到JS后生成script标签
得到HTMl后使用innerHTML和DOM API
得到XML后使用responseXML和DOM API
重点识记：

• const request = new XMLHttpRequest() 准备页面请求，创建XMLHttpRequest对象 request
• request.response 使用XMLHttpRequest对象的response属性获取请求的内容（服务器的响应）；
  • 特例：responseText 和responseXML

加载CSS

getCSS.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/style.css')
    request.onreadystatechange = () => {
        // 如果请求成功
        // 下载完成，但是不知道是200的完成还是404的完成
        if (request.readyState === 4) {  //监听readystate状态以触发函数
            if (request.status >= 200 && request.status < 300) {
                //请求发送成功
                // 创建style标签，把css内容写入style标签，然后插入到html的head中
                const style = document.createElement('style')
                // 怎么获取相应内容？ request.response
                style.innerHTML = request.response
                document.head.appendChild(style)
            } else {
                // 请求失败
                alert("加载 CSS 失败");
            }
        }
    }
    request.send()
}

加载JS

getJS.onclick = () => {
    console.log('111')
    const request = new XMLHttpRequest()
    request.open('GET', '/2.js')
    request.onreadystatechange = () => {
        // 下载完成，但是不知道是200的完成还是404的完成
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) {
                //请求发送成功
                // 创建script标签，把js内容写入script标签，然后插入html的body中
                const script = document.createElement('script')
                // 怎么获取相应内容？ request.response
                script.innerHTML = request.response
                document.body.appendChild(script)
            } else {
                // 请求失败
                alert("加载 JS 失败");
            }
        }
    }
    request.send()
}

加载HTML

getHTML.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/3.html')
    request.onload = () => {
        const div = document.createElement('div')
        div.innerHTML = request.response
        document.body.appendChild(div)
    }
    request.onerror = () => {
    }
    request.send()
}

加载JSON

getJSON.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/5.json')
    request.onreadystatechange = () => {
        if (request.readyState === 4) {
            if (request.status === 200) {
                // 请求成功
                // 怎么解析JSON? JSON.parse: string -> JS对象
                const obj = JSON.parse(request.response);
            }
        }
    }
    request.send()
}