jQuery 对ajax的三层封装

12.1jQuery对Ajax的封装
jQuery中的ajax解决了大部分浏览器的兼容性问题
javascript使用ajax时，需要使用XMLHttpRequest对象,jQuery使用ajax时，也需要使用XMLHttpRequest对象

jQuery对Ajax的第一层次封装 $.ajax()
jQuery对Ajax的第二层次封装 $.get() $.post() load()
jQuery对Ajaxd的第三层次封装$.getJSON() $.getScript()

注意事项

$.get()$.post()中的参数不可以互换位置,不是缺一不可的
$.ajax()中的参数可以互换位置,不是缺一不可的
$.get()/$.post()/$.ajax()会自动将服务器返回的 JSON 字符串转换成 JavaScript 对象

12.2 jQuery对Ajax的第一层次封装

$.ajax()方法

1）用法：$.ajax( { … } )，参数顺序无所谓。
2）参数如下：
①url(string)：请求地址。
②type(string)：GET/POST。
③data(object/string)：请求参数。
④dataType(string)：预期服务器返回的数据类型。
A.html：返回的是一个 html 文档。 B.text：返回的是纯文本。
C.json：返回的是 json 字符串。 D.xml： 返回的是一个 Xml 文档。
E.script：返回的是一个 javascript 脚本
⑤success(function)： 请求成功后调用的回调函数， 有两个参数 function(data,textStatus)，
其中 data 是服务器返回的数据，textStatus 描述状态的字符串。
⑥error(function)：请求失败时调用的函数，有三个参数function(xhr,textStatus,errorThrown)：
A.xhr：底层的 XMLHttpRequest 对象。 B.textStatus：错误的描述。C.errorThrown：一般为 null。
⑦async：true（缺省，异步）/false（同步）

$.ajax({
	url : "/servlet/DemoServlet",//地址
	type : "post",//请求类型
	data : {
		"name" : $("#name").val()
	},//要传的值，以键值对的形式存在
	dataType : "text",
	success : function(data) {//data是变量，是服务器传到jsp的数据。相当于以前从Servlet转发到jsp
		alert(data + "从Servlet传过来的数据");
	}
});

12.3 jQuery对Ajax的第二层次封装
1.$.get()方法

1）作用：使用 get 方式向服务器发请求。
2）用法：$.get(url,[data],[callback],[type]);
①url：请求地址。
②data：请求参数，有两种形式：A.请求字符串形式："name=chang&&age=23"B.对象形式：{‘name’:‘chang’,‘age’:23}。
③callback：是一个回调函数，格式：function(data,statusText)，
其中，data 是服务器返回的数据，statusText 是服务器处理的状态。
④type：服务器返回的数据的类型，有五种：
A.html：返回的是一个 html 文档。 B.text：返回的是纯文本。
C.json：返回的是 json 字符串。 D.xml： 返回的是一个 Xml 文档。
E.script：返回的是一个 javascript 脚本。

$.get('ActionServlet',function(data){
		$('#tb1').empty();//先清空之前的内容
		for(i=0;i<data.length;i++){ 
			$('#tb1').append( '<tr><td>'+data[i].name+'</td><td>'+data[i].code+'</td><td>'+data[i].price+'</td></tr>'); 
		}
	},
	'json'
	);//ActionServlet 中发送的是 JSON 字符串，所以此处写 json

2.$.post()方法使用HTTPpost请求从服务器加载数据。用法：$.post(url,data,function(data,status,xhr),datatype)跟get方法相同。

3.load() 方法从服务器加载数据，并使用返回的html内容替换当前匹配元素的内容。
load()函数默认使用GET方式，如果提供了对象形式的数据，则自动转为POST方式。
load()函数只会替换每个匹配元素的内部内容(innerHTML)。
$(selector).load(url,data,function(response,status,xhr))
把文件 “demo_test.txt” 的内容加载到指定的

元素：

$("button").click(function(){
		$("#div1").load("demo_test.txt");
	});

12.4 jQuery对Ajaxd的第三层次封装
1 jQuery.getJSON()
getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。
JSON是一种数据格式，JS原生支持JSON格式，通过jQuery.getJSON()从服务器获得的JSON数据，jQuery会先尝试将其转为对应的JS对象。
语法 $(selector).getJSON(url,data,success(data,status,xhr))
使用 Ajax 请求获取 JSON 数据，并输出结果：

$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("action.jsp?m=list ",function(result){
		// jQuery将获取的JSON格式数据转换为JS数组
 		 for(var i in data){
     			var obj = data[i];
        		alert( obj.title );
    		}
           });
    });
});

2 jQuery.getScript()
使用 AJAX 请求，获取和运行 JavaScript：
用于通过HTTP GET形式的加载JavaScript文件并运行它。
该函数用于动态加载JS文件，并在全局作用域下执行文件中的JS代码。
该函数可以加载跨域的JS文件。请注意，该函数是通过异步方式加载数据的。

$("button").click(function(){
	//加载并执行js文件demo_ajax_script.js?v=1.3
	//并在成功后执行回调函数
	$.getScript( "demo_ajax_script.js?v=1.3", 
		function(data){  
			alert( "加载成功" );    
			// 这里假设加载的js文件中定义了函数renderUI()，这里即可执行
    			renderUI();
		}
	 );
});