前言

Ajax是一個客戶端技術(shù) 是更加先進(jìn) 標(biāo)準(zhǔn)化和高效的Web開發(fā)技術(shù)

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、Ajax與傳統(tǒng)的Web應(yīng)用模式的對比

在傳統(tǒng)的Web應(yīng)用中 頁面中用于的每一次操作都將觸發(fā)一次返回Web服務(wù)器的HTTP請求 服務(wù)器將進(jìn)行相應(yīng)的處理然后返回一個HTML頁面給客戶端

而在Ajax應(yīng)用中 頁面中用戶的操作將通過Ajax引擎與服務(wù)器端進(jìn)行通信 然后將返回結(jié)果提交給客戶端頁面的Ajax引擎 再由Ajax引擎來決定將這些數(shù)據(jù)插入到頁面的指定位置

所以在Ajax開發(fā)模式中可以通過JavaScript實(shí)現(xiàn)在不刷新整個頁面的情況下 對部分?jǐn)?shù)據(jù)進(jìn)行更新 從而降低了網(wǎng)絡(luò)流浪 給用戶帶來更好的體驗(yàn)

二、Ajax使用的技術(shù)

Ajax是XMLHttpRequest對象和JavaScript XML CSS DOM等多種技術(shù)的組合 其中只有XMLHttpRequest對象是新技術(shù) 其他的均為已有技術(shù)

1：XMLHttpRequest對象

是核心技術(shù) 它是一個具有應(yīng)用程序接口的JavaScript對象 能夠使用超文本傳輸協(xié)議連接一個服務(wù)器 是微軟公司為了滿足開發(fā)者的需要推出的

2：XML

它是可擴(kuò)展的標(biāo)記語言的縮寫，它提供了用于描述結(jié)構(gòu)化數(shù)據(jù)的格式 適用于不同應(yīng)用程序間的數(shù)據(jù)交換 而且這種交換不以預(yù)先定義的一組數(shù)據(jù)結(jié)構(gòu)為前提 增強(qiáng)了可擴(kuò)展性 XMLHttpRequest對象與服務(wù)器交換的數(shù)據(jù)通常采用XML格式

在XML文檔中 元素以樹形分層結(jié)構(gòu)排列 其實(shí)<resume>為根元素 其他的都是該元素的子元素

3：JavaScript

它是一種在Web頁面中添加動態(tài)腳本代碼的解釋性程序語言 具體介紹可以參考

JavaScript

4：CSS 樣式表

5：DOM 文檔對象模型

三、XMLHttpRequest對象的具體使用

1、初始化XMLHttpRequest對象

IE瀏覽器初始化如下

var http_request=new ActiveXObject("Msxml2.XMLHTTP");

或者

var http_request=new ActiveObject("Microsoft.XMLHTTP");

非IE瀏覽器

var http_request=new XMLHttpRequest();

兩種情況的實(shí)例化代碼如下

if(window.XMLHttpRequest){
http_request=new XMLHttpRequest();
}
else if(window.ActiveObject){
try{
http_request=new ActiveXObject("Msxml2.XMLHTTP");
}
cathc(e){
try{
http_request=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
}
}

2、XMLHttpRequest對象常用方法

open()方法 用于設(shè)置進(jìn)行異步請求目標(biāo)的URL 請求方法以及其他參數(shù)信息

open("method","URL"[,asyncFlag[,"userName"[,"password"]]])

send()方法 用于向服務(wù)器發(fā)送請求 如果請求聲明為異步 該方法將立即返回 否則要等到接受到響應(yīng)為止

send(content)

setRquestHeader()方法用于為請求的HTTP頭設(shè)置值

setRequestHeader("header","value")

3、XMLHttpRequest常用屬性

onreadystatechange屬性用于指定狀態(tài)改變時所觸發(fā)的事件處理器 在Ajax中 每個狀態(tài)改變都會觸發(fā)一個事件處理器 通常會調(diào)用一個JavaScript函數(shù)

http_request.onreadystatechange=getResult;

readystate屬性用于獲取請求的狀態(tài) 包括五個屬性值 0代表未初始化 1代表正在加載 2代表已加載 3代表交互中 4代表完成

status屬性用于返回服務(wù)器的HTTP狀態(tài)碼 200表示請求成功 202表示請求被接受 400表示錯誤的請求 404表示文件未找到 500表示內(nèi)部服務(wù)器錯誤

四、與服務(wù)器通信-發(fā)送請求與處理響應(yīng)

發(fā)送get和post請求都要經(jīng)過以下四個步驟

1：初始化XMLHttpRequest對象 為了提高程序的兼容性 需要創(chuàng)建一個跨瀏覽器的XMLHtppRequest對象 并且判斷是否成功

if(window.XMLHttpRequest){
http_request=new XMLHttpRequest();
}
else if(window.ActiveObject){
try{
http_request=new ActiveXObject("Msxml2.XMLHTTP");
}
cathc(e){
try{
http_request=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
}
}

2：為XMLHttpRequest對象指定一個返回結(jié)果處理函數(shù) 用于對返回結(jié)果進(jìn)行處理

3：創(chuàng)建一個與服務(wù)器的連接 在創(chuàng)建時 需要指定發(fā)送請求的方式以及設(shè)置是否采用異步方法發(fā)送請求

4：向服務(wù)器發(fā)送請求 XMLHttpRequest對象的send方法可以向服務(wù)器發(fā)送請求 該方法需要傳遞一個參數(shù) 如果發(fā)送的時GET請求 則參數(shù)可以設(shè)置為NULL POST請求則要指定參數(shù)

處理服務(wù)器響應(yīng)

XMLHttpRequest對象提供了兩個用來訪問服務(wù)器響應(yīng)的屬性 一個時responseText屬性 返回字符串響應(yīng) 另一個時responseXML屬性 返回XML響應(yīng)

1：處理字符串響應(yīng)

通常應(yīng)用在響應(yīng)不是特別復(fù)雜的情況下

2：處理XML響應(yīng)

如果在服務(wù)器端需要生成特別復(fù)雜的響應(yīng) 那么就需要應(yīng)用XML響應(yīng) 應(yīng)用XMLHttpRequest對象的responseXML屬性 可以生成一個XML文檔

解決中文亂碼問題

1：當(dāng)接收使用GET方法提交的數(shù)據(jù)時 要將編碼轉(zhuǎn)換為GBK或者UTF-8

String seIProvince=request.getParameter("parProvince");
seIProvince=new String(seIProvince.getBytes("ISO-8859-1"),("UTF-8");

2:應(yīng)用POST方法提交數(shù)據(jù)時

String username=request.getParameter("user");
username=new String(username.getBytes("ISO-8859-1"),("UTF-8");

五、Ajax重構(gòu)

Ajax的實(shí)現(xiàn)主要依賴于XMLHttpRequest對象 如果在調(diào)用其進(jìn)行異步數(shù)據(jù)傳輸時 由于XMLHttpRequest對象的實(shí)例在處理事件完成后就會被銷毀 所以如果不對該對象進(jìn)行封裝處理，在下次需要調(diào)用它的時猴就要重新構(gòu)建，浪費(fèi)資源并且浪費(fèi)事件，不過JavaScript腳本語言支持OO編碼風(fēng)格，通過它將Ajax所必需的功能封裝在對象中 分為以下三步

1:創(chuàng)建一個單獨(dú)的JS文件 命名為AjaxRequest.js 并且在該文件中編寫重構(gòu)Ajax所需要的代碼

2:在需要應(yīng)用Ajax的頁面應(yīng)用以下語句

<script language="javascript" src="AjaxRequest.js"></script>

3:在應(yīng)用Ajax的頁面中編寫錯誤處理的方法 實(shí)例化Ajax對象的方法和回調(diào)函數(shù)

<script language="javascript">
 function onerror(){
alert("您的操作有錯誤");
}
function getInfo(){
var loader=new net.AjaxRequest("getInfo.jsp?nocache="+new Date().getTime(),deal_getInfo,onerror,"GET");
}
function deal_getInfo(){
document.getElementById("showInfo").innerHTML=this.req.responseText;
}
</script>

有兩個實(shí)例分別是級聯(lián)下拉列表的創(chuàng)建和顯示進(jìn)度條 代碼過多此處不展示

到此這篇關(guān)于Java Web中Ajax技術(shù)使用方法介紹的文章就介紹到這了,更多相關(guān)JavaWeb Ajax內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論