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 @Override 16 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 17 doGet(request,response); 18 } 19 20 @Override 21 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 }