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 全都支持。

那么現在再結合前后端一起看一下代碼

后端代碼：

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', '*')   //允許所有域名向我發起請求