AJAX请求

AJAX请求

一、概念

是一种创建交互式网页引用的网页开发技术。
AJAX是一种浏览器通过js异步发起请求。局部更新页面的技术。

• 局部更新：页面中只有部分数据进行变化不会舍弃原来页面的内容，浏览器地址栏不会发生变化
• 异步：其他的功能并不影响整个页面其他的交互，可以带来良好的用户体验

二、AJAX的请求示例(原生写法)

使用JavaScript语言发起AJAX请求的步骤：

1. 首先创建XMLHttpRequest
   var xmlhttprequest = new XMLHttpRequest();

2. 调用open方法设置请求参数
   xmlhttprequest.open("GET","http://localhost:8080/工程路径/ajaxservlet?action=javaScriptAjax",true);

3. 在这之前先要写好为服务器传送的Json数据。在send方法前绑定onreadystatechange(当请求被发送到服务器时，需要执行一些基于相应的任务，每当readyState改变时，就会触发该事件，readyState对应0-4，5种状态)事件，处理请求完成后的操作。
   

xmlhttprequest.onreadystatechange = function(){
	if(xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200){
		var jsonObj = JSON.parse(xmlhttprequest.responseText);
		//把相应的数据显示在页面上
		document.getElementById("标签").innerHTML = "信息" + jsonObj.(属性);
	}
}

4. 调用send方法发送请求
   xmlhttprequest.send();

注：如需获得来自服务器的响应，请使用XMLHttpRequest对象的responseText(获得字符串形式的响应数据)或responseXML(获得XML形式的响应数据)属性。

三、使用jQuery中的AJAX请求

1.ajax常用5个方法

$("#ajaxBtn").click(function(){
	$.ajax({
		url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
		// data:"action=jQueryAjax",
		data:{action:"jQueryAjax"},
		type:"GET",
		success:function (data) {
			// alert("服务器返回的数据是：" + data);
			// var jsonObj = JSON.parse(data);
			$("#msg").html("编号：" + data.id + " , 姓名：" + data.name);
		},
		dataType : "json"
	});
});

2.get和post方法

• url 请求的 url 地址
• data 发送的数据
• callback 成功的回调函数
• type 返回的数据类型
  类型已经确定，其余都是一样的

// ajax--get 请求
$("#getBtn").click(function(){
	$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
		$("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);
	},"json");
});
// ajax--post 请求
$("#postBtn").click(function(){
	$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data){
	$("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
	},"json");
});

3.getJSON方法

get类型确定，数据格式JSON确定

• url 请求的 url 地址
• data 发送给服务器的数据
• callback 成功的回调函数

// ajax--getJson 请求
$("#getJSONBtn").click(function(){
	$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function
(data) {
		$("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);
	});
});

4.serialize方法(表单序列化)

serialize()可以把表单中所有表单项的内容都获取到，并以name=value&name=value 的形式进行拼接。

// ajax 请求
$("#submit").click(function(){
	// 把参数序列化
	$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" +
$("#form01").serialize(),function (data) {
		$("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
	});
});