我们在开发过程中，有需要用到不刷新页面，但是要去获取数据库的信息的时候，或者在获取后台信息，前台不会卡住等待的情况。这时候我们可以用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>