Ajax再回首
|
最近最项目又用到了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",true);</span>
下面是W3C的解释 向服务器发送请求如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法： xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
GET 还是 POST？与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。 然而，在以下情况中，请使用 POST 请求：
3服务器响应 请求发过去了，然后就看服务器响应了，这个怎么说呢就跟送快递是的、到哪哪的都会有显示、这个也有、这个分4个状态、还有结果、每次改变都会出触发onreadystatechange 事件。XMLHttpRequest 对象也就是一开始new的Ajax对象有这么几个属性、如下
所以、当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 总结：今天先到这吧 - -
————————————chenchen————————————— （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |