JavaScript - XMLHttpRequest的基本應用

為什麼要提到XMLHttpRequest呢?
那是因為在先前在 "ASP.Net MVC - 上傳檔案至Web Server上" 這篇文章裡有提到要如何用Ajax來傳送檔案至Web Server上，
解法就是利用XMLHttpRequest，
所以今天限量就要來淺談一下XMLHttpRequest。

XMLHttpRequest是JavaScipt 一個Class物件，
主要是用來傳遞資料到Web Server並接收Web Server的Response，
Ajax就是基於XMLHttpRequest的一種應用，
要如何使用XMLHttpRequst呢?
以下為使用XMLHttpRequest的基本流程：
1. 產生XMLHttpRequest物件
2. 設定非同步呼叫完成時執行的Listener
3. 判斷回傳結果是否為預期
4. 設定Request Type並開啟XMLHttpRequest
5. 傳送XMLHttpRequest
接著我們就依照流程來一一解釋。

1. 產生XMLHttpRequest物件

現今大部分的瀏覽器皆有支援XMLHttpRequest，
而Microsoft是第一個有XMLHttpRequest想法的發明者，
但在IE7之後，IE就不提供XMLHttpRequest而是提供ActiveXObject，
所以為了在各種瀏覽器上能夠使用XMLHttpRequest，
我們可以加入下列Function來依瀏覽器類型產生XMLHttpRequest物件：

function CreateXMLHttpRequestObject() {
    try { return new XMLHttpRequest(); }
    catch (e) { }
    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
    catch (e) { }
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
    catch (e) { }
    try { return new ActiveXObject("Microsoft.XMLHTTP"); }
    catch (e) { }
    throw new Error("This browser does not support XMLHttpRequest.");
}

或者可以使用window.ActiveXObject與window.XMLHttpRequest來判斷瀏覽器是否支援。

2. 設定非同步呼叫完成時執行的Listener

JavaScript中的XMLHttpRequst Class中有幾個特定處理事件的Listener，
首先，處理非同步呼叫完成事件的Listener為onreadystatechange，
在這裡要處理的是判斷回傳回來的readyState來做不同的動作，
下表為readyState值所代表的意思：

readyState值	狀態描述
0	尚未讀取
1	讀取中
2	下載完畢
3	資訊交換中
4	處理完成

所以我們要在這裡判斷當readyState為4時進行完成Communication的事情。

3. 判斷回傳結果是否為預期

接著當完成Communication，要確定Server的Response是否為我們所預期的結果，
這時候就可以使用XMLHttpRequest的status屬性，
status和Http Response的Status Code一樣，
成功就會回傳200，否則就回傳404，
所以只要繼續在onreadystatechange裡判斷status就能知道是否成功失敗。

4. 設定Request Type並開啟XMLHttpRequest

接下來就使用第一步驟所產生出來的XMLHttpRequest物件，
指定Http Request Type與Url，呼叫open() Function開啟連線，
open() Function的定義如下：open( Method, URL, Asynchronous, UserName, Password )

5. 傳送XMLHttpRequest

最後，使用XMLHttpRequest物件呼叫send() Function將XMLHttpRequest發送出去，
發送出去後收到Response就會進入onreadystatechange所指定的Function。

經過漫長的解釋後，讓限量Show個範例程式碼來最作後的Ending，
可以將範例程式碼對照步驟看會更清楚了解。

範例程式碼：

Test.cshtml:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
 <script>
     //XMLHttpRequest物件
     var xhr;

     //產生XMLHttpRequest物件的Function
     function CreateXMLHttpRequestObject() {
  try { return new XMLHttpRequest(); }
  catch (e) { }
  try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
  catch (e) { }
  try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
  catch (e) { }
  try { return new ActiveXObject("Microsoft.XMLHTTP"); }
  catch (e) { }
  throw new Error("This browser does not support XMLHttpRequest.");
     }

     //按鈕按下後引發的Functioin
     function ClickSend()
     {
  // 1.產生XMLHttpRequest物件
  xhr = CreateXMLHttpRequestObject();
  // 2.設定非同步呼叫完成時執行的Listener
  // 3.判斷回傳結果是否為預期
  xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
      alert(xhr.responseText);
      }
         }
      // 4.設定Request Type並開啟XMLHttpRequest
      xhr.open('POST', '@Url.Action("Test", "Home")');
      // 5.傳送XMLHttpRequest
      xhr.send(null);
     }

 </script>
</head>
<body>
    <div>
        <input type="button" value="Send"  onclick="ClickSend()" />
    </div>
</body>
</html>

HomeController.cs

using System;
using System.Web.Mvc;

namespace MVCTest.Controllers
{
    public class HomeController : Controller
    { 
        public ActionResult Test()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Test(String str)
        {
            return Json( "Hello" + str );
        }
    }
}

參考來源：
Understanding Callback using XMLHttpRequest
Wekipedia - XMLHttpRequest

限量ㄟ蓋步

搜尋此網誌