@H_502_0@ 最近最项目又用到了Ajax，印象中对Ajax的掌握还不是那么深、只是单纯的会用、不行！我可不是sloth，所以又抬起爪爪、敲击键盘、再次品味Ajax的味道。 @H_502_0@
@H_502_0@首先做了个Demo、一共两个JSP，一个充当客户端WEB一个充当服务端Servlet、如下 @H_502_0@
@H_502_0@AjaxServlet.jsp
<span style="font-size:18px;"><%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <% //获取Web前端传过来的值 String password = request.getParameter("password"); String sqlpassword = "abc"; //判定密码是否正确 if (password.equals(sqlpassword)) { out.println("密码正确"); } else { out.println("密码错误"); } %></span>
AjaxWeb.jsp @H_502_0@
<span style="font-size:18px;"><%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
//AJAX判断旧密码是否正确
function AjaxTest() {
var password = document.getElementById("Password").value;
//表示当前浏览器不是IE如firefox（判定不同版本浏览器、new不同版本Ajax对象）
//为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。
//如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//地址和要传送的数据
//AjaxServlet.jsp代表要访问的页面，这里的jsp为服务器Servlet
//password为穿过去的参数（这里使用的GET方式提交）
var url = "AjaxServlet.jsp?password=" + password;
//设置请求方式为GET
//设置请求的URL
//设置为异步提交
xmlHttp.open("GET",url,true);
//讲方法地址给onreadystatechange属性
xmlHttp.onreadystatechange = function() {
// ajax办完事要返回的信息、要执行 的方法
// alert(xmlHttp.readyState);
//AJAX引擎状态成功
if (xmlHttp.readyState == 4) {
// HTTP协议成功
if (xmlHttp.status == 200) {
//判断服务器返回数据是否为空
if (xmlHttp.responseText != "") {
//xmlHttp.responseText取得相应文本
alert("Ajax请求成功，返回数据为:" + xmlHttp.responseText);
} else {
alert("Ajax请求成功，返回数据为空");
}
} else {
alert("请求失败错误码=" + xmlHttp.status);
}
}
};
//将设置信息发送到Ajax引擎
xmlHttp.send(null);
}
</script>
<Meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
<input name="oldPassword" type="password" class="text1" id="Password"
size="25">
<input name="btnModify" class="button1" type="button" id="btnModify"
value="修改" onClick="AjaxTest()" />
<div>正确密码abc</div>
</body>
</html></span>
@H_502_0@使用Ajax实现异步与服务器交互其实就4部分 @H_502_0@1 创建Ajax对象
为了应对所有的现代浏览器，包括IE5和 IE6，请检查浏览器是否支持 XMLHttpRequest对象。如果支持，则创建 XMLHttpRequest对象。如果不支持，则创建 ActiveXObject：
<span style="font-size:18px;"> var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}</span>
@H_502_0@2 发送请求
<span style="font-size:18px;"> //地址和要传送的数据 //AjaxServlet.jsp代表要访问的页面，这里的jsp为服务器Servlet //password为穿过去的参数（这里使用的GET方式提交） var url = "AjaxServlet.jsp?password=" + password; //设置请求方式为GET //设置请求的URL //设置为异步提交 xmlHttp.open("GET",true);</span>@H_502_0@
GET方法就是将数据放到连接中、然后后台从url连接中获取、POST确实单独传送、所以GET方法不能传太多数据和特殊字符、而POST适合大量数据或特殊字符、还有就是GET因为在连接中，用户能获取到，所以有一定安全隐患. @H_502_0@
@H_502_0@下面是W3C的解释
向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。
|
| send(string) | 将请求发送到服务器。
|
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
@H_502_0@
@H_502_0@3服务器响应 @H_502_0@ 请求发过去了，然后就看服务器响应了，这个怎么说呢就跟送快递是的、到哪哪的都会有显示、这个也有、这个分4个状态、还有结果、每次改变都会出触发onreadystatechange 事件。XMLHttpRequest 对象也就是一开始new的Ajax对象有这么几个属性、如下 @H_502_0@
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
| status | 200: "OK" |
所以、当readyState=4并且status=200的时候、说明找到了页面而且请求被处理完了、所以代码要有两个判定
<span style="font-size:18px;">//触发onreadystatechange事件执行function
xmlHttp.onreadystatechange = function() {
// ajax办完事要返回的信息、要执行 的方法
// alert(xmlHttp.readyState);
//AJAX引擎状态成功
if (xmlHttp.readyState == 4) {
// HTTP协议成功
if (xmlHttp.status == 200) {
//判断服务器返回数据是否为空
if (xmlHttp.responseText != "") {
//xmlHttp.responseText取得相应文本
alert("Ajax请求成功，返回数据为:" + xmlHttp.responseText);
} else {
alert("Ajax请求成功，返回数据为空");
}
} else {
alert("请求失败错误码=" + xmlHttp.status);
}
}
};
//将设置信息发送到Ajax引擎
xmlHttp.send(null);</span>
@H_502_0@@H_502_0@responseText是Ajax返回的数据、Ajax只能返回字符串或者XML。 @H_502_0@
@H_502_0@对了，服务器端要用request.getParameter("password");来获取GET传入的数据、password是ID
request.getParameter("password"); @H_502_0@总结：今天先到这吧 - - @H_502_0@
@H_502_0@————————————chenchen—————————————
