Jquery基础之ajax

　　ajax是Asynchronous JavaScript and XML(异步JavaScript和XML)的简称，ajax并不是单一的技术而是利用一系列交互网页应用相关的技术形成的结合体，ajax揭开了无刷新更新页面的全新时代。

　　ajax优点：不需要插件支持、优秀的用户体验、提高Web程序的性能、减轻服务器和宽带的负担。缺点：浏览器支持度不足、破浏览器前进后退按钮的正常功能、对搜索引擎的支持不足、开发和调试工具缺乏。

　　Jquery对ajax操作进行了封装，ajax主要的几种方法是load()、$.get()、$.post()、$.getScript()、$.getJSON()、$.ajax()。

　1、load()方法

　　load方法是ajax中最简单的最常用的ajax方法能够加载静态html代码到DOM元素中，load结构如下：

　　load(url[,data][,callback]); 参数说明：url是ajax请求html的页面地址，data是键值形式[key=value]的数据传递，data决定了数据请求方式，如果data不为空则请求方式为post,否则为get。callback是ajax请求结束后的回调函数，无论请求成功失败都会执行，该函数有3个函数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象。例：

　　$("#content").load("load.html", function (completeText, textStatus, XMLHttpRequest) {alert(completeText);alert(textStatus);alert(XMLHttpRequest);});

　　该示例使用load()方法为id为content的元素动态加载load.html页面中的html元素，由于没有指定data参数因此传递方式为get，回调结束后回调参数把请求返回内容、请求状态和XMLHttpRequest对象分别打印出来。

　2、$.get()方法和$.post()方法

　　load方法通常用来从web服务器获取静态的数据文件，如果需要传递一些参数给服务器中的页面，可以使用$.get()或者$.post()方法。

　　$.get()方法使用GET方式来进行异步请求，方法结构为：

　　$.get(url [,data] [,callback] [,type])

　　参数说明:url请求获取数据的ULR地址，data发送到服务器的键值形式【key=value】的数据,在URL页面中会作为QueryString附加到请求的URL中。callback载入成功的回调函数，该函数有两个返回参数，分别是请求结果和状态。type服务器返回内容的格式，包括xml、html、script、json、text和_default。例：

$.get("getHand.ashx", { username: "uersname", pwd: "pwd" }, function (responseText, status) {alert(responseText);alert(status);},"text");

该示例住getHand.ashx一般处理页面传递用户名和密码并将处理的结束返回，在回调函数中返回打印出返回结果和操作状态。同时使用text指定了服务器返回结果是字符串形式的字符。

$.post()方法使用Post方式来进行异步请求，方法结构为

$.post(url [,data] [,callback] [,type])

参数同$.get()一样。示例：

$.get("getHand.ashx", { username: "uersname", pwd: "pwd" }, function (responseText, status) {alert(responseText);alert(status);},"text");

该示例和$.get()方法返回结果一样，只是在getHand.ashx处理文件中接收参数的方式发生了变化使用request["username"]获得参数。

$.post和$.get的区别：

　　1、Get请求将参数跟中url后进行传递;post请求将参数作为Http消息的实例内容发送给Web服务器。

　　2、get方式传输数据有大小限制【通常不能大于2KB】，而post方式传递的数量比Get方式大得多(理论上不受限制)。

　　3、get方式不的数据会被浏览器缓存起来，其他人可以从历史记录中读取到数据，get方式没有这个问题。

　　4、get方式和post方式传递的数据在服务器端获取的方式也不同，get方式使用queryString["paramname"]获取,post方式使用request["paramname"]方式获取。

　3、$.getScript()方法

使用$.getScript()方法用来加载js文件像加载html代码一样简单，且不需要对js文件进行处理javascript会自动执行。方法结构如下：

$.getScript(url [,callback]);参数说明url是js文件路径，callback是文件加载完成后回调函数。例：

$("btnSubmit").click(function(){$.getScript("validation.js",function(){$("#form1").validate();});});

该示例再提交时候动态加载验证控件，在加载完成的回调函数中使用加载的控件验证id=form1的form表单中的元素。

　4、$.getJSON()方法

$.getJSON()方法使用http的get方法从服务器获得json数据，结构如下：

$.getJSON(url [,data] [,callback]);url是请求的资源所在地址，data是传递到服务器的请求参数，callback是数据请求返回后的回调函数。例：

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
 
alert("JSON Data: " + json.users[3].name);
});

该示例使用getJSON方法从test.js中加载json格式的数据，并将结果中第四个users的name打印出来。

　5、$.ajax()方法。

ajax方法是最底层的Ajax实现，方法结构如下：

$.ajax(options);其中options可以指定以键值形式指定多个参数和回调函数信息，且所有参数都是可选的。常用参数如下:

参　数　名　称	参　数　类　型	参　　数　　说　　明
url	string	发送请求的地址
type	string	请求方式(post或get),默认是get方式
timeout	number	设置请求超时时间(毫秒)，此设置会覆盖$.ajaxSetUp()的全局设置
data	object或string	发送到服务器的数据，Get请求将附加在URL后。
dataType	string	预期服务器返回的数据类型，如果不指定Jquery会跟据HTTP包MIME信息返回responseXML或responseText，并做为回调函数参数传递。可用类型XML、html、script、json、jsonp、text
beforeSend	function	发送请求前可以修改XMLHttpRequest对象的函数，在beforeSend中如果返回false可以取消本次Ajax请求。XMLHttpRequest是唯一的参数。
complete	function	请求完成后调用的回调函数无论成功失败均调用。参数XMLHttpRequest对象和一个描述成功请求类型的字符串。
success	function	请求成功后调用的回调函数，有两个参数一个是服务器返回数据由dataType参数处理。另一个是描述状态的字符串。
error	function	请求失败后调用的回调函数，有3个参数返回即：XMLHttpRequest对象、错误信息、捕获的错误对象
global	bool	默认是true表示是否触发全局Ajax事件。设置为false将不会触发全局Ajax事件。

例：

$.ajax({
url: './Hander/getHand.ashx',
data: { time: "000", tag: "111" },
dataType: "text",
beforeSend: function () { alert("before Send"); },
success: function (data, status) { alert(data); alert(status); }
});

　6、序列化元素

　　在项目中表单是必不可少的，经常用来提供数据使用ajax技术提交数据到另一个页面中，如果表单中数据较多时候较复杂时候请用序列化元素方法处理表单中元素，序列化元素有三种方法serialize()方法、serializeArray()方法和param()方法。

serialize()方法把表单中的DOM元素序列化为字符串。例：

$.ajax({
url: './Hander/getHand.ashx',
data: $("#form1").serialize(),
dataType: "text",
beforeSend: function () { alert("before Send"); },
success: function (data, status) { alert(data); alert(status); }
});

使用serialize()方法使元素序列化为字符串形式提交到服务器端。

serializeArray()方法，该方法将元素序列化后返回Json数据。例:

$("#btnSerializeArray").click(function () {
var txt = $(":checkbox:checked").serializeArray();
$.each(txt, function (index, data) {
alert(data.value);
});
});

该示例当点击id=btnSerializeArray的按钮时候会把所有选中的checkbox元素序列化为Json数据，然后再使用$.each()方法遍历json数据并且打印数据值。

$.param()方法用来将数组或对象序列化为字符串形式，例：

var array1={a:1,b:2,c:3};var result=$.param(array1);alert(result);

该示例输出a=1&b=2&c=3;