Ajax（javaweb常用）

Ajax

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的
网页开发技术。
ajax 是一种浏览器异步发起请求。局部更新页面的技术

javaScript 原生 Ajax 请求

主要分为4步
1、我们首先要创建 XMLHttpRequest 对象
2、调用 open 方法设置请求参数
3、调用 send 方法发送请求
4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。

<script type="text/javascript">
	function XXX(){
		//1、我们首先要创建 XMLHttpRequest 对象
		var xhr = new XMLHttpRequest();
		//2、调用 open 方法设置请求参数
		xhr.open("GET","ajaxServlet?action=javaScriptAjax&a="+new Date(),true);
		//三个参数分别是，请求方式，URL,是不是异步操作
	
		
		//4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。
		//数字4代表请求已完成，且响应已就绪 
		xhr.onreadystatechange = function() {
		// 判断请求完成，并且成功
		if (xhr.readyState == 4 && xhr.status == 200) {
		document.getElementById("div01").innerHTML = 						xhr.responseText;
}
}

		//3、调用 send 方法发送请求
		xhr.send()；
	}
<script>

服务端（servlet）：

protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
System.out.println("ajax 请求过来了 a--" + request.getParameter("a"));
Random random = new Random(System.currentTimeMillis());
// 使用随机数，可以让客户端看到变化
response.getWriter().write(
new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}

JQuery 的 Ajax 请求

主要用图中的四个

$.ajax方法
$.get方法
$.post方法
$.getJSON方法
补充一个表单序列化方法：serialize()表单序列化方法，它会将表单以name=value&name=value的形式序列化。

$.ajax方法

$.ajax 请求参数
url： 请求的地址
type : 请求的方式 get 或 post
data : 请求的参数 string 或 json
success: 成功的回调函数
dataType: 返回的数据类型 常用 json 或 tex

$.ajax({
url:"ajaxServlet", 								//请求地址
error:function(){ alert("请求失败") },			//请求失败回调
success:function(data){ alert(data) },			//请求成功回调
type:"POST",									//请求的方式
dataType:"json",								//返回的数据类型是JSON对象
data:{											//请求的参数
		action:"jqueryAjax",
		a:12,
		date:new Date()
	}
});

$.get 请求和$.post 请求
url:请求的 URL 地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text。


$("#getBtn").click(function(){
$.get(
"ajaxServlet", // 请求路径
{// 请求参数
action:"jqueryGet",
a:12,
date:new Date()
},function(data){alert(data);},// 成功的回调函数
"json" // 返回的数据类型
);
})；




$("#postBtn").click(function(){
// post 请求
$.post(
"ajaxServlet", // 请求路径
{ // 请求参数
action:"jqueryPost",
a:12,
date:new Date()
},
function(data){ alert( data ) }, // 成功的回调函数
"text" // 返回的数据类型
);
})；

$.getJSON 请求
url:待载入页面的 URL 地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数

$("#getJsonBtn").click(function(){
// 调用
$.getJSON(
"ajaxServlet", // 请求路径
{ // 请求参数
action:"jqueryGetJSON",
a:12,
date:new Date()
},
function(data){ alert( data ) } // 成功的回调函数
);
});

serialize

$("#submit").click(function(){
// 把参数序列化
var data = $("#form01").serialize();
alert(data);
})；