最近最项目又用到了Ajax,印象中对Ajax的掌握还不是那么深、只是单纯的会用、不行!我可不是sloth,所以又抬起爪爪、敲击键盘、再次品味Ajax的味道。
首先做了个Demo、一共两个JSP,一个充当客户端WEB一个充当服务端Servlet、如下
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
<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>
使用Ajax实现异步与服务器交互其实就4部分
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>
2 发送请求
<span style="font-size:18px;"> //地址和要传送的数据
//AjaxServlet.jsp代表要访问的页面,这里的jsp为服务器Servlet
//password为穿过去的参数(这里使用的GET方式提交)
var url = "AjaxServlet.jsp?password=" + password;
//设置请求方式为GET
//设置请求的URL
//设置为异步提交
xmlHttp.open("GET", url, true);</span>
下面是W3C的解释
向服务器发送请求
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
方法 | 描述 |
---|---|
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。
|
send(string) | 将请求发送到服务器。
|
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
3服务器响应
请求发过去了,然后就看服务器响应了,这个怎么说呢就跟送快递是的、到哪哪的都会有显示、这个也有、这个分4个状态、还有结果、每次改变都会出触发onreadystatechange 事件。XMLHttpRequest 对象也就是一开始new的Ajax对象有这么几个属性、如下
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status | 200: "OK" 404: 未找到页面 |
所以、当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>
responseText是Ajax返回的数据、Ajax只能返回字符串或者XML。
对了,服务器端要用request.getParameter("password");来获取GET传入的数据、password是ID
request.getParameter("password");
总结:今天先到这吧 - -
————————————chenchen—————————————