快捷導(dǎo)航

Ajax實(shí)現(xiàn)的異步傳輸與驗(yàn)證示例代碼

更新時(shí)間：2014年01月28日 15:08:25 作者：

Ajax異步傳輸應(yīng)用很廣當(dāng)用戶注冊(cè)時(shí)，當(dāng)用戶剛一輸完，立即判斷用戶是否存在這就用到了異步傳輸

Ajax異步傳輸用得很廣，就拿web開(kāi)發(fā)來(lái)說(shuō)吧，當(dāng)用戶注冊(cè)時(shí)，當(dāng)用戶剛一輸完，怎么立即判斷用戶是否存在，并在輸入框后顯示提示？這就用到了異步傳輸~~

它可以讓你不離開(kāi)頁(yè)面的情況下，獲取后臺(tái)你想要的數(shù)據(jù)，并顯示在當(dāng)前頁(yè)面??！好的，下面看個(gè)例子

下面是一段Ajax驗(yàn)證代碼

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 

//① 設(shè)置變量 
var xmlHttp ; 
var flag = false ; 
var package_name; 

//② 創(chuàng)建XMLHttp對(duì)象 
function createXMLHttp(){ 
if(window.XMLHttpRequest){ 
xmlHttp = new XMLHttpRequest() ; 


} else { 
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ; 

} 

} 

//③ 
function getPackage_name(package_name){ 

//創(chuàng)建XMLHttpRequest對(duì)象 
createXMLHttp() ; 

document.getElementById("msg").innerHTML=package_name; 
//創(chuàng)建一個(gè)HTTP請(qǐng)求，以post方式將package_name交給AppInfoServlet 
xmlHttp.open("post","AppInfoOneServlet?package_name="+package_name) ; 


//調(diào)用回調(diào)函數(shù) 生成可視化的頁(yè)面響應(yīng) 

xmlHttp.onreadystatechange =checkCallback; 

// 發(fā)送請(qǐng)求 
xmlHttp.send(null) ; 

//友好提示 
document.getElementById("msg").innerHTML = "正在獲取信息，請(qǐng)耐心等候..." ; 

} 

//④ 回調(diào)函數(shù) 
function checkCallback(){ 

if(xmlHttp.readyState == 4){ 
if(xmlHttp.status == 200){ 

var text = xmlHttp.responseText ; 
var t=text.split('|');//當(dāng)獲取的是多個(gè)值，并用"|"作為分割時(shí) 
document.getElementById("msg").innerHTML =t[0]+ "<br>"+"<div id='container'>"+"<div id='content'>"+"<div id='slider'>"+"<ul>"+"<li>"+"<img src='"+t[1]+"' alt='Css Template Preview' />"+"</li>"+"<li>"+"<img src='"+t[2]+"' alt='Css Template Preview' />"+"</li>"+"</ul>"+"</div>"+"<h3>Android應(yīng)用截圖展示</h3>"+"</div>"+"</div>"+"<center><a href='"+t[3]+"' target='_blank'><img src='./images/downloadsoruce.png'></a></center>" ; 
//獲取的數(shù)據(jù)在id為“msg” 的標(biāo)記中顯示出來(lái)，例如：<span id="msg"></span> 
} 
} 
} 
</script> 

在jsp頁(yè)面中是這樣調(diào)用js函數(shù)的

復(fù)制代碼代碼如下:

 
<a href="#bottom" onclick="getPackage_name('<%=ainfo.getPackage_name() %>')">獲取</a> 

Ajax獲取的數(shù)據(jù)將在下列標(biāo)記中顯示出來(lái)

復(fù)制代碼代碼如下:

好的，我們來(lái)看一下servlet中的代碼：

復(fù)制代碼代碼如下:

 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 

request.setCharacterEncoding("utf-8"); 
response.setCharacterEncoding("utf-8");//必須在out前，否則傳輸?shù)臐h子為亂碼啊 
PrintWriter out = response.getWriter(); 


String package_name=request.getParameter("package_name"); 

AppDaoImpl adi=new AppDaoImpl(); 
AppInfo ainfo=new AppInfo(); 
ainfo=adi.getOneAppInfo(package_name); 


out.print(ainfo.getDescription()+"|"+ainfo.getScreen_1_path()+"|"+ainfo.getScreen_2_path()+"|"+ainfo.getDownload_path()); 
} 

以上已經(jīng)很清楚啦，當(dāng)然驗(yàn)證用戶是否存在，道理和這個(gè)是一模一樣的，其中一定要注意漢字傳輸中亂碼的問(wèn)題~~~~~~

您可能感興趣的文章: