最近评论
正在载入评论列表...
案例4-4 Ajax的请求处理
在Eclipse中新建一个项目，项目的名称为“P44_Request”。首先，新建一个HTML文档，页面名称为“login.jsp”。 本例中实现的效果与案例4-3相同，这里不再赘述，下面看一下具体的实现页面。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
</head>
<script language="javascript">
var XMLHttpReq = false;
var uname;
var psw;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest() {
createXMLHttpRequest();
XMLHttpReq.open("POST", "login", true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
XMLHttpReq.send("uname=" + uname + "&psw=" + psw); // 发送请求
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
var res=XMLHttpReq.responseXML.getElementsByTagName("res")[0].first Child.data;
window.alert(res);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 身份验证函数
function userCheck() {
uname = document.myform.uname.value;
psw = document.myform.psw.value;
if(uname=="") {
window.alert("用户名不能为空。");
document.myform.uname.focus();
return false;
}
else {
sendRequest();
}
}
</script>
<body vLink="#006666" link="#003366" bgColor="#E0F0F8">
<img height="33" src="enter.gif" width="148">
<form action="" method="post" name="myform">
用户名： <input size="15" name="uname"><p>
密 码： <input type="password" size="15" name="psw"><p>
<input type="button" value="登录" onclick="userCheck()" >
</form>
可以看到，如果以POST方式提交请求，需要配合使用下面的代码完成正确的请求及参数的提交。
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
XMLHttpReq.send("uname=" + uname + "&psw=" + psw);
其中第一条语句是为了确保服务器知道请求体中有请求参数，而最终是通过调用send()方法将串作为参数进行传递。服务器端的Servlet程序处理过程与前面的案例相同，不再赘述。
图书导读
