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整個執行流程的代碼示例:我們以一個計算器的例子來實現:
首先我們來看一下表單代碼:
[html]?view plaincopy print?
然后我們來看一下執行的ajax的javascript代碼:
[javascript]?view plaincopy print?
最后我們來看一下服務器端的執行:
Dopost方法內
[java]?view plaincopy print?
下面我們來總結一下ajax的優勢:
1、減輕服務器的負擔。因為Ajax的根本理念是“按需取數據”,所以最大可能在減少了冗余請求和響影對服務器造成的負擔;
2、無刷新更新頁面,減少用戶實際和心理等待時間;
3、也可以把以前的一些服務器負擔的工作轉嫁到客戶端,利于客戶端閑置的處理能力來處理,減輕服務器和帶寬的負擔,節約空間和帶寬租用成本;
4、Ajax使WEB中的界面與應用分離(也可以說是數據與呈現分離);
from:?http://blog.csdn.net/csh624366188/article/details/7670500
總結
以上是生活随笔為你收集整理的Java程序员从笨鸟到菜鸟之(八十四)深入浅出Ajax的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Java程序员从笨鸟到菜鸟之(一百零六)
- 下一篇: Java程序员从笨鸟到菜鸟之(三十)ja