Java程序员从笨鸟到菜鸟之（八十四）深入浅出Ajax
?Ajax（Asynchronous?JavaScript?and?XML），異步的JavaScript與XML?。所謂同步，就是在進(jìn)行一個(gè)操作之前必須要等到上一個(gè)操作返回操作結(jié)果才能進(jìn)行這個(gè)操作，而異步則是在進(jìn)行一個(gè)操作時(shí)可以不受上一個(gè)操作的影響，上一個(gè)操作是否返回操作都可以執(zhí)行這個(gè)操作，各個(gè)操作可以同時(shí)進(jìn)行，對(duì)用戶來(lái)說(shuō)，不用等待了，不用等待上一個(gè)操作就可以執(zhí)行新的操作了。給用戶的體驗(yàn)增強(qiáng)了。異步傳輸是面向字符的傳輸，它的單位是字符；而同步傳輸是面向比特的傳輸，它的單位是楨，它傳輸?shù)臅r(shí)候要求接受方和發(fā)送方的時(shí)鐘是保持一致的。?其實(shí)ajax并不是什么新技術(shù)，而是一些技術(shù)的組裝。Ajax給我們的網(wǎng)絡(luò)帶來(lái)了很大的好處，假如我們只是簡(jiǎn)單的提交一個(gè)表單，我們就沒(méi)必要刷新整個(gè)頁(yè)面，只需要局部表單提交，刷新局部就可以了，這將大大減少了網(wǎng)絡(luò)流量。有優(yōu)點(diǎn)的同時(shí)他也有缺點(diǎn)，缺點(diǎn)就是我們?yōu)g覽器上的后退和前進(jìn)按鈕就失效了。假如我們頁(yè)面有三個(gè)異步ajax操作，瀏覽器并不把他當(dāng)作三個(gè)請(qǐng)求操作，后退的時(shí)候也不會(huì)后退三次回到原始頁(yè)面
??????Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了—個(gè)中間層,使用戶操作與服務(wù)器響應(yīng)異步化。并不是所有的用戶請(qǐng)求都提交給服務(wù)器,像—些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給Ajax引擎自己來(lái)做,?只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由Ajax引擎代為向服務(wù)器提交請(qǐng)求。?
Ajax中最重要的一個(gè)對(duì)象就是XMLHttpRequest，這個(gè)對(duì)象最早是由微軟在IE中以插件的形式提供的，但微軟只是簡(jiǎn)單的提出這么一個(gè)對(duì)象，并沒(méi)有真正的去實(shí)用它，后來(lái)其他瀏覽器也給出了這個(gè)對(duì)象，但他們都是提供的內(nèi)置對(duì)象，而不是簡(jiǎn)單的插件的形式了。所以在獲得這個(gè)對(duì)象的時(shí)候就避免不了要用if。。Else判斷了、判斷是否為IE瀏覽器，我們使用判斷一個(gè)對(duì)象是否存在來(lái)判斷，這個(gè)對(duì)象是IE所特有的，他就是active控件的對(duì)象。通過(guò)window.ActiveXObject，在if語(yǔ)句中寫這么語(yǔ)句，因?yàn)樵?/span>javascript中，如果不是undefined或者false他就是為true，所以，只要這個(gè)active空間存在，if條件就為真。也就是說(shuō)就是IE瀏覽器。IE獲得XMLHttpRequest對(duì)象是一個(gè)固定形式：xmlHttpRequest?=?new?ActiveXObject("Microsoft.XMLHTTP");這是IE特有的獲得XMLHttpRequest對(duì)象的方式，其他瀏覽要想獲得XMLHttpRequest對(duì)象直接new就可以，也就是xmlHttpRequest?=new?XMLHttpRequest（）；雖然IE和其他瀏覽器獲得XMLHttpRequest對(duì)象的方式是不同的，但是XMLHttpRequest的使用方式是一樣的。
?????好了，判斷完瀏覽器之后，我們就開始準(zhǔn)備向服務(wù)器發(fā)送請(qǐng)求了，準(zhǔn)備發(fā)送請(qǐng)求我們用：xmlHttpRequest.open("POST",?"AjaxServlet",?true);這里的三個(gè)參數(shù)我們有必要說(shuō)一下，第一個(gè)參數(shù)是表示我們的請(qǐng)求是以什么形式發(fā)送，第二個(gè)參數(shù)是我們請(qǐng)求的地址，這里我們的地址是一個(gè)servlet，第三個(gè)參數(shù)指明是否為以異步的形式發(fā)送請(qǐng)求，一般我們都會(huì)設(shè)置為true。
??????準(zhǔn)備好發(fā)送以后，我們要給他接收做一下準(zhǔn)，ajax接收數(shù)據(jù)是以一個(gè)回調(diào)函數(shù)的形式接收數(shù)據(jù)的。也就是說(shuō)我們注冊(cè)好這個(gè)回調(diào)函數(shù)后，當(dāng)達(dá)到某一要求時(shí)他會(huì)自動(dòng)調(diào)用這個(gè)回調(diào)函數(shù)，然后去執(zhí)行回調(diào)函數(shù)的內(nèi)容，注冊(cè)回調(diào)函數(shù)：xmlHttpRequest.onreadystatechange?=?ajaxCallback;注意這個(gè)回調(diào)函數(shù)ajaxCallback不要帶括號(hào)。這個(gè)回調(diào)函數(shù)注冊(cè)點(diǎn)我們從字面上也可以看出,他是在準(zhǔn)備狀態(tài)改變的時(shí)候調(diào)用這個(gè)函數(shù)。
???????一切準(zhǔn)備好之后我們就要進(jìn)行真正的發(fā)送請(qǐng)求了，發(fā)送請(qǐng)求是調(diào)用的xmlHttpRequest對(duì)象的send方法，這個(gè)方法里面當(dāng)以post的形式發(fā)送請(qǐng)求，這里的方法的參數(shù)，就是我們請(qǐng)求的地址的參數(shù)，這個(gè)地址的參數(shù)是以鍵值對(duì)的形式傳參的，如果是以get的形式請(qǐng)求時(shí)，我們可以把send方法的參數(shù)設(shè)置為null。，假如我們是以get的請(qǐng)求方式，發(fā)送代碼即為了：xmlHttpRequest.send(null);，我們?cè)趤?lái)說(shuō)說(shuō)以post的請(qǐng)求方式請(qǐng)求時(shí)。xmlHttpRequest.send(null)，null可以傳參數(shù)（即send（“v1="+v1））；并且在真正發(fā)送之前（xmlHttpRequest.send(null)）之前必須設(shè)置
xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");這一點(diǎn)一定要注意。
???????OK，請(qǐng)求發(fā)送出去了之后，我們下面來(lái)看一下我們?cè)趺磥?lái)接受請(qǐng)求返回的數(shù)據(jù)。根據(jù)HTTP協(xié)議我們應(yīng)該知道，我們的一個(gè)請(qǐng)求應(yīng)該分為四個(gè)步驟，也就是說(shuō)一個(gè)請(qǐng)求有四個(gè)狀態(tài)，他的狀態(tài)即為xmlHttpRequest對(duì)象的readstate屬性。我們來(lái)看一下這五個(gè)狀態(tài)的具體內(nèi)容：
從上邊可以看出我們上邊注冊(cè)的回調(diào)函數(shù)將會(huì)被執(zhí)行四次，但是我們其實(shí)就只在請(qǐng)求完成時(shí)執(zhí)行我們回調(diào)函數(shù)的內(nèi)容就OK，所以在回調(diào)函數(shù)里面我們可以進(jìn)行一下判斷
if?(xmlHttpRequest.readyState?==?4)?{?//請(qǐng)求完成}。
雖然我們判斷了請(qǐng)求是否完成，但我們不知道這個(gè)請(qǐng)求是否成功，在我們http協(xié)議中，請(qǐng)求成功的狀態(tài)碼是200，所以我們?nèi)缦屡袛嘁幌聽顟B(tài)碼是否為200就可以了。
if?(xmlHttpRequest.status?==?200)?{}
OK，以上差不多我們就把ajax的執(zhí)行過(guò)程講解了一遍，在看具體代碼之前，我們來(lái)看一下xmlHttpRequest這個(gè)對(duì)象的屬性：
下面我們就來(lái)看一下ajax整個(gè)執(zhí)行流程的代碼示例：我們以一個(gè)計(jì)算器的例子來(lái)實(shí)現(xiàn)：
首先我們來(lái)看一下表單代碼：
[html]?view plaincopy print?
然后我們來(lái)看一下執(zhí)行的ajax的javascript代碼：
[javascript]?view plaincopy print?
最后我們來(lái)看一下服務(wù)器端的執(zhí)行：
Dopost方法內(nèi)
[java]?view plaincopy print?
下面我們來(lái)總結(jié)一下ajax的優(yōu)勢(shì)：
1、減輕服務(wù)器的負(fù)擔(dān)。因?yàn)?/span>Ajax的根本理念是“按需取數(shù)據(jù)”，所以最大可能在減少了冗余請(qǐng)求和響影對(duì)服務(wù)器造成的負(fù)擔(dān)；
2、無(wú)刷新更新頁(yè)面，減少用戶實(shí)際和心理等待時(shí)間；
3、也可以把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利于客戶端閑置的處理能力來(lái)處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和帶寬租用成本；
4、Ajax使WEB中的界面與應(yīng)用分離（也可以說(shuō)是數(shù)據(jù)與呈現(xiàn)分離）；
from:?http://blog.csdn.net/csh624366188/article/details/7670500
總結(jié)
以上是生活随笔為你收集整理的Java程序员从笨鸟到菜鸟之（八十四）深入浅出Ajax的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Java程序员从笨鸟到菜鸟之（一百零六）
- 下一篇： Java程序员从笨鸟到菜鸟之（二十八）J