一、AJAX请求
1、jQuery.ajax(url,[settings])：通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数。
Example: 保存数据到服务器，成功时显示信息。
$.ajax({ type: "POST", url: "some.php", data: { name: "John", location: "Boston" } }).done(function( msg ) { alert( "Data Saved: " + msg ); });
2、ajax选项
- async (默认:
true)：是否为异步请求 - global (默认:
true)：是否触发全局 AJAX 事件 - url (默认:
当前页面地址)“发送请求的地址 - type (默认:
'GET')：请求方式 ("POST" 或 "GET")，Get时，参数中如果要传递中文，则需要用encodeURIComponent(). - data：发送到服务器的数据。可将对象或数组将自动转换为请求字符串格式。
- dataType (默认:
Intelligent Guess (xml, json, script, or html)):预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。 - context：用于设置Ajax相关回调函数的上下文。 默认情况下，这个上下文是一个ajax请求使用的参数设置对象settings。
- cache (默认:
true, dataType为"script"和"jsonp"时默认为false)：如果设置为 false ，浏览器将不缓存此页面。
3、回调函数
如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。
- beforeSend：在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。
- error：在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）
- dataFilter：在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据（可能是处理过的）传递给 success 回调函数。
- success：当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
- complete：当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。
4、GET方法和POST方法的区别
- get是从服务器上获取数据，get是把参数数据队列加到URL中，值和表单内各个字段一一对应，在URL中可以看到。（服务器端用Request.QueryString获取变量的值）
- post是向服务器传送数据。post是通过HTTP post机制，将参数数据队列放置在HTML HEADER内一起传送到URL地址。用户看不到这个过程。（服务器端用Request.Form获取提交的数据）
- get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
- get安全性非常低，post安全性较高，但是执行效率却比Post方法好。包含机密信息的话，建议用Post数据提交方式；
- 在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；
二、AJAX请求快捷方法：
1、.load( url [, data ] [, callback ] )：从服务器载入数据并且将返回的 HTML 代码并插入至 匹配的元素中。
如果提供了 "complete" 回调函数，它将在函数处理完之后，并且 HTML 已经被插入完时被调用。
默认使用 GET 方式 ， 如果data参数提供一个对象，那么使用 POST 方式。
举例：
//1、在一个有序列表中，加载主页的页脚导航。 $("#new-nav").load("/ #jq-footerNavigation li"); //2、显示一个信息如果Ajax请求遭遇一个错误 $("#success").load("/not-here.php", function(response, status, xhr) { if (status == "error") { var msg = "Sorry but there was an error: "; $("#error").html(msg + xhr.status + " " + xhr.statusText); } }); //3、发送数组形式的data参数到服务器。 $("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } ); //4、将feeds.html 文件载人到 ID为feeds的DIV. $("#feeds").load("feeds.html");
2、$.get(URL,callback)：通过 HTTP GET 请求从服务器上请求数据。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "
Status: " + status);
});
});
3、$.post(URL,data,callback):通过 HTTP POST 请求从服务器上请求数据。
下面的例子使用 $.post() 连同请求一起发送数据：
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "
Status: " + status);
});
});
4、$.getJSON(url,data,callback):通过 HTTP GET 请求载入 JSON 数据。
data数据会被附加到一个查询字符串的URL中，发送到服务器。如果该值的data参数是一个普通的对象，它会转换为一个字符串并使用URL编码，然后才追加到URL中。
下面的例子从 Flickr JSONP API中加载最近的四张标签为猫的图片：
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
tags: "mount rainier",
tagmode: "any",
format: "json"
},
function(data) {
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
通过test.js加载这个JSON数据，并使用返回的JSON数据中的 name值：
$.getJSON("test.js", function(json) {
alert("JSON Data: " + json.users[3].name);
});
5、$.getScript( url [, callback ] ):使用一个HTTP GET请求从服务器加载并执行一个 JavaScript 文件
载入的脚本在全局环境中执行，因此能够引用其他变量，并使用 jQuery 函数。被加载的脚本同样作用于当前页面.
默认情况下，$.getScript() cache选项被设置为 false。这将在请求的URL的查询字符串中追加一个时间戳参数，以确保每次浏览器下载的脚本被重新请求。
我们动态加载新的官方jQuery 颜色动画插件，一旦该插件加载完成就会触发一些颜色动画。
(function() { var url = "https://raw.github.com/jquery/jquery-color/master/jquery.color.js"; $.getScript(url, function() { $("#go").click(function(){ $(".block") .animate( { backgroundColor: "rgb(255, 180, 180)" }, 1000 ) .delay(500) .animate( { backgroundColor: "olive" }, 1000 ) }); }); })();
三、全局事件
Ajax会触发很多事件。
有两种事件，一种是局部事件，一种是全局事件：
1、局部事件：通过$.ajax来调用并且分配。
$.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ... });
2、全局事件：可以用bind来绑定，用unbind来取消绑定。
这个跟click/mousedown/keyup等事件类似。但他可以传递到每一个DOM元素上。
$("#loading").bind("ajaxSend", function(){ //使用bind
$(this).show();
}).ajaxComplete(function(){ //直接使用ajaxComplete
$(this).hide();
});
当然，你某一个Ajax请求不希望产生全局的事件，则可以设置global:false
$.ajax({ url: "test.html", global: false, // ... });
全局事件中，除了ajaxStart和ajaxStop之外，其他的事件都有3个参数：event, XMLHttpRequest, ajaxOptions。
3、事件顺序
事件发生的顺序如下：
- .ajaxStart(全局)：在AJAX 请求刚开始时执行一个处理函数.
- beforeSend(局部事件)：当一个Ajax请求开始时触发。如果需要，你可以在这里设置XHR对象。
- .ajaxSend(全局)：在Ajax请求发送之前绑定一个要执行的函数.
- success(局部事件)：请求成功时触发。即服务器没有返回错误，返回的数据也没有错误。
- .ajaxSuccess(全局)：当 Ajax 请求成功完成时执行。
- error(局部事件)：仅当发生错误时触发。你无法同时执行success和error两个回调函数。
- .ajaxError(全局)：Ajax请求出错时注册一个回调处理函数。
- complete(局部事件)：不管你请求成功还是失败，即便是同步请求，你都能在请求完成时触发这个事件。
- .ajaxComplete(全局)：当Ajax请求完成后注册一个回调函数。
- .ajaxStop(全局)：在AJAX 请求完成时执行一个处理函数。
举例：
//当 AJAX 请求开始时，显示“加载中”的指示： $("div").ajaxStart(function(){ $(this).html("<img src='demo_wait.gif' />"); }); //AJAX 请求结束后隐藏信息： $("#loading").ajaxStop(function(){ $(this).hide(); });
四、$.ajaxSetup( options ) : 设置全局 AJAX 默认选项。
举例：设置 AJAX 请求默认地址为 "/xmlhttp/"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数
$.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST" }); $.ajax({ data: myData });
五、.serialize() 与 .serializeArray():序列化表单内容
如果要表单元素的值包含到序列字符串中，元素不能被禁用,元素必须使用 name 属性。
1、.serialize() : 序列化表单内容为字符串。
.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如 <input>, <textarea> 以及 <select>。不过，选择 <form> 标签本身进行序列化一般更容易些：
$('form').submit(function() {
alert($(this).serialize());
return false;
});
输出标准的查询字符串：
a=1&b=2&c=3&d=4&e=5
2、.serializeArray() : 序列化表单内容为JSON数组。
serializeArray()输出标准的查询JOSN对象：
[ { name: a value: 1 }, { name: b value: 2 }, { name: c value: 3 }, { name: d value: 4 }, { name: e value: 5 } ]
六、利用Jquery获取后台代码或Webservice
注意：1.方法一定要静态方法，而且要有[WebMethod]的声明
后台<C#>:
using System.Web.Script.Services; [WebMethod] public static string SayHello() { return "Hello Ajax!"; }
前台<JQuery>:
$(function() { $("#btnOK").click(function() { $.ajax({ //要用post方式 type:"Post", //方法所在页面和方法名 url:location.pathname+"/SayHello", contentType:"application/json; charset=utf-8", dataType:"json", success:function(data) { alert(data.d); //返回的数据用data.d获取内容 }, error:function(err) { alert(err); } }); //禁用按钮的提交 return false; }); });
注意：如果方法需要传参数如：GetStr(string str,string str2)，则$.ajax需要增加 data: "{'str':'我是','str2':'XXX'}"。
七、通过Ajax读取XML数据
//1、解析XML字符串： var xmlDoc=$.parseXML(“”); //2、封装XMLDOC： var $xml=$(xmlDoc) //3、判断是否是XMLDOC： $.isXMLDoc(xmlDoc)==true //4、查询XML，和查询HTML语法一致： $.xml.find(“title”).text;$(“title”,$xml).text();
通过Ajax读取XML数据：
$.ajax({ type: "POST", url: "WebService1.asmx/GetDataSet", data: "{}", dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了 success: function (xml) { $(xml).find("Table1").each(function () { $(this).find("ID").text() + " " + $(this).children("title").attr("id")); }); } }); //如果返回的是JOSN文本，则需要使用$.parstJSON(json)或eval("(+json+)")解析