来自 韩顺平 ajax_php
1、index.jsp :
1 <%@ page language="java" import="java.util.*" pageEncoding="Utf-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 12 <title>My JSP 'index.jsp' starting page</title> 13 <meta http-equiv="pragma" content="no-cache"> 14 <meta http-equiv="cache-control" content="no-cache"> 15 <meta http-equiv="expires" content="0"> 16 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 17 <meta http-equiv="description" content="This is my page"> 18 <!-- 19 <link rel="stylesheet" type="text/css" href="styles.css"> 20 --> 21 </head> 22 23 <script type="text/javascript"> 24 25 // 创建 ajax 引擎 26 function GetXmlHttpObject() 27 { 28 var xmlHttpRequest = null; 29 // 不同的 浏览器 获取 对象 的方法是不一样的 30 if (window.ActiveXObject) 31 { 32 xmlHttpRequest = new ActiveXObject('Microsoft.XMLHTTP'); 33 } 34 else 35 { 36 xmlHttpRequest = new XMLHttpRequest(); 37 } 38 return xmlHttpRequest; 39 } 40 41 var g_myXmlHttpRequest = null; 42 43 // 验证用户名是否存在 44 function CheckUsername_get() 45 { 46 g_myXmlHttpRequest = GetXmlHttpObject(); 47 if (g_myXmlHttpRequest) 48 { 49 alert('创建 Ajax 对象成功'); 50 51 // 第一个参数 表示请求的方式 'get'/'post' 52 // 第二个参数 指定URL 53 // 第三个参数 true --> 使用异步机制 54 var strUrl = '/zcAjax/lession5?mytime='+new Date()+'&username='+$('UsernameID').value; 55 alert(strUrl); 56 // 这里只是打开请求，还没发请求 57 g_myXmlHttpRequest.open('get', strUrl, true); 58 59 // 回调函数 60 // 注意这里是不带括号的: 61 // 带括号 ：函数调用 62 // 不带括号 ：函数地址 63 g_myXmlHttpRequest.onreadystatechange = ZcCallBack; 64 65 // 真正的发送请求 66 // 如果是 get请求，则传入参数是null； 67 // 如果是 post请求，则传入的是 请求的参数信息 68 g_myXmlHttpRequest.send(null); 69 } 70 else 71 { 72 alert('创建 Ajax 对象失败'); 73 } 74 } 75 76 function CheckUsername_post() 77 { 78 g_myXmlHttpRequest = GetXmlHttpObject(); 79 if (g_myXmlHttpRequest) 80 { 81 //alert('创建 Ajax 对象成功'); 82 83 // 第一个参数 表示请求的方式 'get'/'post' 84 // 第二个参数 指定URL 85 // 第三个参数 true --> 使用异步机制 86 var strUrl = '/ajax_test/TajaxReturn'; 87 // 要发送的数据 88 var strData = 'username='+$('UsernameID').value; 89 //alert(strUrl); 90 //alert(strData); 91 // 这里只是打开请求，还没发请求 92 //g_myXmlHttpRequest.open('post', strUrl, true); // ZC: 异步 93 g_myXmlHttpRequest.open('post', strUrl, false); // ZC: 同步 94 95 // 还有一句话，这句话必须要. 96 g_myXmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 97 98 // 回调函数 99 // 注意这里是不带括号的: 100 // 带括号 ：函数调用 101 // 不带括号 ：函数地址 102 g_myXmlHttpRequest.onreadystatechange = ZcCallBack_post; 103 104 // 真正的发送请求 105 // 如果是 get请求，则传入参数是null； 106 // 如果是 post请求，则传入的是 请求的参数信息 107 console.log("before g_myXmlHttpRequest.send"); 108 g_myXmlHttpRequest.send(strData); 109 console.log("after g_myXmlHttpRequest.send"); 110 } 111 else 112 { 113 alert('创建 Ajax 对象失败'); 114 } 115 } 116 117 // 写一个函数 118 function $(id) 119 { 120 return document.getElementById(id); 121 } 122 123 function ZcCallBack() // for GET 124 { 125 //alert('回调函数被调用 '+g_myXmlHttpRequest.readyState); 126 //取出返回的数据 127 if (g_myXmlHttpRequest.readyState == 4) 128 { 129 // 取出值，根据返回信息的格式而定 . text 130 //alert(g_myXmlHttpRequest.responseText); 131 $('MyRes').value = g_myXmlHttpRequest.responseText; 132 } 133 } 134 135 function ZcCallBack_post() 136 { 137 //alert('回调函数被调用 '+g_myXmlHttpRequest.readyState); 138 //取出返回的数据 139 if (g_myXmlHttpRequest.readyState == 4) 140 { 141 console.log("ZcCallBack_post - 1"); 142 // 取出值，根据返回信息的格式而定 . text 143 //alert(g_myXmlHttpRequest.responseText); 144 //$('MyRes').value = g_myXmlHttpRequest.responseText; 145 146 // 看看如何取出 xml 格式的数据 147 /*Document*/var xmldocRtn = g_myXmlHttpRequest.responseXML; 148 // 获取 mes 节点列表 149 var nodelist = xmldocRtn.getElementsByTagName("mes"); 150 //alert(nodelist.length); 151 // 取出 第一个 mes 节点 152 var nodeMes = nodelist[0]; 153 // 取出 第一个 mes 节点 的 第一个 子节点 154 var childnode0 = nodeMes.childNodes[0]; 155 // 取出 第一个 mes 节点 的 第一个 子节点 的 节点值 156 var strChildNode0Value = childnode0.nodeValue; 157 $('MyRes').value = strChildNode0Value; 158 159 console.log("ZcCallBack_post - 2"); 160 } 161 } 162 </script> 163 164 <body> 165 This is my JSP page. <br> 166 167 168 <form action='' method='post'> 169 用户名 : <input type='text' name='username_1' id='UsernameID'> 170 <input type='button' value='验证用户名' onclick='CheckUsername_post();'> 171 <input type='text' id='MyRes' style='border-1;color:red'> 172 <br/> 173 174 密 码 : <input type='password' name='password_1'><br/> 175 电子邮件: <input type='text' name='email_1'><br/> 176 <br/> 177 178 <input type='submit' value='用户注册'> 179 <input type='reset' value='信息重置'> 180 </form> 181 </body> 182 </html>
2、
1 package ajaxOper; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 6 import javax.servlet.ServletException; 7 import javax.servlet.http.HttpServlet; 8 import javax.servlet.http.HttpServletRequest; 9 import javax.servlet.http.HttpServletResponse; 10 11 public class TajaxReturn extends HttpServlet 12 { 13 public void doGet(HttpServletRequest request, HttpServletResponse response) 14 throws ServletException, IOException 15 { doPost(request, response); } 16 17 18 public void doPost(HttpServletRequest _request, HttpServletResponse _response) 19 throws ServletException, IOException 20 { 21 // 这里的设置很重要，下面一句是告诉浏览器返回的数据是xml格式. 22 // 而非平时的 html 格式 ! ! ! 23 //_response.setContentType("text/html;charset=utf-8"); 24 _response.setContentType("text/xml;charset=utf-8"); 25 26 // 设置浏览器 不缓存 (股票 信息 等 尤其重要) 27 _response.setDateHeader("Expires", -1); // for IE 28 _response.setHeader("Cache-Control", "no-cache"); // for 火狐 或 其他。 29 _response.setHeader("Pragma", "no-cache"); // for 火狐 或 其他。 30 31 PrintWriter pw = _response.getWriter(); 32 33 String strUsername = _request.getParameter("username"); 34 System.out.println(strUsername); 35 String strRtn = ""; 36 //* 37 if ("zc".equalsIgnoreCase(strUsername)) 38 strRtn += "<res><mes>Can not be used .</mes></res>"; 39 else 40 strRtn += "<res><mes>Can be used .</mes></res>"; 41 //*/ 42 //strRtn = "ZZZ"; 43 pw.println(strRtn); 44 } 45 46 }
3、