天天看點
傳回

Ajax從入門到搞定，一篇文章就夠了

Ajax從入門到搞定，一篇文章就夠了

英文原文：https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

翻譯者：不想成熟的大叔

什麼是 Ajax？

Ajax 的意思就是異步的 JavaScript 和 XML。簡而言之，它是使用 XMLHttpRequest 對象與伺服器端通信的腳本語言。它可以發送及接收各種格式的資訊，包括 JSON、XML、HTML 和文本檔案。

Ajax 最為吸引人的就是它的“異步”特性，這意味着 Ajax 可以無需重新整理頁面而與伺服器端進行通信。允許你根據使用者事件來更新部分頁面内容。

可以考慮的兩個特性：

  • 向伺服器端發送請求，而不用重新加載頁面。
  • 從伺服器端接收資料并處理。

第一步：如何發送一個 HTTP 請求

需要通過 XMLHttpRequest 實作使用 JavaScript 向伺服器端發送一個 HTTP 請求。而 Internet Explorer（IE）中引入一個名為 XMLHTTP 的ActiveX對象實作與 XMLHttpRequest 相同的功能，Mozilla、Safari 和其他浏覽器則使用 XMLHttpRequest。

如果要相容各個浏覽器的話，可以這樣來做：

var httpRequest;
if (window.XMLHttpRequest) {
  // Mozilla, Safari, IE7+ ...
  httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  // IE 6 and older
  httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
注意：出于示範目的，上面建立 XMLHTTP 執行個體是簡化了的代碼。關于更加真實的例子，請參閱本文的第三步。

接下來，當接收到伺服器端響應時，需要告訴 HTTP 請求對象使用 JavaScript 函數來處理響應。将 XMLHttpRequest 對象的 onreadystatechange 屬性設定為該函數的名稱，當請求的狀态變化時，該函數會被調用。

httpRequest.onreadystatechange = nameOfTheFunction;

注意：該函數名沒有傳遞參數的括号和參數，這表示隻是配置設定了一個函數的引用，而不是真正調用該函數。當然，也可以動态定義一個匿名函數，這樣可以實時地處理響應。

httpRequest.onreadystatechange = function () {  
// process the server response};

在處理完伺服器端的響應之後，我們就可以調用 XMLHttpRequest 對象的 open() 和 send() 方法向伺服器端發送請求了。

httpRequest.open("GET", "http://www.example.org/some.file", true);
httpRequest.send(null);
  • open() 方法的第一個參數：HTTP 請求方法 – GET、POST、HEAD 及任何伺服器端支援的方法。根據 HTTP 标準保持大寫，否則一些浏覽器（例如火狐）可能無法處理請求。關于 HTTP 請求方法的更多資訊，你可以檢視W3C 規範
  • open() 方法的第二個參數：請求的 URL。出于安全考慮，不能調用第三方域的頁面内容。當調用 open() 方法時，一定确認使用相同域名内的頁面，否則會得到“permission denied”的錯誤提示。常見的錯誤是使用 domain.tld 通路網站，卻使用 www.domain.tld 來請求頁面。如果真的需要發送一個請求到另一個域的話，可以檢視 HTTP 通路控制
  • open() 方法的第三個參數：可選，是否是異步請求。如果是 true（預設值），表示是異步請求。

send() 方法的參數表示當請求為 POST 時，向伺服器端發送請求的資料内容。如果發送的是表單資料格式的話，伺服器端可以向字元串一樣地解析。

"name=value&anothername=" + encodeURIComponent(myVar) + "&so=on";

向伺服器端發送的資料格式也可以是 JSON、SOAP 等格式。

注意：如果使用 POST 方式發送資料的話，在調用 send() 方法前，需要設定請求的 MIME 類型。

httpRequest.setRequestHeader(
  "Content-Type",
  "application/x-www-form-urlencoded"
);

第二步：處理伺服器端的響應

當發送請求時，已經定義了一個函數來處理響應。

httpRequest.onreadystatechange = nameOfTheFunction;

這個函數可以做什麼呢？首先，該函數需要檢查請求的狀态。如果狀态值為 4 的話，這表示接收到完成的伺服器端響應，可以繼續處理。

if (httpRequest.readyState === 4) {
  // everything is good, the response is received
} else {
  // still not ready
}

readyState 的值清單如下：

  • 0 – 未初始化
  • 1 – 正在加載
  • 2 – 加載完畢
  • 3 – 互動中
  • 4 – 完成

接下來需要檢查 HTTP 伺服器端響應的狀态代碼，W3C 網站 列出了所有的狀态代碼。下面的例子中，通過是否為 200 OK 的狀态碼來判斷 Ajax 調用是否是成功的。

if (httpRequest.status === 200) {
  // perfect!
} else {
  // there was a problem with the request,
  // for example the response may contain a 404 (Not Found)
  // or 500 (Internal Server Error) response code
}

在檢查了請求的狀态和響應的狀态碼後，就可以接收伺服器端發送的資料并處理。有兩種選項通路這些資料：

  • httpRequest.responseText：将伺服器端響應作為文本字元串傳回
  • httpRequest.responseXML：将響應作為一個 XMLDocument 對象傳回，該對象可以使用 JavaScript DOM 函數進行周遊。

注意，上述步驟隻有異步請求（open() 方法的第三個參數設定為 true）時才是有效的。如果使用同步請求的話，是不需要指定函數的。在調用 send() 方法後就可以通路到伺服器端傳回的資料，因為腳本會停止并等待伺服器端的響應。

第三步：一個簡單的例子

下面來做一個簡單的 HTTP 請求。JavaScript 将請求一個包含“I’m a test.”文本的“test.html”HTML 文檔，然後使用alert() 方法列印 test.html 檔案的内容。

<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
  Make a request
</span>
<script type="text/javascript">
  (function () {
    var httpRequest;
    document.getElementById("ajaxButton").onclick = function () {
      makeRequest("test.html");
    };


    function makeRequest(url) {
      if (window.XMLHttpRequest) {
        // Mozilla, Safari, ...
        httpRequest = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        // IE
        try {
          httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
          try {
            httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e) {}
        }
      }


      if (!httpRequest) {
        alert("Giving up :( Cannot create an XMLHTTP instance");
        return false;
      }
      httpRequest.onreadystatechange = alertContents;
      httpRequest.open("GET", url);
      httpRequest.send();
    }


    function alertContents() {
      if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
          alert(httpRequest.responseText);
        } else {
          alert("There was a problem with the request.");
        }
      }
    }
  })();
</script>

在這個例子中：

  • 在浏覽器中使用者單擊“Make a request”連結；
  • 事件處理器調用 makeRequest() 方法，通過向該函數傳遞的參數，請求一個處在同一目錄中的“test.html”HTML 檔案；
  • 請求後，（onreadystatechange）執行 alertContents() 方法；
  • alertContents() 方法用于檢查如果正确地接收到響應，利用 alert() 方法列印“test.html”檔案包含的内容。

注意：

  • 如果你發送一個請求後傳回的是一段 XML 代碼，而不是一個靜态的 XML 檔案的話，在 Internet Explorer 中必須設定一些響應頭。如果沒有設定響應頭“Content-Type: application/xml”的話，當試圖通路 XML 元素時 IE 将抛出一個 "Object Expected" 的 JavaScript 錯誤。
  • 如果沒有設定頭“Cache-Control: no-cache”的話，浏覽器将緩存響應并不會重新送出請求。可以添加像時間戳或一個随機數的不同 GET 請求參數（參考 bypassing the cache）。
  • 如果 httpRequest 變量是全局的，makeRequest() 方法因為沖突可能會被重寫。将 httpRequest 變量定義在一個閉包中的話，可以避免 Ajax 函數的沖突。
  • 如果出現通信錯誤（如伺服器端被關閉），當試圖通路狀态字段時在 onreadystatechange 的方法中将會抛出一個異常。確定 if 語句聲明在 try..catch 語句中。 
function alertContents() {
  try {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert("There was a problem with the request.");
      }
    }
  } catch (e) {
    alert("Caught Exception: " + e.description);
  }
}

第四步：使用 XML 進行響應

在前面的例子中，當接收到響應後使用 XMLHttpRequest 對象的 responseText 屬性通路“test.html”檔案包含的内容。現在嘗試一下 responseXML 屬性。

首先，建立一個用于請求的名為“test.xml”的有效 XML 文檔，代碼如下：

<?xml version="1.0" ?>
<root>
    I'm a test.
</root>

在腳本中，隻需要修改請求行：

onclick="makeRequest('test.xml')"

然後在 alertContents() 方法中，需要使用如下代碼替換 alert(httpRequest.responseText); 這一行代碼：

var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName("root").item(0);
alert(root_node.firstChild.data);

這段代碼需要由 responseXML 給予的 XMLDocument 對象，然後使用 DOM 方法來通路 XML 文檔中的資料。

第五步：處理資料

最後，向伺服器端發送一些資料并接收響應。這次 JavaScript 腳本請求一個動态頁面“test.php”，該頁面将根據發送的資料傳回一個“computedString”-“Hello, [user data]!”，并使用 alert() 方法進行列印。

首先，向 HTML 頁面中添加一個文本框，使用者可以通過該文本框輸入他們的名字：

<label
  >Your name:
  <input type="text" id="ajaxTextbox" />
</label>
<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
  Make a request
</span>

還需要添加一行事件處理器用于從文本框擷取使用者的資料，并将該資料随着 URL 傳遞給 makeRequest() 方法：

document.getElementById("ajaxButton").onclick = function () {
  var userName = document.getElementById("ajaxTextbox").value;
  makeRequest("test.php", userName);
};

修改 makeRequest() 方法用于接收使用者資料并發送給伺服器端。将請求方式從 GET 修改為 POST，使用者資料作為參數傳遞給 httpRequest.send() 方法：

function makeRequest(url, userName) {


    ...


    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('POST', url);
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    httpRequest.send('userName=' + encodeURIComponent(userName));
}

alertContents() 方法可以向第三步一樣利用 alert() 方法列印伺服器端傳回的資料。假設伺服器端傳回的是 computedString 和使用者資料的話，如果使用者在文本框中輸入“Jane”伺服器端響應的内容會像是這樣：

{"userData":"Jane","computedString":"Hi, Jane!"}

在 alertContents() 方法中使用這些資料，不僅可以使用 alert() 方法列印 responseText 的内容，還可以将其解析并列印 computedString 屬性内容：

function alertContents() {
  if (httpRequest.readyState === 4) {
    if (httpRequest.status === 200) {
      var response = JSON.parse(httpRequest.responseText);
      alert(response.computedString);
    } else {
      alert("There was a problem with the request.");
    }
  }
}

本文完〜

Ajax從入門到搞定，一篇文章就夠了
xml 伺服器端 資料
上一篇: flutter 報錯 setState() called after dispose() This error happens if you call setState()。。。
下一篇: 快速邁向Spark程式設計高手之路 第二講

繼續閱讀