Ajax異步傳輸用得很廣,就拿web開發來說吧,當用戶注冊時,當用戶剛一輸完,怎么立即判斷用戶是否存在,并在輸入框后顯示提示?這就用到了異步傳輸~~
它可以讓你不離開頁面的情況下,獲取后臺你想要的數據,并顯示在當前頁面!!好的,下面看個例子
下面是一段Ajax驗證代碼
復制代碼 代碼如下:
script type="text/javascript">
//① 設置變量
var xmlHttp ;
var flag = false ;
var package_name;
//② 創建XMLHttp對象
function createXMLHttp(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest() ;
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
}
}
//③
function getPackage_name(package_name){
//創建XMLHttpRequest對象
createXMLHttp() ;
document.getElementById("msg").innerHTML=package_name;
//創建一個HTTP請求,以post方式將package_name交給AppInfoServlet
xmlHttp.open("post","AppInfoOneServlet?package_name="+package_name) ;
//調用回調函數 生成可視化的頁面響應
xmlHttp.onreadystatechange =checkCallback;
// 發送請求
xmlHttp.send(null) ;
//友好提示
document.getElementById("msg").innerHTML = "正在獲取信息,請耐心等候..." ;
}
//④ 回調函數
function checkCallback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var text = xmlHttp.responseText ;
var t=text.split('|');//當獲取的是多個值,并用"|"作為分割時
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應用截圖展示/h3>"+"/div>"+"/div>"+"center>a href='"+t[3]+"' target='_blank'>img src='./images/downloadsoruce.png'>/a>/center>" ;
//獲取的數據在id為“msg” 的標記中顯示出來,例如:span id="msg">/span>
}
}
}
/script>
在jsp頁面中是這樣調用js函數的
復制代碼 代碼如下:
a href="#bottom" onclick="getPackage_name('%=ainfo.getPackage_name() %>')">獲取/a>
Ajax獲取的數據將在下列標記中顯示出來
復制代碼 代碼如下:
span id="msg">/span>
好的,我們來看一下servlet中的代碼:
復制代碼 代碼如下:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");//必須在out前,否則傳輸的漢子為亂碼啊
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());
}
以上已經很清楚啦,當然驗證用戶是否存在,道理和這個是一模一樣的,其中一定要注意漢字傳輸中亂碼的問題~~~~~~
您可能感興趣的文章:- yii2 modal彈窗之ActiveForm ajax表單異步驗證
- Ajax實現異步用戶名驗證功能
- Ajax異步方式實現登錄與驗證
- Ajax實現異步刷新驗證用戶名是否已存在的具體方法
- ajax jquery 異步表單驗證示例代碼
- PHP+Ajax異步通訊實現用戶名郵箱驗證是否已注冊( 2種方法實現)
- jquery ajax 登錄驗證實現代碼
- jquery+ajax驗證不通過也提交表單問題處理
- Ajax 用戶名驗證是否存在
- ajax同步驗證單號是否存在的方法