快捷導(dǎo)航

AJAX和JSP混合使用方法實(shí)例

更新時(shí)間：2016年02月16日 11:45:58 作者：茶飲月

AJAX 是一種在無需重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。下面通過本文給大家介紹AJAX和JSP混合使用方法實(shí)例，感興趣的朋友一起學(xué)習(xí)吧

首先要知道AJAX 是一種在無需重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。

什么是 AJAX ？

AJAX = 異步 JavaScript 和 XML。

AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。

通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新。

傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容，必需重載整個(gè)網(wǎng)頁面。

AJAX工作原理

這里寫圖片描述

AJAX請(qǐng)求

ajax請(qǐng)求是依靠XMLHttpRequest對(duì)象,因此在請(qǐng)求前先要?jiǎng)?chuàng)建其對(duì)象

var xmlhttp;
//兼容性寫法創(chuàng)建請(qǐng)求實(shí)例,IE5 6支持else里面的方法
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

接著向服務(wù)器發(fā)送請(qǐng)求

open函數(shù)有三個(gè)參數(shù),請(qǐng)求方式,請(qǐng)求地址,請(qǐng)求是異步還是同步
send(String)函數(shù)有一個(gè)參數(shù),只有當(dāng)請(qǐng)求方式為post的時(shí)候,String參數(shù)才需要帶上

那么GET和POST的區(qū)別呢?

與 POST 相比，GET 更簡(jiǎn)單也更快，并且在大部分情況下都能用。

然而，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：

無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠

//設(shè)置傳送方式,地址,以及同步還是異步
xmlhttp.open("GET","Test.jsp?value="+escape(value),true);
xmlhttp.onreadystatechange = callback;//狀態(tài)改變的時(shí)候執(zhí)行這個(gè)函數(shù),用來判斷是否請(qǐng)求完畢
xmlhttp.send();//請(qǐng)求服務(wù)器,如果使用post方式,則send里面要帶上傳遞的參數(shù)
//post方式
/**
xmlhttp.open("POST","Test.jsp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("value="+value);
*/

然后服務(wù)器端處理并返回,這個(gè)放在實(shí)例里面有具體代碼

在回調(diào)函數(shù)callback中設(shè)置對(duì)返回響應(yīng)

onreadystatechange 存儲(chǔ)函數(shù)（或函數(shù)名），每當(dāng) readyState 屬性改變時(shí)，就會(huì)調(diào)用該函數(shù)。
readyState 存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。

0: 請(qǐng)求未初始化
1: 服務(wù)器連接已建立
2: 請(qǐng)求已接收
3: 請(qǐng)求處理中
4: 請(qǐng)求已完成，且響應(yīng)已就緒

status 200: “OK”

404: 未找到頁面

相應(yīng)服務(wù)器的類型

responseText 獲得字符串形式的響應(yīng)數(shù)據(jù)。

responseXML 獲得 XML 形式的響應(yīng)數(shù)據(jù)。這個(gè)一般當(dāng)open里面的url為xml文件的時(shí)候用

function callback(){
//請(qǐng)求完成表示
if(xmlhttp.readyState ==4 && xmlhttp.status==200){
//設(shè)置相應(yīng)操作
}
}
}

總體來說就這幾個(gè)步驟,下面是詳細(xì)代碼

實(shí)例

首先創(chuàng)建一個(gè)文本框,用于測(cè)試用戶名,并且添加監(jiān)聽事件onblur,意思是當(dāng)失去焦點(diǎn)則執(zhí)行,并在其后面創(chuàng)建個(gè)span空標(biāo)簽,用來動(dòng)態(tài)顯示信息,表示名稱是否被占用

<form method="post" action="AJAX.jsp">
<table>
<tr>
<td><input type="text" id="userid" onblur="checkuser()" ><span style="color: red" id="spanid"></span></td>
</tr>
</table>
</form>

接下來是JS代碼,使用AJAX把輸入的內(nèi)容發(fā)送到服務(wù)器,服務(wù)器來檢驗(yàn)

var xmlhttp;
function checkuser(){
var value = document.getElementById("userid").value;
//兼容性寫法創(chuàng)建請(qǐng)求實(shí)例,IE5 6支持else里面的方法
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//設(shè)置傳送方式,地址,以及同步還是異步
xmlhttp.open("GET","Test.jsp?value="+escape(value),true);
xmlhttp.onreadystatechange = callback;//狀態(tài)改變的時(shí)候執(zhí)行這個(gè)函數(shù),用來判斷是否請(qǐng)求完畢
xmlhttp.send();//請(qǐng)求服務(wù)器
}

然后服務(wù)器端獲得數(shù)據(jù)后寫回

<%
response.setHeader("Cache-Control","no-store");//HTTP1.1
response.setHeader("Pragma","no-cache");//HTTP1.0
response.setDateHeader("Expires",0);//禁止在服務(wù)器中緩存
String value = request.getParameter("value");//獲取傳送過來的參數(shù)
response.getWriter().write(value);//模擬數(shù)據(jù)寫回
%>

客戶端再回調(diào)函數(shù)中處理服務(wù)器寫回的數(shù)據(jù)

/**
* 回調(diào)函數(shù)
*/
function callback(){
//請(qǐng)求完成表示
if(xmlhttp.readyState ==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);//相應(yīng)返回的text
// alert(xmlhttp.responseXML);//相應(yīng)返回的xml
if (xmlhttp.responseText){//這里直接判斷不為空,應(yīng)該根據(jù)數(shù)據(jù)庫返回值來進(jìn)行不同的顯示
var spanid = document.getElementById("spanid");
spanid.innerHTML = "注冊(cè)成功";
}
}
}

效果就是當(dāng)輸入框失去焦點(diǎn)就立即判斷,當(dāng)然實(shí)際判斷是要連接數(shù)據(jù)庫的,為了簡(jiǎn)單就直接打印出來了

這里寫圖片描述