这是 post方式
本片文章是 根据 文章"ajax_java"修改而来。
本文 AJAX传递的是 明文字符串（非json，非xml）。
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" src="./js/ajax_z.js"></script> 24 <script type="text/javascript" > 25 function CheckUsername_post() 26 { 27 XmlHttp_Object(); 28 XmlHttp_Post("/ajax_test/TajaxReturn", "username=DDD", XmlHttp_Post_Callback); 29 } 30 </script> 31 32 <body> 33 This is my JSP page. <br> 34 35 36 <form action='' method='post'> 37 用户名 : <input type='text' name='username_1' id='UsernameID'> 38 <input type='button' value='验证用户名' onclick='CheckUsername_post();'> 39 <input type='text' id='MyRes' style='border-1;color:red'> 40 <br/> 41 42 密 码 : <input type='password' name='password_1'><br/> 43 电子邮件: <input type='text' name='email_1'><br/> 44 <br/> 45 46 <input type='submit' value='用户注册'> 47 <input type='reset' value='信息重置'> 48 </form> 49 </body> 50 </html>
2、ajax_z.js ：
1 var g_xmlHttpRequest = null; //XMLHttpRequest 2 3 4 // 创建 ajax 引擎 5 function XmlHttp_Object() 6 { 7 if (g_xmlHttpRequest) 8 return g_xmlHttpRequest; 9 10 if (window.XMLHttpRequest) 11 {// code for all new browsers 12 g_xmlHttpRequest = new XMLHttpRequest(); 13 } 14 else if (window.ActiveXObject) 15 {// code for IE5 and IE6 16 g_xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 17 } 18 return g_xmlHttpRequest; 19 } 20 21 function XmlHttp_Post(_strUrl, _strData, _funcCallback) 22 { 23 // ZC: _strUrl ==> 数据的目标地址，类似 "/ajax_test/TajaxReturn" 24 // ZC: _strData ==> 要发送的数据，类似"username=DDD" 25 // ZC: _funcCallback ==> 回调函数指针 (注意函数名后面 不要带括号) 26 27 var xmlHttpRequest = XmlHttp_Object(); 28 if (! xmlHttpRequest) 29 { 30 console.error('创建 Ajax 对象失败'); 31 return false; 32 } 33 34 // ZC: 第一个参数 : 表示请求的方式 'get'/'post' 35 // ZC: 第二个参数 : 指定URL 36 // ZC: 第三个参数 : true --> 使用异步机制; false --> 同步机制 37 // 这里只是打开请求，还没发请求 38 xmlHttpRequest.open('post', _strUrl, true); // ZC: 异步 39 40 // ZC: 还有一句话，这句话必须要. 41 // ZC: 为何如此重要？ 42 xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 43 44 // ZC: 回调函数 45 // ZC: 注意这里是不带括号的: 46 // ZC: 带括号 ：函数调用 47 // ZC: 不带括号 ：函数地址 48 xmlHttpRequest.onreadystatechange = _funcCallback; 49 50 // ZC: 真正的发送请求 51 // ZC: 如果是 get请求，则传入参数是null； 52 // ZC: 如果是 post请求，则传入的是 请求的参数信息 53 xmlHttpRequest.send(_strData); 54 } 55 56 function XmlHttp_Post_Callback() 57 { 58 if (g_xmlHttpRequest.readyState==4) 59 {// 4 = "loaded" 60 if (g_xmlHttpRequest.status==200) 61 {// 200 = OK 62 //取出返回的数据(g_xmlHttpRequest.responseText; / g_xmlHttpRequest.responseXML;然后解析xml) 63 console.log(g_xmlHttpRequest.responseText); 64 } 65 else 66 { 67 console.error("Problem retrieving XML data"); 68 } 69 } 70 }
3、servlet：
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 = "ZZZhahaha哈哈哈哈"; 43 pw.println(strRtn); 44 } 45 46 }
X