AJAX基礎知識

在AJAX出現前，網頁發送請求的有哪些呢？

• 用 form 能夠發請求，可是會刷新頁面或新開頁面
• 用 a 能夠發 get 請求，可是也會刷新頁面或新開頁面
• 用 img 能夠發 get 請求，可是隻能以圖片的形式展現
• 用 link 能夠發 get 請求，可是隻能以 CSS、favicon 的形式展現
• 用 script 能夠發 get 請求，可是隻能以腳本的形式運行

有沒有什麼其它的方法？

• get、post、put、delete 請求都行
• 想以什麼形式展現就以什麼形式展現

IE5率先在JavaScript中引入ActiveX對象（API），使得JavaScript能夠直接發起HTTP請求。隨後Mozilla、Safari、Opera也跟進了，取名XMLHttpRequest，並被歸入W3C規範當中。

AJAX：異步的JavaScript和XML。

• 使用XMLHttpRequest發請求
• 服務器返回XML格式的字符串
• JS 解析XML，並更新局部頁面

如何使用XMLHttpRequest？

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)
      } 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://lvbin.com:8001')
  response.write(`
    {
      "note":{
        "to": "future",
        "from": "now",
        "heading": "greet",
        "content": "Hello World"
      }
    }
 `)
  response.end()
複製代碼

同源策略（Cross-Origin Resource Sharing）

• 只有 協議+端口+域名 如出一轍才容許發 AJAX 請求

例如如下的都是不能夠的

• baidu.com 能夠向 www.baidu.com 發 AJAX 請求嗎 no
• baidu.com:80 能夠向 baidu.com:81 發 AJAX 請求嗎 no

那爲何form能夠跨域請求呢？由於提交到另外一個域名以後，原頁面的腳步沒法獲取新頁面中的內容，瀏覽器認爲這是安全的。

而AJAX是能夠讀取響應的內容，所以瀏覽器不能容許你這麼作。其實請求已經發送出去了，只是拿不到響應的內容。總結來講就是這個策略的本質是，一個域名的JS，在未經容許的狀況下，不得讀取另外一個域名的內容，但瀏覽器不會阻止向另外一個域名發送請求。

CORS跨域 假設http://lvbin.com:8001須要訪問http://lvbin.com:8002，而且獲取內容。那麼只須要在http://lvbin.com:8002後端添加下面一行代碼：

response.setHeader('Access-Control-Allow-Origin', 'http://lvbin.com:8001')
複製代碼