ajax_java

来自韩顺平 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、