前言

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

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

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

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

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

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

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

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

1：XMLHttpRequest對(duì)象

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

2：XML

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

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

3：JavaScript

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

JavaScript

4：CSS 樣式表

5：DOM 文檔對(duì)象模型

三、XMLHttpRequest對(duì)象的具體使用

1、初始化XMLHttpRequest對(duì)象

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對(duì)象常用方法

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

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

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

send(content)

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

setRequestHeader("header","value")

3、XMLHttpRequest常用屬性

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

http_request.onreadystatechange=getResult;

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

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

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

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

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

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對(duì)象指定一個(gè)返回結(jié)果處理函數(shù) 用于對(duì)返回結(jié)果進(jìn)行處理

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

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

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

XMLHttpRequest對(duì)象提供了兩個(gè)用來(lái)訪(fǎng)問(wèn)服務(wù)器響應(yīng)的屬性 一個(gè)時(shí)responseText屬性 返回字符串響應(yīng) 另一個(gè)時(shí)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對(duì)象的responseXML屬性 可以生成一個(gè)XML文檔

解決中文亂碼問(wèn)題

1：當(dāng)接收使用GET方法提交的數(shù)據(jù)時(shí) 要將編碼轉(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ù)時(shí)

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

五、Ajax重構(gòu)

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

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

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

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

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

<script language="javascript">
 function onerror(){
alert("您的操作有錯(cuò)誤");
}
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>

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

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

最新評(píng)論