Ajax實(shí)現(xiàn)的異步傳輸與驗(yàn)證示例代碼
更新時(shí)間:2014年01月28日 15:08:25 作者:
Ajax異步傳輸應(yīng)用很廣當(dāng)用戶注冊時(shí),當(dāng)用戶剛一輸完,立即判斷用戶是否存在這就用到了異步傳輸
Ajax異步傳輸用得很廣,就拿web開發(fā)來說吧,當(dāng)用戶注冊時(shí),當(dāng)用戶剛一輸完,怎么立即判斷用戶是否存在,并在輸入框后顯示提示?這就用到了異步傳輸~~
它可以讓你不離開頁面的情況下,獲取后臺(tái)你想要的數(shù)據(jù),并顯示在當(dāng)前頁面?。『玫?,下面看個(gè)例子
下面是一段Ajax驗(yàn)證代碼
<script type="text/javascript">
//① 設(shè)置變量
var xmlHttp ;
var flag = false ;
var package_name;
//② 創(chuàng)建XMLHttp對象
function createXMLHttp(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest() ;
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
}
}
//③
function getPackage_name(package_name){
//創(chuàng)建XMLHttpRequest對象
createXMLHttp() ;
document.getElementById("msg").innerHTML=package_name;
//創(chuàng)建一個(gè)HTTP請求,以post方式將package_name交給AppInfoServlet
xmlHttp.open("post","AppInfoOneServlet?package_name="+package_name) ;
//調(diào)用回調(diào)函數(shù) 生成可視化的頁面響應(yīng)
xmlHttp.onreadystatechange =checkCallback;
// 發(fā)送請求
xmlHttp.send(null) ;
//友好提示
document.getElementById("msg").innerHTML = "正在獲取信息,請耐心等候..." ;
}
//④ 回調(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)記中顯示出來,例如:<span id="msg"></span>
}
}
}
</script>
在jsp頁面中是這樣調(diào)用js函數(shù)的
<a href="#bottom" onclick="getPackage_name('<%=ainfo.getPackage_name() %>')">獲取</a>
Ajax獲取的數(shù)據(jù)將在下列標(biāo)記中顯示出來
<span id="msg"></span>
好的,我們來看一下servlet中的代碼:
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è)是一模一樣的,其中一定要注意漢字傳輸中亂碼的問題~~~~~~
它可以讓你不離開頁面的情況下,獲取后臺(tái)你想要的數(shù)據(jù),并顯示在當(dāng)前頁面?。『玫?,下面看個(gè)例子
下面是一段Ajax驗(yàn)證代碼
復(fù)制代碼 代碼如下:
<script type="text/javascript">
//① 設(shè)置變量
var xmlHttp ;
var flag = false ;
var package_name;
//② 創(chuàng)建XMLHttp對象
function createXMLHttp(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest() ;
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
}
}
//③
function getPackage_name(package_name){
//創(chuàng)建XMLHttpRequest對象
createXMLHttp() ;
document.getElementById("msg").innerHTML=package_name;
//創(chuàng)建一個(gè)HTTP請求,以post方式將package_name交給AppInfoServlet
xmlHttp.open("post","AppInfoOneServlet?package_name="+package_name) ;
//調(diào)用回調(diào)函數(shù) 生成可視化的頁面響應(yīng)
xmlHttp.onreadystatechange =checkCallback;
// 發(fā)送請求
xmlHttp.send(null) ;
//友好提示
document.getElementById("msg").innerHTML = "正在獲取信息,請耐心等候..." ;
}
//④ 回調(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)記中顯示出來,例如:<span id="msg"></span>
}
}
}
</script>
在jsp頁面中是這樣調(diào)用js函數(shù)的
復(fù)制代碼 代碼如下:
<a href="#bottom" onclick="getPackage_name('<%=ainfo.getPackage_name() %>')">獲取</a>
Ajax獲取的數(shù)據(jù)將在下列標(biāo)記中顯示出來
復(fù)制代碼 代碼如下:
<span id="msg"></span>
好的,我們來看一下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è)是一模一樣的,其中一定要注意漢字傳輸中亂碼的問題~~~~~~
您可能感興趣的文章:
- yii2 modal彈窗之ActiveForm ajax表單異步驗(yàn)證
- Ajax實(shí)現(xiàn)異步用戶名驗(yàn)證功能
- Ajax異步方式實(shí)現(xiàn)登錄與驗(yàn)證
- Ajax實(shí)現(xiàn)異步刷新驗(yàn)證用戶名是否已存在的具體方法
- ajax jquery 異步表單驗(yàn)證示例代碼
- PHP+Ajax異步通訊實(shí)現(xiàn)用戶名郵箱驗(yàn)證是否已注冊( 2種方法實(shí)現(xiàn))
- jquery ajax 登錄驗(yàn)證實(shí)現(xiàn)代碼
- jquery+ajax驗(yàn)證不通過也提交表單問題處理
- Ajax 用戶名驗(yàn)證是否存在
- ajax同步驗(yàn)證單號是否存在的方法
相關(guān)文章
Ajax xmlHttpRequest的status的值的含義
雖然常寫ajax方面的東西,但是很少去專門了解xmlHttpRequest的status各個(gè)值的含義,今天在開發(fā)的過程中又遇到了問題,查過資料后,將他人已總結(jié)過的轉(zhuǎn)載一下,學(xué)習(xí)學(xué)習(xí)。2010-03-03在實(shí)戰(zhàn)中可能碰到的幾種ajax請求方法詳解
這篇文章主要給大家分享了在實(shí)戰(zhàn)中可能碰到的幾種ajax請求方法,文中通過示例代碼介紹的非常詳細(xì),對大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-03-03AJAX淺析數(shù)據(jù)交換的實(shí)現(xiàn)
在AJAX中,最常用的就是JSON,XML因?yàn)楸容^冗雜所以用的比較少。所以我們先來說基于JSON的數(shù)據(jù)交換。最后我們還會(huì)提到在數(shù)據(jù)交換中出現(xiàn)亂碼的形式2022-08-08Flash & Ajax 操作 XML 實(shí)例:無刷新分頁
Flash & Ajax 操作 XML 實(shí)例:無刷新分頁...2006-08-08深入淺析AjaxFileUpload實(shí)現(xiàn)單個(gè)文件的 Ajax 文件上傳庫
jQuery.AjaxFileUpload.js是一款jQuery插件,用于通過ajax上傳文件。本文給大家介紹AjaxFileUpload實(shí)現(xiàn)單個(gè)文件的 Ajax 文件上傳庫,對此感興趣的朋友一起學(xué)習(xí)吧2016-04-04利用ajax實(shí)現(xiàn)簡單的注冊驗(yàn)證局部刷新實(shí)例
ajax的工作原理想必大家都有所了解吧,不懂的可以看看本文。下面是注冊驗(yàn)證案例register。php是注冊頁面。registerProcess.php用于接收數(shù)據(jù)并返回?cái)?shù)據(jù)2013-10-10ajax與websocket的區(qū)別以及websocket常用使用方式 介紹
這篇文章主要介紹了ajax與websocket的區(qū)別以及websocket常用使用方式 介紹,需要的朋友可以參考下2018-06-06找到一款不錯(cuò)的基于AJAX留言板源碼(PHP版、ASP版)提供下載了
找到一款不錯(cuò)的基于AJAX留言板源碼(PHP版、ASP版)提供下載了...2007-09-09