AJAX入門

如何發請求？

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

有沒有什麼方式能夠實現

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

• 微軟的突破 IE 5 率先在 JS 中引入 ActiveX 對象（API），使得 JS 能夠直接發起 HTTP 請求。 隨後 Mozilla、 Safari、 Opera 也跟進（抄襲）了，取名 XMLHttpRequest，並被歸入 W3C 規範

3. AJAX Jesse James Garrett 將以下技術取名叫作 AJAX：異步的 JavaScript 和 XML
   • 使用 XMLHttpRequest 發請求
   • 服務器返回 XML 格式的字符串
   • 解析 XML，並更新局部頁面

不過咱們如今更多的統一使用 JSON 代替了 XML

4. 如何使用 XMLHttpRequest

let request = new XMLHttpRequest();
request.open('GET', '/xxx');
request.send();
request.onreadystatechange = () => {
  if( request.readyState === 4 ){
    if( request.status >= 200 && request.status <= 300 ){
      console.log('說明請求成功');
      let string = request.responseText;
      let object = JSON.parse(string)
    }else if( request.status >=400 ){
      console.log('說明請求失敗');
    };
  };
};
複製代碼

對於HTTP來講，響應的第四部分始終都是字符串。能夠用 JSON 語法表示一個對象，也能夠用 JSON 語法表示一個數組，還能夠用 XML 語法，還能夠用 HTML 語法，還能夠用 CSS 語法，還能夠用 JS 語法，還能夠用我自創的語法

5. API

1. request.onreadystatechange  //監聽請求狀態的變化
2. request.readyState === 1  //request.open()已經完成
3. request.readyState === 2  //request.send()已經完成
4. request.readyState === 3  //request.responseText正在下載
5. request.readyState === 4  //響應完成
6. request.status  //HTTP狀態碼
7. var string = request.responseText  //響應的內容
8. var value = JSON.parse(request.responseText)  //把符合JSON語法的字符串轉換成JS，解析響應返回的內容
9. value.node   //若value是對象，這就是對象裏內容
10. value.node.name  //對象裏的name的值
複製代碼

JSON是什麼

JSON 是一種輕量級的數據交換格式；（JS 是一門語言，JSON 是另外一門語言，JSON 這門語言抄襲了 JS 這門語言）

• JSON 沒有 function、undefined 和 symbol
• JSON 的字符串首尾必須用雙引號
• JSON 沒有變量和原型鏈

JSON 值能夠是：

• number
• string（在雙引號中）
• boolean（true 或 false）
• array（在方括號中[「a」,」b」]）
• object（在花括號中 {「name」:」xxx」}）
• null

同源策略

form、img、script 等上面提到的請求方式，是能夠對別的域名發送請求的。 但用 AJAX 不能對別的域名放送請求，只有協議、域名、端口號一摸同樣才容許發送 AJAX 請求。

爲何 form 表單提交沒有跨域問題，而 AJAX提交有跨域問題？

由於原網頁用 form 提交到另外一個域名後，原網頁的腳本沒法獲取新頁面中的內容，因此瀏覽器認爲這是安全的； 而 AJAX 是能夠讀取響應內容的，所以瀏覽器不能容許你這樣作。 其實請求已經發送出去了，只是拿不到響應而已。因此瀏覽器這個策略的本質是，一個域名的 JS 在未經容許的狀況下，不能讀取另外一個域名的內容，但瀏覽器並不能阻止你向另外一個域名發送請求。

CORS 跨域

AJAX 能夠經過 CORS 發送請求到別的網站 跨站資源共享：Cross-Origin Resource Sharing

• A網站的前端程序員打電話告訴B網站的後端程序員
• A前: 我想和你的網站進行交互, 你贊成嗎?
• B後: 我贊成

而後B後端程序員就在後臺代碼(響應內容)寫上這一句代碼:

response.setHeader('Access-Control-Allow-Origin', 'www.aaaaa.com')
複製代碼

這句的意思能夠理解爲：CORS 告訴瀏覽器，www.aaaaa.com 和我是一家的，別阻止它。