-
创建该对象
见下文的js代码
-
属性
-
readdyState:只读的。返回的是short类型。
作用：标识着XMLHttpRequest对象的当前状态。
0：未初始化
1：open方法已经调用了
2：send方法已经调用了
3：接收到了响应消息头，但没有接收到正文
4：接收到了响应正文。响应结束
-
responseText:只读的。返回的是String
作用：接收服务器返回的文本类型的正文数据。
-
responseXML：只读的。返回的是Document对象（JS中文档模型）
作用：接收服务器返回的XML类型的正文数据。
-
status：只读的。返回的是short
作用：接收服务器返回的响应状态码
-
statusText：只读的。返回的是String
作用：接收服务器返回的响应吗描述
-
-
方法
- getAllResponseHeaders():返回所有的响应消息头。是一个String字符串
- getResponseHeander(headerName):返回指定头的值。是一个String字符串
- open(String method,String url,boolean async):建立与服务器的链接
- method：请求方式。GET|POST
- url：请求的服务器地址
- async：是否是异步。true是异步的。默认就是true
- send(String data):发出请求。data参数是请求正文的内容数据
- setRequestHeander(String headerName,String headerValue):设置请求消息头
-
事件处理器
-
onreadystatechange:指向一个函数，用于做事件处理
XMLHttpRequest对象的readyState的每次变化都会触发onreadystatechange指向的事件处理器
-
2.执行步骤
引入的js文件
/**
* Created by luozhiyun on 17/1/12.
*/
function getXHR() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
return xmlHttp;
}
jsp源码(xhr执行步骤):
<%--
Created by IntelliJ IDEA.
User: luozhiyun
Date: 17/1/12
Time: 19:15
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title></title>
<script type="application/javascript" src="${pageContext.request.contextPath}/js/util.js"></script>
<script type="application/javascript">
window.onload = function () {
document.getElementById("one").onclick = function () {
//xhr执行步骤
//1、得到xhr（XMLHttpRequest）对象
var xhr = getXHR();
//2、注册状态变化监听器
xhr.onreadystatechange = function () {
//做出具体的处理
if(xhr.readyState == 4){
if(xhr.status == 200) {
alert("服务器已经响应结束了，去看看吧");
}
}
};
//3、建立与服务器的链接
//如果访问的地址相同，浏览器就不会真正的发出请求,所以指定一个time的变量,并无实际意义
xhr.open("GET", "${pageContext.request.contextPath}/servlet/AServlet?time="+new Date().getTime());
//4、向服务器发出请求
xhr.send(null);//null代表没有正文
};
};
</script>
</head>
<body>
<input type="button" value="点我呀" id="one" >
</body>
</html>
servlet源码:
package org.luoluo.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* Created by luozhiyun on 17/1/12.
*/
@WebServlet(name = "AServlet",urlPatterns = "/servlet/AServlet")
public class AServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("AServlet收到了");
}
}
网友评论