AJAX调用SERVLET事例（z）
日期：2014-05-16 浏览次数：20637 次
AJAX调用SERVLET例子（z）
出处：http://blog.csdn.net/xiaxiaorui2003/archive/2009/04/16/4083194.aspx
工作需要自己写了个例子调用SERVLET的，可以运行，
很简单就是一个index.jsp页面，一个GetAndPostExample servlet后台，和WEB.XML配置文件
index.jsp页面
view plaincopy to clipboardprint?
1. <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
2. <%request.setCharacterEncoding("GB2312");%>
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4. <html xmlns="http://www.w3.org/1999/xhtml">
5. <head>
6. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
7. <title>AJAX测试</title>
8. <mce:script language="javascript"><!--
9. var xmlHttp;
10. //创建xmlHttp
11. function createXMLHttpRequest()
12. {
13. if(window.ActiveXObject)
14. {
15. xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
16. }
17. else if(window.XMLHttpRequest)
18. {
19. xmlHttp=new XMLHttpRequest();
20. }
21. }
22.
23. //拼出要发送的姓名数据
24. function createQueryString()
25. {
26. var firstName=document.getElementById("firstname").value;
27. var middleName=document.getElementById("middleName").value;
28. var birthday=document.getElementById("birthday").value;
29.
30. var queryString="firstName=" + firstName + "&middleName=" + middleName + "&birthday=" + birthday;
31. return queryString;
32. }
33.
34. //使用get方式发送
35. function doRequestUsingGET()
36. {
37. createXMLHttpRequest();
38. var queryString="./GetAndPostExample?";
39. queryString=queryString+createQueryString() + "&timeStamp=" + new Date().getTime();
40. xmlHttp.onreadystatechange=handleStateChange;
41. xmlHttp.open("GET",queryString,true);
42. xmlHttp.send(null);
43. }
44.
45. //使用post方式发送
46. function doRequestUsingPost()
47. {
48. createXMLHttpRequest();
49. var url="./GetAndPostExample?timeStamp=" + new Date().getTime();
50. var queryString=createQueryString();
51. xmlHttp.open("POST",url,true);
52. xmlHttp.onreadystatechange=handleStateChange;
53. xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
54. xmlHttp.send(queryString);
55. }
56.
57.
58. function handleStateChange()
59. {
60. if(xmlHttp.readyState==4)
61. {
62. if(xmlHttp.status==200)
63. {
64. parseResults();
65. }
66. }
67. }
68.
69. //解析返回值
70. function parseResults()
71. {
72. var responseDiv=document.getElementById("serverResponse");
73. if(responseDiv.hasChildNodes())
74. {
75. responseDiv.removeChild(responseDiv.childNodes[0]);
76. }
77. var responseText=document.createTextNode(xmlHttp.responseText);
78. alert("后台返回的返回值： "+xmlHttp.responseText);
79. responseDiv.appendChild(responseText);
80. }
81. // --></mce:script>
82. </head>
83.
84. <body>
85. <form id="form1" name="form1" method="post" action="#">
86. <p><br />
87. <br />
88. 姓：<input name="firstName" type="text" id="firstName" />
89. </p>
90. <p>
91. <label>
92. 名：<input type="text" name="middleName" id="middleName" />
93. </label>
94. </p>
95. <p>
96. 生日：<input name="birthday" type="text" id="birthday" />
97. </p>
98. <p
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
