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);
    });