AJAX是什么？

---

title: AJAX是什么？
date: 2018-10-06 23:07:04
tags: [JavaScript]
categories: JavaScript

---

AJAX的发展历史

历史上发送请求的方式

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

• 所以需要一个能发任何请求（GET,POST,PUT,DELETE）并且想以什么形式展现就以什么形式展示的方法。后来就有了AJAX。

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.onreadystatechange = () =>{  //尽量放在最上面，这样就不会错过任何变化，
       if(request.readyState === 4){     //如果放在request.send()之后，这时候readyState已经从0变为1，就只能捕获到2，3，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 语法，而且没有新增任何原创的语法）
区别：
JSON 不支持函数、undefined、变量、引用、单引号字符串、对象的key不支持单引号也不支持不加引号、没有内置的 Date、Math、RegExp 等。
而 JavaScript 全都支持。

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

---

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

后端代码：

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": "allens",
        "heading": "打招呼",
        "content": "hello"
      }
    }
    `)
    response.end()
}

前端代码：

myButton.addEventListener('click', (e)=>{
  let request = new XMLHttpRequest()
  request.open('get', '/xxx') // 配置request
  request.send()
  request.onreadystatechange = ()=>{
    if(request.readyState === 4){
      console.log('请求响应都完毕了')
      if(request.status >= 200 && request.status < 300){
        console.log('请求成功')
        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)
      }else if(request.status >= 400){
        console.log('请求失败') 
      }
    }
  }
})

---

同源策略和CORS跨域

同源策略的本质是：一个域名的JS，在未经允许的情况下，不能读取另一个域名的内容，但你可以向另一个域名发送请求。

1. 只有 协议+端口+域名 一模一样才允许发 AJAX 请求
2. CORS 可以告诉浏览器，我俩一家的，别阻止他
3. 突破同源策略 === 跨域

后端代码：

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