Java程式員從笨鳥到菜鳥之（八十四）深入淺出Ajax

          Ajax（Asynchronous JavaScript and XML），非同步JavaScript與XML 。所謂同步，就是在進行一個操作之前必須要等到上一個操作返回操作結果才能進行這個操作，而非同步則是在進行一個操作時可以不受上一個操作的影響，上一個操作是否返回操作都可以執行這個操作，各個操作可以同時進行，對使用者來說，不用等待了，不用等待上一個操作就可以執行新的操作了。給使用者的體驗增強了。非同步傳輸是面向字元的傳輸，它的單位是字元；而同步傳輸是面向位元的傳輸，它的單位是楨，它傳輸的時候要求接受方和發送方的時鐘是保持一致的。 其實ajax並不是什麼新技術，而是一些技術的組裝。Ajax給我們的網路帶來了很大的好處，假如我們只是簡單的提交一個表單，我們就沒必要重新整理整個頁面，只需要局部表單提交，重新整理局部就可以了，這將大大減少了網路流量。有優點的同時他也有缺點，缺點就是我們瀏覽器上的後退和前進按鈕就失效了。假如我們頁面有三個非同步ajax操作，瀏覽器並不把他當作三個請求操作，後退的時候也不會後退三次回到原始頁面

      Ajax的工作原理相當於在使用者和伺服器之間加了—個中介層,使使用者操作與伺服器響應非同步化。並不是所有的使用者請求都提交給伺服器,像—些資料驗證和資料處理等都交給Ajax引擎自己來做, 只有確定需要從伺服器讀取新資料時再由Ajax引擎代為向伺服器提交請求。 

Ajax中最重要的一個對象就是XMLHttpRequest，這個對象最早是由微軟在IE中以外掛程式的形式提供的，但微軟只是簡單的提出這麼一個對象，並沒有真正的去實用它，後來其他瀏覽器也給出了這個對象，但他們都是提供的內建對象，而不是簡單的外掛程式的形式了。所以在獲得這個對象的時候就避免不了要用if。。Else判斷了、判斷是否為IE瀏覽器，我們使用判斷一個對象是否存在來判斷，這個對象是IE所特有的，他就是active控制項的對象。通過window.ActiveXObject，在if語句中寫這麼語句，因為在javascript中，如果不是undefined或者false他就是為true，所以，只要這個active空間存在，if條件就為真。也就是說就是IE瀏覽器。IE獲得XMLHttpRequest對象是一個固定形式：xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");這是IE特有的獲得XMLHttpRequest對象的方式，其他瀏覽要想獲得XMLHttpRequest對象直接new就可以，也就是xmlHttpRequest =new XMLHttpRequest（）；雖然IE和其他瀏覽器獲得XMLHttpRequest對象的方式是不同的，但是XMLHttpRequest的使用方式是一樣的。

     好了，判斷完瀏覽器之後，我們就開始準備向伺服器發送請求了，準備發送請求我們用：xmlHttpRequest.open("POST", "AjaxServlet", true);這裡的三個參數我們有必要說一下，第一個參數是表示我們的請求是以什麼形式發送，第二個參數是我們請求的地址，這裡我們的地址是一個servlet，第三個參數指明是否為以非同步形式發送請求，一般我們都會設定為true。

      準備好發送以後，我們要給他接收做一下准，ajax接收資料是以一個回呼函數的形式接收資料的。也就是說我們註冊好這個回呼函數後，當達到某一要求時他會自動調用這個回呼函數，然後去執行回呼函數的內容，註冊回呼函數：xmlHttpRequest.onreadystatechange = ajaxCallback;注意這個回呼函數ajaxCallback不要帶括弧。這個回呼函數註冊點我們從字面上也可以看出,他是在準備狀態改變的時候調用這個函數。

       一切準備好之後我們就要進行真正的發送請求了，發送請求是調用的xmlHttpRequest對象的send方法，這個方法裡面當以post的形式發送請求，這裡的方法的參數，就是我們請求的地址的參數，這個地址的參數是以索引值對的形式傳參的，如果是以get的形式請求時，我們可以把send方法的參數設定為null。，假如我們是以get的請求方式，發送代碼即為了：xmlHttpRequest.send(null);，我們在來說說以post的請求方式請求時。xmlHttpRequest.send(null)，null可以傳參數（即send（“v1="+v1））；並且在真正發送之前（xmlHttpRequest.send(null)）之前必須設定

xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");這一點一定要注意。

       OK，請求發送出去了之後，我們下面來看一下我們怎麼來接受請求返回的資料。根據HTTP協議我們應該知道，我們的一個請求應該分為四個步驟，也就是說一個請求有四個狀態，他的狀態即為xmlHttpRequest對象的readstate屬性。我們來看一下這五個狀態的具體內容：

從上邊可以看出我們上邊註冊的回呼函數將會被執行四次，但是我們其實就只在請求完成時執行我們回呼函數的內容就OK，所以在回呼函數裡面我們可以進行一下判斷

if (xmlHttpRequest.readyState == 4) { //請求完成}。

雖然我們判斷了請求是否完成，但我們不知道這個請求是否成功，在我們http協議中，請求成功的狀態代碼是200，所以我們如下判斷一下狀態代碼是否為200就可以了。

if (xmlHttpRequest.status == 200) {}

OK，以上差不多我們就把ajax的執行過程講解了一遍，在看具體代碼之前，我們來看一下xmlHttpRequest這個對象的屬性：

下面我們就來看一下ajax整個執行流程的程式碼範例：我們以一個計算機的例子來實現：

首先我們來看一下表單代碼：

<input type="button" value="add"onclick=ajaxSubmit();;><br><input type="text" name="value1" id="value1ID"><br><input type="text" name="value2" id="value2ID"><br><div id="div1"></div>

然後我們來看一下執行的ajax的javascript代碼：

<script type="text/javascript">var xmlHttpRequest = null; //聲明一個Null 物件以接收XMLHttpRequest對象function ajaxSubmit() {if (window.ActiveXObject) // IE瀏覽器   {xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");    } else if (window.XMLHttpRequest) //除IE外的其他瀏覽器實現{xmlHttpRequest = new XMLHttpRequest();}if (null != xmlHttpRequest) {    var v1 = document.getElementById("value1ID").value;var v2 = document.getElementById("value2ID").value;    //當利用get方法訪問伺服器端時帶參數的話，直接在"AjaxServlet"後面加參數，                   下面send方法為參數null就可以，用post方法這必須在把參數加在send參數內，如下xmlHttpRequest.open("POST", "AjaxServlet", true);//關聯好ajax的回呼函數xmlHttpRequest.onreadystatechange = ajaxCallback;//真正向伺服器端發送資料// 使用post方式提交，必須要加上如下一行,get方法就不必加此句xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2);}}function ajaxCallback() { //ajax一次請求會改變四次狀態，所以我們在第四次(即一次請求結束)進行處理就OK,if (xmlHttpRequest.readyState == 4) { //請求成功if (xmlHttpRequest.status == 200) {var responseText = xmlHttpRequest.responseText;document.getElementById("div1").innerHTML=responseText;}}}</script>

最後我們來看一下伺服器端的執行：

Dopost方法內

String v1 = req.getParameter("v1");String v2 = req.getParameter("v2");System.out.println("v1=" + v1 + ", v2=" + v2);String v3 = String.valueOf(Integer.valueOf(v1) + Integer.valueOf(v2));PrintWriter out = resp.getWriter();resp.setHeader("pragma", "no-cache");resp.setHeader("cache-control", "no-cache");out.println(v3);out.flush();

下面我們來總結一下ajax的優勢：

1、減輕伺服器的負擔。因為Ajax的根本理念是“按需取資料”，所以最大可能在減少了冗餘請求和響影對伺服器造成的負擔；

2、無重新整理更新頁面，減少使用者實際和心理等待時間；

3、也可以把以前的一些伺服器負擔的工作轉嫁到用戶端，利於用戶端閑置的處理能力來處理，減輕伺服器和頻寬的負擔，節約空間和頻寬租用成本；

4、Ajax使WEB中的介面與應用分離（也可以說是資料與呈現分離）；