我们在开发过程中，有需要用到不刷新页面，但是要去获取数据库的信息的时候，或者在获取后台信息，前台不会卡住等待的情况。这时候我们可以用ajax来做异步请求，ajax请求方法有很多，我下面着重去介绍常用的三个方法。
需要想要了解ajax的全部方法可以自己去查找Jquery的API帮助文档，里面有详细的介绍，但是我个人认为知道这三种就可以了。
下面方法中 url “”引号里面的参数，都是相应的servlet地址。也就是你的服务器地址。
一，这里我先给出js原生的ajax的代码(其实在真正开发中，我们一般都用jquery封装好的ajax）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
function fn1(){
//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
var xmlHttp = new XMLHttpRequest();
//2、绑定监听 ---- 监听服务器是否已经返回相应数据
xmlHttp.onreadystatechange = function(){
//ajax有五个状态
//0：请求未初始化
//1：服务器连接已建立
//2：请求已接受
//3：请求处理中
//4：请求已完成，且响应已就绪
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//5、接受响应数据
var res = xmlHttp.responseText;
//alert(res);
document.getElementById("span1").innerHTML = res;
}
}
//3、绑定地址 （第一个参数是请求方式，可以自己写成GET,或者POST）
xmlHttp.open("POST","/ajax/ajaxServlet",true);
//4、发送请求
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("name=wangwu");
}
</script>
<body>
<input type="button" value="异步访问服务器" onclick="fn1()"><span id="span1"></span><br/>
</body>
</html>
二，Jquery的ajax的post和get方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function fn1() {
//get异步访问
$.get(
"/ajax/ajaxServlet2", //url地址
{"name":"张三","age":25}, //带给服务器的参数
function(data){ //成功后的回调函数
//data 是服务器返回的参数
alert(data.name);
},
"json" //返回数据data的类型
);
}
function fn2() {
//post异步访问
$.post(
"/ajax/ajaxServlet2", //url地址
{"name":"张三","age":25}, //带给服务器的参数
function(data){ //成功后的回调函数
alert(data.name);
},
"json" //返回数据data的类型
);
}
</script>
<body>
<input type="button" value="get访问服务器" onclick="fn1()"><span id="span1"></span><br/>
<input type="button" value="post访问服务器" onclick="fn2()"><span id="span2"></span><br/>
</body>
</html>
三、jquery的ajax的ajax方法（我建议就只需要记住这一个方法就好了，我们可能需要get和post不同的请求方式，但是在这个ajax方法里面，我们都可以去配置，下面代码我只配置了最基本的属性，如果需要其他的属性的，请自行去看api)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function fn3() {
//ajax异步访问
$.ajax({
url:"/ajax/ajaxServlet2", //url地址
async:true, //是否是异步请求
type:"POST", //请求方式
data:{"name":"张三","age":25}, //带给服务器的参数
//服务器获取可以用 （这里给出java的方式）
//String parameter = request.getParameter("name");
success:function(data){ //成功后的回调函数
//data 是服务器返回的参数
alert(data.name);
},
dataType:"json" //返回数据data的类型
});
}
</script>
<body>
<input type="button" value="ajax访问服务器" onclick="fn3()">
</body>
</html>