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 }
时间： 2024-10-18 05:05:08