標籤：
1 var xmlHttp = null; 2 /*使用XMLHttpRequest對象進行ajax互動*/ 3 function verifyNew(id){ 4 /*擷取待打算資料*/ 5 var username = document.getElementById(id).value; 6 7 /*建立XMLHttpRequest對象*/ 8 9 if(window.XMLHttpRequest){10 /*針對FireFox Mozillar Opera Safair IE7+*/11 xmlHttp = new XMLHttpRequest();12 /*針對某些版本的Mozillar瀏覽器的bug修正*/13 if(xmlHttp.overrideMimeType){14 xmlHttp.overrideMimeType("text/xml");15 }16 }else if(window.ActiveXObject){17 /*針對IE6 IE5.5 IE5*/18 var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];19 for(var i = 0;i < activexName.length;i++){20 try{21 /*取出一個空間名進行建立，如果建立成功，就終止迴圈*/22 xmlHttp = new ActiveXObject(activexName[i]);23 break;24 }catch (e){25 26 }27 }28 }29 if(!xmlHttp){30 alert("XMLHttpRequest對象建立失敗");31 }else{32 /*註冊回呼函數*/33 xmlHttp.onreadystatechange = callback;34 35 /*設定串連 true表示非同步互動*/36 xmlHttp.open("GET","/Lesson5_AJAX_Demo1/AjaxServletDo.do?name="+username,true);
/*如果採用POST的方式，需要自己佈建要求頭*/
/*
xmlHttp.open("POST","/Lesson5_AJAX_Demo1/AjaxServletDo.do"+username,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("name="+username);
*/
37
38 /*發送資料*/ 39 xmlHttp.send(null);/*因為發送的資料已經在url中，所以這裡的發送資料參數設定為null*/ 40 } 41 42 43 44 } 45 46 function callback(){ 47 if(xmlHttp.readyState == 4){/*互動完成*/ 48 if(xmlHttp.status == 200){/*http互動是否成功*/ 49 /*擷取服務端返回資料*/ 50 var responseText = xmlHttp.responseText; 51 document.getElementById("result").innerHTML = responseText; 52 } 53 } 54 }
頁面
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>itcast.cn 使用者名稱校正ajax執行個體</title> 6 <script type="text/javascript" src="/Lesson5_AJAX_Demo1/jslib/jquery-2.1.4.min.js"></script> 7 <script type="text/javascript" src="/Lesson5_AJAX_Demo1/jslib/ajax.js"></script> 8 </head> 9 <body>10 itcast.cn 使用者名稱校正的ajax執行個體，請輸入使用者名稱：<br/>11 <!-- ajax方式下，不需要使用表單提交資料 -->12 <input type="text" id="userName" value=""/>13 <input type="button" value="校正" onclick="verifyNew(‘userName‘)"/><br/>14 <!-- div空間用於顯示ajax處理結果 -->15 <div id="result"></div>16 </body>17 </html>
服務端
1 package org.zln.ajax.servlet; 2 3 import javax.servlet.ServletException; 4 import javax.servlet.annotation.WebServlet; 5 import javax.servlet.http.HttpServlet; 6 import javax.servlet.http.HttpServletRequest; 7 import javax.servlet.http.HttpServletResponse; 8 import java.io.IOException; 9 import java.io.PrintWriter;10 11 /**12 * Created by coolkid on 2015/6/7 0007.13 */14 public class AjaxServer extends HttpServlet {15 @Override16 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {17 doGet(request,response);18 }19 20 @Override21 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {22 try{23 response.setContentType("text/html;charset=UTF-8");24 request.setCharacterEncoding("UTF-8");25 PrintWriter out = response.getWriter();26 //取參數資訊27 String name = request.getParameter("name");28 //輸入校正29 if(name == null || name.length() == 0){30 out.println("使用者名稱不可為空");31 } else{32 //邏輯校正與業務處理33 if(name.equals("wangxingkui")){34 out.println("使用者名稱[" + name + "]已經存在，請使用其他使用者名稱");35 } else{36 out.println("使用者名稱[" + name + "]尚未存在，可以使用該使用者名稱註冊");37 }38 }39 /*這些發往HTML的資料會被ajax的回呼函數處理*/40 out.println("<br/><a href=\"ajax.html\">返回校正頁面</a>");41 } catch(Exception e){42 e.printStackTrace();43 }44 //返回更新資料（而不是跳轉到新的視圖）45 }46 }
使用JavaScript實現ajax
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
