Ajax深入淺出

7 - AJAX深入淺出

7.1 - 原生AJAX

7.1.1 - AJAX簡介

• AJAX 全稱爲Asynchronous Javascript And XML，就是異步的 JS 和 XML。
• 通過AJAX可以在瀏覽器中向服務器發送異步請求。
• AJAX 不是新的編程語言，而是一種使用現有標準的新方法。`

7.1.2 - XML簡介

• XML可擴展標記語言。
• XML 被設計用來傳輸和存儲數據。
• XML和HTML類似，不同的是HTML中都是預定義標籤，而XML中沒有預定義標籤，全都是自定義標籤，用來表示一些數據。

//比如說我有一個學生數據：
//    name = "孫悟空" ; age = 18 ; gender = "男" ;   
//用XML表示：
    <student>
        <name>孫悟空</name>
        <age>18</age>
        <gender>男</gender>
    </student>
    
但是現在已經被JSON取代了。

//我們用 JSON 格式 表示：
{"name":"孫悟空","age":18,"gender":"男"}

7.1.3 - AJAX的工作原理

Ajax的原理相當於在用戶和服務器之間加了一箇中間層（AJAX引擎），使用戶操作與服務器響應異步化。

7.1.4 - AJAX的特點

• AJAX的優點
  可以無需刷新頁面而與服務器端進行通信。
  允許你根據用戶事件來更新部分頁面內容。
• AJAX的缺點
  沒有瀏覽歷史，不能回退
  存在跨域問題
  SEO不友好

7.1.5 - AJAX的使用

7.1.5.1. 核心對象

XMLHttpRequest //AJAX的所有操作都是通過該對象進行的。

7.1.5.2 - 使用步驟(發送ajax請求)

–創建xhr實例對象
–綁定事件監聽（監聽請求成功/失敗）
onreadystatechange 當readystate發生變化時觸發事件
0：初始化狀態， 什麼都還沒做
1：代表open調用了，但send方法還未調用（還沒有發送請求）
2：代表send方法調用了，並且接受到了部分響應信息（接受了響應首行和響應頭：響應狀態碼）
3：代表接受了部分響應體數據（如果響應體數據較小就全部接受，但數據如果較大，就只接受一部分）
4：代表接受了全部響應體數據

-設置請求信息
—請求方式
—請求地址
—請求參數
xhr.open(請求方式, 請求地址?查詢字符串參數, 同步false/異步true);
發送請求
注意：不要通過webstorm服務器啓動頁面（會產生跨域錯誤）要通過自己的服務器打開頁面

舉個栗子說：
// 1. 創建xhr實例對象
    const xhr = new XMLHttpRequest();
    // 2. 綁定事件監聽（監聽請求成功/失敗）
    xhr.onreadystatechange = function () {
      console.log('事件觸發了', xhr.readyState);
      /*if (xhr.readyState === 2) {
        // 響應狀態碼
        console.log(xhr.status);
      }
      if (xhr.readyState === 3) {
        // 響應內容
        console.log(xhr.responseText);
      }
      if (xhr.readyState === 4) {
        // 響應內容
        console.log(xhr.responseText);
      }*/
      if (xhr.readyState === 4) {
        if (xhr.status > 199 && xhr.status < 300) {
          // 成功響應內容
          console.log(xhr.responseText);
        } else if (xhr.status > 399 && xhr.status < 600) {
          // 失敗的響應
          console.log(xhr.responseText);
        }
      }
    };   

3. 設置請求信息
/*
  get請求默認會緩存起來（第二次發送請求會走緩存）
    chrome/firefox （相當於走協商緩存，需要訪問服務器）
    ie （相當於走強制緩存，不需要服務器）
    問題：如果後臺資源更新了，ie獲取不到最新的內容
    解決：請求參數加上隨意數，每次請求都不一樣，就不會走緩存
 */

    // xhr.open('GET', 'http://localhost:3000/ajax?name=jack&age=20&date=' + Date.now());
    // xhr.open('GET', 'http://localhost:3000/ajax?name=jack&age=20&date=' + Math.random());
    xhr.open('POST', 'http://localhost:3000/ajax');
    // 設置請求頭
    // xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
    xhr.setRequestHeader('content-type', 'application/json');
    // 4. 發送請求
    // xhr.send('name=jack&age=20'); // urlencoded編碼 - form
    xhr.send(JSON.stringify({name: 'jack', age: 20})); // json
    console.log('全部代碼執行完了~');
  }

7.1.5.3 - 解決IE緩存問題

• 問題： 在一些瀏覽器中（IE），由於緩存機制的存在，ajax只會發送第一次請求，剩下多次請求不會再發送給瀏覽器而是直接加載緩存中的數據。
• 解決方式： 瀏覽器的緩存是根據url地址來記錄的，所以我們只需要修改url地址（讓其實時動態改變）即可避免緩存問題
• xhr.open("get","/testAJAX?t="+Date.now());

7.1.5.4 - AJAX請求狀態

xhr.readyState 可以用來查看請求當前的狀態
0. : 對應常量UNSENT，表示XMLHttpRequest實例已經生成，但是open()方法還沒有被調用。

1. : 對應常量OPENED，表示send()方法還沒有被調用，仍然可以使用setRequestHeader()，設定HTTP請求的頭信息。
2. : 對應常量HEADERS_RECEIVED，表示send()方法已經執行，並且頭信息和狀態碼已經收到。
3. : 對應常量LOADING，表示正在接收服務器傳來的body部分的數據，如果responseType屬性是text或者空字符串，responseText就會包含已經收到的部分信息。
4. : 對應常量DONE，表示服務器數據已經完全接收，或者本次接收已經失敗了

7.2 - jQuery中的AJAX

7.2.1 - get請求

• $.get(url, [data], [callback], [type])
  url:請求的URL地址
  data:請求攜帶的參數
  callback:載入成功時回調函數
  type:設置返回內容格式，xml, html, script, json, text, _default

實例：
$.ajax({
      method: 'GET',  // 請求方式
      url: 'http://localhost:3000/ajax', // 請求地址
      data: { // 請求參數
        name: 'jack',
        age: 18
      },
      success: function (data) {
        console.log(data); // 請求成功的響應數據
      },
      error: function (error) {
        console.log(error); // 請求失敗的具體原因
      }
    });
$.get('http://localhost:3000/ajax', {name: 'jack', age: 18}, function (data) {
      console.log(data);
    })

7.2.2 - post請求

$.post(url, [data], [callback], [type])
url:請求的URL地址
data:請求攜帶的參數
callback:載入成功時回調函數
type:設置返回內容格式，xml, html, script, json, text, _default

實例：
$.ajax({
      method: 'POST',  // 請求方式
      url: 'http://localhost:3000/ajax', // 請求地址
      data: JSON.stringify({ // 請求參數
        name: 'jack',
        age: 18
      }),
      headers: { // 請求頭： 默認post請求是以form表單方式發送
        'content-type': 'application/json'
      },
      success: function (data) {
        console.log(data); // 請求成功的響應數據
      },
      error: function (error) {
        console.log(error); // 請求失敗的具體原因
      }
    });
$.post('http://localhost:3000/ajax', {name: 'jack', age: 18}, function (data) {
      console.log(data);
    });