AJAX是什么？

历史上发送请求的方式

• 用 form 可以发请求，但是会刷新页面或新开页面
• 用 a 可以发 get 请求，但是也会刷新页面或新开页面
• 用 img 可以发 get 请求，但是只能以图片的形式展示
• 用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
• 用 script 可以发 get 请求，但是只能以脚本的形式运行
  注意：以上除了form，都只能发get请求

有没有什么方式可以实现:

1.get、post、put、delete 请求都行
2.想以什么形式展示就以什么形式展示

---

XMLHttpRequest的发明

微软当时取得了重大突破：
IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 可以直接发起 HTTP 请求。
随后 Mozilla、 Safari、 Opera 也跟进了，取名 XMLHttpRequest，并被纳入 W3C 规范

---

AJAX

Jesse James Garrett 将下面的技术取名叫做 AJAX：异步的 JavaScript 和 XML (async JavaScript and XML)

1.使用XMLHttpRequest发请求
2.服务器返回XML格式的字符串
3.JS解析XML，并局部更新页面

        let request = new XMLHttpRequest()
        // 尽量放在最上面，这样就不会错过任何变化
        // 如果放在request.send()之后，这时候readyState已经从0变为1，就只能捕获到2，3，4。
        request.onreadystatechange = () => {
            if (request.readyState === 4) {
                if (request.status >= 200 && request.status < 300) {
                    console.log('请求成功')
                } else if (request.status >= 400) {
                    console.log('请求失败')
                }
            }
        }
        //初始化请求
        request.open('GET', '/xxx')
        //发送请求
        request.send()

readyState：请求的五种状态

0： 未打开 open()方法还未被调用
1： 未发送 send()方法还未被调用
2： 已经获取响应头 send()方法已经被调用，响应头和响应状态已经返回
3： 正在下载响应体 响应体下载中；responseText中已经获取了部分数据
4： 请求完成 整个请求过程完成

---

JSON

JSON 是一门抄袭/借鉴 JavaScript 的语言，同时也是一种数据交互格式，JSON 是 JavaScript 的子集（或者说 JSON 只抄袭了一部分 JavaScript 语法，而且没有新增任何原创的语法）

区别：SON 不支持函数、undefined、变量、引用、单引号字符串、对象的key不支持单引号也不支持不加引号、没有内置的 Date、Math、RegExp 等。而 JavaScript 全都支持。

JavaScript	JSON
undefined	无
null	null
[ 'a', 'b' ]	[ "a", "b" ]
'keller'	"keller"
{ name: 'keller' }	{ "name": "keller" }
function fn() {}	无
var a = {}; a.self = a	无
__proto__	无

---

那么现在再结合前后端一起看一下代码

前端代码

      myButton.addEventListener('click', (e) => {
            let request = new XMLHttpRequest()
            request.open('get', '/xxx') // 配置request
            request.send()
            request.onreadystatechange = () => {
                if (request.readyState === 4) {
                    console.log('请求响应都完毕了')
                    console.log(request.status)
                    if (request.status >= 200 && request.status < 300) {
                        console.log('说明请求成功')
                        console.log(typeof request.responseText)
                        console.log(request.responseText)
                        let string = request.responseText
                        // 把符合 JSON 语法的字符串
                        // 转换成 JS 对应的值
                        let object = window.JSON.parse(string)
                        // JSON.parse 是浏览器提供的
                        console.log(typeof object)
                        console.log(object)
                        console.log('object.note')
                        console.log(object.note)

                    } else if (request.status >= 400) {
                        console.log('说明请求失败')
                    }

                }
            }
        })

后端代码：

      if (path === '/xxx') {
            response.statusCode = 200
            response.setHeader('Content-Type', 'text/json;charset=utf-8')
            response.setHeader('Access-Control-Allow-Origin', 'http://frank.com:8001')
            response.write(`
                {
                    "note":{
                        "to": "frank",
                        "from": "keller",
                        "heading": "打招呼",
                        "content": "hello"
                    }
                }
            `)
            response.end()
        }

---

同源策略和CORS跨域

同源策略的本质是：一个域名的JS，在未经允许的情况下，不能读取另一个域名的内容。

只有 协议+域名+端口 一模一样才允许发 AJAX 请求
1.http://baidu.com 可以向 http://www.baidu.com发 AJAX 请求吗？（不可以）
2.http://baidu.com:80可以向http://baidu.com:81发 AJAX 请求吗？（不可以）

突破同源策略 === 跨域，通过使用JSONP以及CORS可以实现，这里着重介绍CORS

CORS（跨站资源共享）: Cross-Origin-Resource-Sharing
通俗理解：CORS 可以告诉浏览器，我俩一家的，别阻止他
实现方式：让目标站点的后端程序员在相应API的响应头里添加以下代码（切记不要在全网站加，需要哪个API，就在哪个API里加）

后端代码如下：

    //允许http://keller.com:8001向我发起请求
    response.setHeader('Access-Control-Allow-Origin', 'http://keller.com:8001') 
    //允许所有域名向我发起请求  
    response.setHeader('Access-Control-Allow-Origin', '*')