ajax(Asynchronous JavaScript + XML) 技術學習

標籤：process   訪問   存在   聲明   mozilla   request對象   事件處理   false   content   

參考文檔：https://developer.mozilla.org/en-US/docs/AJAX本文進行了大致翻譯。 Ajax 本身本不是一門技術，而是在2005年由Jesse James Garrett首創的描述為一個“新”途徑來應用許多已存在的技術，包括：HTML 或者 XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 和最重要的 XMLHttpRequest object。當把這些技術結合到ajax模型裡的時候，web app可以快速地，逐漸地更新使用者介面來取代以前的重新整理整個瀏覽介面，這使得應用更快和使用者使用體驗更好。 儘管x在ajax裡面代表xml，json由於其更輕和是javascript的一部分等優點而被更多的使用。ajax模型裡面的json和xml都是用來封裝資料資訊的。 什麼是AJAX?AJAX 代表 Asynchronous JavaScript And XML. 簡而言之, 他是用 XMLHttpRequestobject 來和伺服器交流的方式. 它可以以不同的方式發送和接收資訊, 包括 JSON, XML, HTML, 和text檔案. AJAX最有吸引力的特性是 "非同步", 這意味著它可以在不重新整理頁面的情況下同伺服器交流，交換資料更新頁面。 ajax的主要兩個主要特性:

• 不重新整理頁面請求資料
• 從伺服器擷取資料

 Step 1 – 如何請求為了用javascript請求伺服器，我們要執行個體化一個有必要功能的對象。這是XMLHttpRequest的來源。起初Internet Explorer實現了一個被稱為XMLHTTP的ActiveX對象。 之後，Mozilla， Safari，和其他瀏覽器廠商陸續實現了XMLHttpRequest對象來支援這個方法和類似於Microsof的ActiveX對象功能。同時，Microsoft也實現了XMLHttpRequest。  // Old compatibility code, no longer needed.if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...    httpRequest = new XMLHttpRequest();} else if (window.ActiveXObject) { // IE 6 and older    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");} 注意：以上代碼只做解釋作用，只是建立了XMLHttp的執行個體。可以跳到step 3去看更實用的例子。 請求之後，我們需要接收請求結果。在這個階段，我們需要告訴XMLHttp請求對象來處理響應的JavaScript方法，通過配置他的onreadystatechangeproperty方法，如下：

httpRequest.onreadystatechange = nameOfTheFunction;

或者

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

在聲明怎麼接受響應之後，我們需要發起請求，通過調用HTTP請求對象的 open() 和 send() 方法，如下:

httpRequest.open(‘GET‘, ‘http://www.example.org/some.file‘, true);
httpRequest.send();

•  open() 的第一個參數是HTTP 要求的方法 – GET, POST, HEAD, 或者其他伺服器支援的方法。方法名全部大寫是http標準，不然有些瀏覽器（例如：Firefox）可能會不發器請求。 點擊 W3C specs 獲得更多關於http要求方法的資訊。
• 第二個參數是要請求的url。從安全方面考慮，預設不能跨域請求url。確保所有頁面在同一個網域名稱下，不然調用open()方法，你會得到 "permission denied” 錯誤。 一個常見的跨域是你網站的網域名稱是 domain.tld,但是嘗試用 www.domain.tld訪問頁面。如果真的想跨域請求，查看 HTTP access control。
• 可選的第三個參數設定這個請求是同步還是非同步。如果是true (預設值), JavaScript 會繼續執行，使用者操作頁面的同時，伺服器返回資料。這是 AJAX的A。

send()方法的參數可以是你想發送到伺服器的任意資料（POST）。表單資料必須是伺服器能解析的形式，例如查詢字串：

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

或者其他形式，例如 multipart/form-data，JSON， XML， 等等。注意如果你想POST資料，你可能要佈建要求的MIME type。例如我們把下面代碼放在調用send()之前，來把表單資料當查詢資料發送：

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

Step 2 – 處理伺服器響應請求的時候，我們已經提供了處理響應的JavaScript方法：

httpRequest.onreadystatechange = nameOfTheFunction;

這個方法做什嗎？首先，我們需要檢查請求狀態。如果張台值為XMLHttpRequest.DONE (4)，意味著已經接受了所有伺服器的響。

if (httpRequest.readyState === XMLHttpRequest.DONE) {
    // Everything is good, the response was received.
} else {
    // Not ready yet.
}

 readyState 全部可能的值，可以在 XMLHTTPRequest.readyState 查看，如下:

• 0 (uninitialized) or (請求未初始化)
• 1 (loading) or (伺服器建立串連)
• 2 (loaded) or (請求被接收)
• 3 (interactive) or (執行請求)
• 4 (complete) or (request finished and response is ready請求完成響應到位)

• Value	State	Description
  0	UNSENT	Client has been created. open() not called yet.
  1	OPENED	open() has been called.
  2	HEADERS_RECEIVED	send() has been called, and headers and status are available.
  3	LOADING	Downloading; responseText holds partial data.
  4	DONE	The operation is complete.

(Source)接下來，檢查HTTP響應的 response code 。查看 W3C看到可能的值。下面例子我們用response code是不是等於200來判斷ajax請求是否成功。

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

檢查完響應值後。我們可以隨意處理伺服器返回的資料，有兩個選擇獲得這些資料：

• httpRequest.responseText – 返回伺服器響應字串
• httpRequest.responseXML – 返回伺服器響應XMLDocument 對象 可以傳遞給JavaScript DOM 方法

上面的代碼只有在非同步情況下有效（open() 的第三個參數設定為true）。如果你用同步請求，就沒必要指定一個方法。但是我們不鼓勵使用同步請求，因為同步會導致極差的使用者體驗。Step 3 – 一個簡單的例子我們把上面的放在一起合成一個簡單的HTTP請求。我們的JavaScript 將請求一個HTML 文檔， test.html, 包含一個字串 "I‘m a test."然後我們alert()響應內容。這個例子使用普通的JavaScript — 沒有引入jQuery， HTML, XML 和 PHP 檔案應該放在同一級目錄下。

<button id="ajaxButton" type="button">Make a request</button>

<script>
(function() {
  var httpRequest;
  document.getElementById("ajaxButton").addEventListener(‘click‘, makeRequest);

  function makeRequest() {
    httpRequest = new XMLHttpRequest();

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

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

在這個例子裡：

• 使用者點擊"Make a request” 按鈕；
• 事件調用 makeRequest() 方法；
• 請求發出，然後 (onreadystatechange)執行傳遞給 alertContents()；
• alertContents() 檢查響應是否 OK, 然後 alert() test.html 檔案內容。

  注意 1: 如果伺服器返回XML，而不是靜態XML檔案，你必須設定response headers 來相容i.e.。如果你不設定headerContent-Type: application/xml, IE 將會在你嘗試擷取 XML 元素之後拋出一個JavaScript "Object Expected" 錯誤 。  注意 2: 如果你不設定header Cache-Control: no-cache 瀏覽器將會緩衝響應不再次提交請求，很難debug。你可以添加永遠不一樣的GET 參數，例如 timestamp 或者 隨機數 (查看 bypassing the cache) 注意 3: 如果 httpRequest 變數是全域的，混雜調用 makeRequest()會覆蓋各自的請求,導致一個競爭的狀態。在一個closure 裡聲明 httpRequest 本地變數 來避免這個問題。在發生通訊錯誤(如伺服器崩潰)、onreadystatechange方法會拋出一個異常,當訪問響應狀態。為了緩解這個問題,你可以用ry…catch封裝你的if...then 語句:

function alertContents() {
  try {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert(‘There was a problem with the request.‘);
      }
    }
  }
  catch( e ) {
    alert(‘Caught Exception: ‘ + e.description);
  }
}

Step 4 – 使用 XML 響應在前面的例子裡，在擷取到響應之後，我們用request 對象responseText 屬性獲得 test.html 檔案內容。現在讓我們嘗試擷取responseXML 屬性。首先，讓我們建立一個有效XML文檔，留著待會我們請求。(test.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文檔裡面的內容。你可以在here查看test.xml，在here查看修改後的指令碼。Step 5 – 使用資料返回最後，讓我們來發送一些資料到伺服器，然後獲得響應。我們的JavaScript這次將會請求一個動態網頁面，test.php將會擷取我們發送的資料然後返回一個計算後的字串 - "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() 方法可以和Step 3 一樣。然而，服務端不僅返回計算後的字串，還返回了原來的使用者名稱。所以如果我們在輸入框裡面輸入 “Jane”，服務端的返回將會像這樣：{"userData":"Jane","computedString":"Hi, Jane!"}要在alertContents()使用資料，我們不能直接alert responseText, 我們必須轉換資料然後 alert computedString屬性:

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

test.php 檔案如下：

$name = (isset($_POST[‘userName‘])) ? $_POST[‘userName‘] : ‘no name‘;
$computedString = "Hi, " . $name;
$array = [‘userName‘ => $name, ‘computedString‘ => $computedString];
echo json_encode($array);

查看更多DOM方法, 請查看 Mozilla‘s DOM implementation 文檔。

ajax(Asynchronous JavaScript + XML) 技術學習