簡易 Ajax 入門案例

時間 2019-12-09

標籤簡易 ajax 入門案例欄目 Ajax 简体版

原文原文鏈接

AJAX = 異步 JavaScript 及 XML（Asynchronous JavaScript and XML）

AJAX 不是一種新的編程語言，而是一種用於建立更好更快以及交互性更強的 Web 應用程序的技術。javascript

經過 AJAX，咱們的 JavaScript 可以使用 JavaScript 的 XMLHttpRequest 對象來直接與服務器進行通訊。經過這個對象，咱們的 JavaScript 可在不重載頁面的狀況與 Web 服務器交換數據。html

AJAX 在瀏覽器與 Web 服務器之間使用異步數據傳輸（HTTP 請求），這樣就可以使網頁從服務器請求少許的信息，而不是整個頁面。java

AJAX 可以使因特網應用程序更小、更快，更友好。web

AJAX 是一種獨立於 Web 服務器軟件的瀏覽器技術。ajax

AJAX 使用 Http 請求

在傳統的 JavaScript 編程中，假如咱們但願從服務器上的文件或數據庫中獲得任何的信息，或者向服務器發送信息的話，就必須利用一個 HTML 表單向服務器 GET 或 POST 數據。而用戶則須要單擊「提交」按鈕來發送/獲取信息，等待服務器的響應，而後一張新的頁面會加載結果。數據庫

因爲每當用戶提交輸入後服務器都會返回一張新的頁面，傳統的 web 應用程序變得運行緩慢，且愈來愈不友好。編程

經過利用 AJAX，JavaScript 會經過 JavaScript 的 XMLHttpRequest 對象，直接與服務器來通訊。瀏覽器

經過使用 HTTP 請求，web 頁可向服務器進行請求，並獲得來自服務器的響應，而不加載頁面。用戶能夠停留在同一個頁面，他不會注意到腳本在後臺請求過頁面，或向服務器發送過數據。緩存

XMLHttpRequest 對象

經過使用 XMLHttpRequest 對象，web 開發者能夠作到在頁面已加載後從服務器更新頁面！

在 2005 年 AJAX 被 Google 推廣開來（Google Suggest）。服務器

Google 建議使用 XMLHttpRequest 對象來建立一種動態性極強的 web 界面：當咱們開始在 Google 的搜索框中輸入查詢時，JavaScript 會向某個服務器發出這些字詞，而後服務器會返回一系列的搜索建議。

XMLHttpRequest 對象獲得下列瀏覽器的支持：Internet Explorer 5.0+、Safari 1.二、Mozilla 1.0 / Firefox、Opera 8+ 以及 Netscape 7。

第一個 AJAX 應用程序

爲了更好的理解 AJAX 的工做原理，咱們將建立一個小型的 AJAX 應用程序。

首先，咱們須要一個帶有兩個文本框的 HTML 表單：用戶名和時間。用戶名文本框由用戶填寫，而時間文本框使用 AJAX 進行填寫。

此 HTML 文件名爲 "TestAjax.html"（請注意這個 HTML 表單沒有提交按鈕！）

<html>
<body>

<form name="myForm">
用戶: <input type="text" name="username" />
時間: <input type="text" name="time" />
</form>

</body>
</html>

AJAX - 瀏覽器支持

AJAX 的要點是 XMLHttpRequest 對象。

不一樣的瀏覽器建立 XMLHttpRequest 對象的方法是有差別的。

IE 瀏覽器使用 ActiveXObject，而其餘的瀏覽器使用名爲 XMLHttpRequest 的 JavaScript 內建對象。

如需針對不一樣的瀏覽器來建立此對象，咱們要使用一條 "try and catch" 語句。

讓咱們用這段建立 XMLHttpRequest 對象的 JavaScript 來更新一下咱們的 "testAjax.htm" 文件

<html>
<body>

<script type="text/javascript">

function ajaxFunction()
 {
 var xmlHttp;
 
 try
    {
   // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
 catch (e)
    {

  // Internet Explorer
   try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
   catch (e)
      {

      try
         {
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
      catch (e)
         {
         alert("您的瀏覽器不支持AJAX！");
         return false;
         }
      }
    }
 }
</script>

<form name="myForm">
用戶: <input type="text" name="username" />
時間: <input type="text" name="time" />
</form></body>
</html>

例子解釋：

首先聲明一個保存 XMLHttpRequest 對象的 xmlHttp 變量。

而後使用 XMLHttp=new XMLHttpRequest() 來建立此對象。這條語句針對 Firefox、Opera 以及 Safari 瀏覽器。假如失敗，則嘗試針對 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")，假如也不成功，則嘗試針對 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。

假如這三種方法都不起做用，那麼這個用戶所使用的瀏覽器已經太過期了，他會看到一個聲明此瀏覽器不支持 AJAX 的提示。

AJAX - 更多有關 XMLHttpRequest 對象的知識

在向服務器發送數據以前，咱們有必要解釋一下 XMLHttpRequest 對象的三個重要的屬性。

onreadystatechange 屬性

onreadystatechange 屬性存有處理服務器響應的函數。下面的代碼定義一個空的函數，可同時對 onreadystatechange 屬性進行設置

xmlHttp.onreadystatechange=function()
  {
  // 咱們須要在這裏寫一些代碼
  }

readyState 屬性

readyState 屬性存有服務器響應的狀態信息。每當 readyState 改變時，onreadystatechange 函數就會被執行。

這是 readyState 屬性可能的值

狀態	描述
0	請求未初始化（在調用 open() 以前）
1	請求已提出（調用 send() 以前）
2	請求已發送（這裏一般能夠從響應獲得內容頭部）
3	請求處理中（響應中一般有部分數據可用，可是服務器尚未完成響應）
4	請求已完成（能夠訪問服務器響應並使用它）

咱們要向這個 onreadystatechange 函數添加一條 If 語句，來測試咱們的響應是否已完成（意味着可得到數據）

xmlHttp.onreadystatechange=function()
  {
  if(xmlHttp.readyState==4)
    {
    // 從服務器的response得到數據
    }
  }

responseText 屬性

能夠經過 responseText 屬性來取回由服務器返回的數據。

在咱們的代碼中，咱們將把時間文本框的值設置爲等於 responseText

xmlHttp.onreadystatechange=function()
  {
  if(xmlHttp.readyState==4)
    {
    document.myForm.time.value=xmlHttp.responseText;
    }
  }

AJAX - 向服務器發送一個請求

要想把請求發送到服務器，咱們就須要使用 open() 方法和 send() 方法。

open() 方法須要三個參數。第一個參數定義發送請求所使用的方法（GET 仍是 POST）。第二個參數規定服務器端腳本的 URL。第三個參數規定應當對請求進行異步地處理。

send() 方法可將請求送往服務器。若是咱們假設 HTML 文件和 ASP 文件位於相同的目錄，那麼代碼是這樣的

xmlHttp.open("GET","TimeHandler.ashx",true);
xmlHttp.send(null);

如今，咱們必須決定什麼時候執行 AJAX 函數。當用戶在用戶名文本框中鍵入某些內容時，咱們會令函數「在幕後」執行。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>

    <script type="text/javascript">
        function ajaxFunction() {
            var xmlHttp;
            try {
                // Firefox, Opera 8.0+, Safari
                xmlHttp = new XMLHttpRequest();
            }
            catch (e) {
                // Internet Explorer
                try {
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e) {

                    try {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e) {
                        alert("您的瀏覽器不支持AJAX！");
                        return false;
                    }
                }
            }

            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4) {
                    document.myForm.time.value = xmlHttp.responseText;
                }
            }

            xmlHttp.open("GET", "/TimeHandler.ashx", true);
            //不使用緩存
            xmlHttp.setRequestHeader("if-modified-since", "0");
            xmlHttp.send(null);

        }
    </script>

    <form name="myForm">
        用戶: <input type="text" name="username" onkeyup="ajaxFunction();" />
        時間: <input type="text" name="time" />
    </form>

</body>
</html>

AJAX - 服務器端的腳本

如今，咱們要建立可顯示當前服務器時間的腳本。

responseText 屬性會存儲從服務器返回的數據。在這裏，咱們但願傳回當前的時間。這是 "TimeHandler.ashx" 的代碼

public class TimeHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write(DateTime.Now.ToString("yyy-MM-dd hh:mm:ss"));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

運行程序

在文本框中鍵入一些文本

時間文本框可在不加載頁面的狀況下從 "TimeHandler.ashx" 得到服務器的時間！

Ajax 發送 POST 請求

            xmlHttp.open("POST", "/TimeHandler.ashx", true);
            //設置請求內容類型
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlHttp.send("key1=value1&key2=value2");