标签：
AJAX技术的出现使得javascript技术大火。不懂AJAX的同学百度一下，了解AJAX能做什么就可以了。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript">
window.onload=init;
function init(){
var btn = document.getElementById("getData");
btn.onclick = getData;
}
function getData(){
//利用ajax获取数据步骤
//1:创建XMLHttpRequest对象,在IE浏览器中版本低于7的情况获取的这个对象不是XMLHttpRequest,我们可以用一个工程的函数来实现(屏蔽不同浏览器之间的对象的创建)
var xhr = createXMLHttpRequest();
alert(xhr);
//2：检测XMLHttpRequest对象的状态，在合适的地方处理
//通过open方法确定要访问的页面1个参数请求类型，2提交路劲，3个参数是是否异步
xhr.open("GET","AjaxServlet",true);
//在onreadystatechange事件中处理请求
xhr.onreadystatechange = function(){
//onreadystatechange在每个阶段都进行响应，在状态等于4的时候请求结束并且state=200
if (xhr.readState == 4 && xhr.status == 200) {
//获取相应的文本信息通过xhr的resposeText可以获取文本信息，包括xml的标签
//通过responseXML可以获取xml的信息，只能xml对象
document.getElementById("saveData").innerHTML = xhr.responseText;
}
}
//3:发送请求,send函数可以传入相应的参数，这个参数必须是post请求的方式才有效，get请求直接在请求地址中拼接比如send("id=XXX & name=XXX")
xhr.send();
}
function createXMLHttpRequest(){
if (window.ActiveXObject) {
//针对ie5,6
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest){
//其他主流浏览器
return new XMLHttpRequest();
}else {
alert("你使用的浏览器不支持XMLHttpRequest");
return null;
}
}
</script>
</head>
<body>
<input type="button" value="获取数据" id= "getData">
<div id="saveData"></div>
</body>
</html>
后台代码：
package com.study.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("ajax come");
response.getWriter().write("AJAX");
}
}
标签：
原文地址：http://www.cnblogs.com/airycode/p/4823083.html
