你我学习网
不闲扯，直接开讲。
使用XMLHttpRequest对象，主要分为以下七个步骤：
- 创建对象
- 设置过期时间
- 设置数据格式
- 初始化 HTTP 请求
- 设置HTTP头请求
- 回传数据的处理
- 发送 HTTP 请求
对应代码如下所示
<script type="text/javascript">
var xhr;
function goAjax() {
//1.创建对象
xhr = new XMLHttpRequest();
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.设置过期时间
xhr.setTimeout = 3000;
//3.设置数据格式
xhr.responseType = "text";
//4.初始化 HTTP 请求参数(未发送)
xhr.open("POST", "servlet/AjaxLoginServlet", true);
//5.设置HTTP请求
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//6.回传数据的处理
//注册相关事件回调处理函数
//6.1 回传的数据加载完毕后执行
xhr.onload = function(e) {
//alert(this.readyState + "||" + this.status);
if(this.readyState == 4 || this.status == 200) {
var div = document.getElementById("divContent");
div.innerHTML = this.responseText;
}
};
//6.2访问出错
xhr.onerror = function(e) {
alert("登录失败！");
};
//6.3超时
// xhr.ontimeout = function(e) {
// };
//6.4状态改变
/* xhr.onreadystatechange = function(e){
if(this.readyState == 4 || this.status == 200) {
alert(this.responseText);
}
} */
//7.发送数据
var username = document.getElementById("username").value;
var pwd = document.getElementById("password").value;
xhr.send("username=" + username + "&password=" + pwd);
}
</script>
HTML页面代码如下：
<body>
账号：<input type="text" name="username" id="username" /><br />
密码：<input type="password" name="password" id="password" /><br />
<input type="button" value="登录" onclick="goAjax();" />
<div id="divContent" style="width:200px; height: 100px;"></div>
</body>
servlet文件代码如下：
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置内容格式
response.setContentType("text/html");
PrintWriter out = response.getWriter();
//获取url中的用户名和密码
String username = request.getParameter("username");
String password = request.getParameter("password");
//成功输出success 失败输出fail
if ("haha".equals(username) && "123".equals(password)) {
out.println("success");
} else {
out.println("fail");
}
out.flush();
out.close();
}
本文出自 “软件思维” 博客，请务必保留此出处http://softi.blog.51cto.com/13093971/1950888
