Ajax异步XMLHttpRequest对象
Posted 梦碎轻抚尘埃
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax异步XMLHttpRequest对象相关的知识，希望对你有一定的参考价值。
示例Ajax：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test Ajax</title> </head> <body> <div style="text-align: center;"> <button onclick="loadName()">测试Ajax</button> </div> </body> <script type="text/javascript"> function loadName() { var xmlHttp; if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); }else{//IE 5,6的支持 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } //xmlHttp.open("get", "testAjax", true); //xmlHttp.open("post", "testAjax", true); /* //get请求 xmlHttp.open("get", "testAjax?name=Anner&age=24", true); xmlHttp.send(); */ //post请求 xmlHttp.open("post", "testAjax", true); xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlHttp.send("name=Anner&age=24"); } </script> </html>
XMLHttpRequset对象相应服务器
onreadystatechange事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务
当readystate改变时，就会触发onreadystatechange事件
XMLHttpRequest对象的三个重要的属性：
1、onreadystatechange存储函数或函数名，每当readyState属性改变时，就调用该函数
readyState存有XMLHttpRequest的状态，从0到4发生变化
0：请求未初始化
1：服务器连接已经建立
2：请求已接收
3：请求处理中
4：请求已完成，且相应已就绪
status：
200:OK
404:未找到页面
如需获得来自服务器的相应，使用XMLHttpRequest对象的responseText或responseXML属性
responseText获得字符串形式的响应数据
responseXML获得XML形式的响应数据
Ajax返回后台Servlet数据
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Ajax</title>
</head>
<body>
<div style="text-align: center;">
<button onclick="loadName()">测试Ajax</button>
<input type="text" name="te" id="te">
</div>
</body>
<script type="text/javascript">
function loadName() {
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{//IE 5,6的支持
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//xmlHttp.open("get", "testAjax", true);
//xmlHttp.open("post", "testAjax", true);
/*
//get请求
xmlHttp.open("get", "testAjax?name=Anner&age=24", true);
xmlHttp.send();
*/
//alert("readyState:"+xmlHttp.readyState+"status状态"+xmlHttp.status);
xmlHttp.onreadystatechange=function(){
//alert("readyState:"+xmlHttp.readyState+"status状态"+xmlHttp.status);
if(xmlHttp.readyState==4 && xmlHttp.status==200){
//alert(xmlHttp.responseText);
document.getElementById("te").value=xmlHttp.responseText;
}
};
//post请求
xmlHttp.open("post", "testAjax", true);
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("name=Anner&age=24");
}
</script>
</html>
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//req.setCharacterEncoding("utf-8");
//String name=req.getParameter("name");
//String age=req.getParameter("age");
//System.out.println(name+" "+age);
resp.setContentType("text/html;charset=utf-8");
PrintWriter out =resp.getWriter();
out.println("ajax返回");
out.flush();
out.close();
}
以上是关于Ajax异步XMLHttpRequest对象的主要内容，如果未能解决你的问题，请参考以下文章
AJAX 核心 —— XMLHTTPRequest 对象 回顾记录
什么是Ajax ,异步,同步,JSON,XMLHttpRequest对象,什么是JSON,使用JQuery实现Ajax