jQuery确实是个挺好轻量级JS框架能帮助我们快速开发JS应用并在定程度上改变了我们写JavaScript代码习惯
废话少说直接进入正题我们先来看些简单思路方法这些思路方法都是对jQuery.ajax进行封装以方便我们使用思路方法当然如果要处理复杂逻辑还是需要用到jQuery.ajax(这个后面会说到).
1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中
url (String) : 请求HTML页URL地址
data (Map) : (可选参数) 发送至服务器 key/value 数据
callback (Callback) : (可选参数) 请求完成时(不需要是success)回调
这个思路方法默认使用 GET 方式来传递如果[data]参数有传递数据进去就会自动转换为POST方式jQuery 1.2 中可以指定选择符来筛选载入 HTML 文档DOM 中将仅插入筛选出 HTML 代码语法形如 "url #some > selector"
这个思路方法可以很方便动态加载些HTML文件例如表单
举例代码:
[复制此代码]CODE:

$(".ajax.load").load("http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html .post",
function (responseText, textStatus, XMLHttpRequest){
this;//在这里this指向是当前DOM对象即$(".ajax.load")[0]
//alert(responseText);//请求返回内容
//alert(textStatus);//请求状态:successerror
//alert(XMLHttpRequest);//XMLHttpRequest对象
});


这里将显示结果
注:不知道为什么URL写绝对路径在FF下会出错知道麻烦告诉下下面get和post举例使用是绝对路径所以在FF下你将会出错并不会看到返回结果还有get和post举例都是跨域发现传上来后没办法获取结果所以把运行按钮去掉了
2. jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求
参数:
url (String) : 发送请求URL地址.
data (Map) : (可选) 要发送给服务器数据以 Key/value 键值对形式表示会做为QueryString附加到请求URL中
callback (Function) : (可选) 载入成功时回调(只有当Response返回状态是success才是该思路方法)
这是个简单 GET 请求功能以取代复杂 $.ajax 请求成功时可回调如果需要在出错时执行请使用 $.ajax举例代码:
$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){
//返回 data 可以是 xmlDoc, jsonObj, html, text, 等等.
this; // 在这里this指向是Ajax请求选项配置信息请参考下图
alert(data);
//alert(textStatus);//请求状态:successerror等等 当然这里捕捉不到errorerror时候根本不会运行该回调
//alert(this);
});点击发送请求:
jQuery.get回调里面 this 指向是Ajax请求选项配置信息:

3. jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求
参数:
url (String) : 发送请求URL地址.
data (Map) : (可选) 要发送给服务器数据以 Key/value 键值对形式表示
callback (Function) : (可选) 载入成功时回调(只有当Response返回状态是success才是该思路方法)
type (String) : (可选)官方介绍说明是:Type of data to be sent其实应该为客户端请求类型(JSON,XML,等等)
这是个简单 POST 请求功能以取代复杂 $.ajax 请求成功时可回调如果需要在出错时执行请使用 $.ajax举例代码:
Ajax.aspx:
Response.ContentType = "application/json";
Response.Write("{result: '" + Request["Name"] + ",你好！(这消息来自服务器)'}");jQuery 代码:
$.post("Ajax.aspx", { Action: "post", Name: "lulu" },
function (data, textStatus){
// data 可以是 xmlDoc, jsonObj, html, text, 等等.
//this; // 这个Ajax请求选项配置信息请参考jQuery.get说到this
alert(data.result);
}, "json");点击提交:
这里设置了请求格式为"json":

如果你设置了请求格式为"json"此时你没有设置Response回来ContentType 为:Response.ContentType = "application/json"; 那么你将无法捕捉到返回数据
注意下alert(data.result); 由于设置了Accept报头为“json”这里返回data就是个对象并不需要用eval来转换为对象
4. jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行个 JavaScript 文件
参数
url (String) : 待载入 JS 文件地址
callback (Function) : (可选) 成功载入后回调
jQuery 1.2 版本的前getScript 只能同域 JS 文件 1.2中您可以跨域 JavaScript 文件注意:Safari 2 或更早版本不能在全局作用域中同步执行脚本如果通过 getScript 加入脚本请加入延时
这个思路方法可以用在例如当只有编辑器focus时候才去加载编辑器需要JS文件.下面看些举例代码:
加载并执行 test.js
jQuery 代码:
$.getScript("test.js");
--------------------------------------------------------------------------------
加载并执行 AjaxEvent.js 成功后显示信息
jQuery 代码:
$.getScript("AjaxEvent.js", function{
alert("AjaxEvent.js 加载完成并执行完成.你再点击上面Get或Post按钮看看有什么区别？");
});
加载完后请重新点击下上面 Load 请求看看有什么区别
jQuery Ajax 事件
Ajax请求会产生若干区别事件我们可以订阅这些事件并在其中处理我们逻辑在jQuery这里有两种Ajax事件:局部事件 和 全局事件
局部事件就是在每次Ajax请求时在思路方法内定义例如:
$.ajax({
beforeSend: function{
// Handle the beforeSend event
},
complete: function{
// Handle the complete event
}
// ...
});全局事件是每次Ajax请求都会触发它会向DOM中所有元素广播在上面 getScript 举例中加载脚本就是全局Ajax事件全局事件可以如下定义:
$("#loading").bind("ajaxSend", function{
$(this).show;
}).bind("ajaxComplete", function{
$(this).hide;
});或者:
$("#loading").ajaxStart(function{
$(this).show;
}); 我们可以在特定请求将全局事件禁用只要设置下 global 选项就可以了:
$.ajax({
url: "test.html",
global: false,// 禁用全局Ajax事件.
// ...
});下面是jQuery官方给出完整Ajax事件列表:
ajaxStart (Global Event)
This event is broadcast an Ajax request is started and no other Ajax requests are currently running.
beforeSend (Local Event)
This event, which is triggered before an Ajax request is started, allows you to mody the XMLHttpRequest object (ting additional headers, need be.)
ajaxSend (Global Event)
This global event is also triggered before the request is run.
success (Local Event)
This event is _disibledevent=>参数列表:
名 类型 描述
url String (默认: 当前页地址) 发送请求地址
type String (默认: "GET") 请求方式 ("POST" 或 "GET") 默认为 "GET"注意:其它 HTTP 请求思路方法如 PUT 和 DELETE 也可以使用但仅部分浏览器支持
timeout Number 设置请求超时时间(毫秒)此设置将覆盖全局设置
async Boolean (默认: true) 默认设置下所有请求均为异步请求如果需要发送同步请求请将此选项设置为 false注意同步请求将锁住浏览器用户其它操作必须等待请求完成才可以执行
beforeSend Function 发送请求前可修改 XMLHttpRequest 对象如添加自定义 HTTP 头XMLHttpRequest 对象是唯参数
function (XMLHttpRequest) { this; // the options for this ajax request }


cache Boolean (默认: true) jQuery 1.2 新功能设置为 false 将不会从浏览器缓存Cache中加载请求信息
complete Function 请求完成后回调 (请求成功或失败时均)参数: XMLHttpRequest 对象成功信息串
function (XMLHttpRequest, textStatus) { this; // the options for this ajax request }


contentType String (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型默认值适合大多数应用场合
data Object,
String 发送到服务器数据将自动转换为请求串格式GET 请求中将附加在 URL 后查看 processData 选项介绍说明以禁止此自动转换必须为 Key/Value 格式如果为jQuery 将自动为区别值对应同个名称如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'
dataType String 预期服务器返回数据类型如果不指定jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText并作为回调参数传递可用值:

"xml": 返回 XML 文档可用 jQuery 处理

"html": 返回纯文本 HTML 信息；包含 script 元素

"script": 返回纯文本 JavaScript 代码不会自动缓存Cache结果

"json": 返回 JSON 数据

"jsonp": pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP 格式使用 pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP 形式时如 "myurl?callback=?" jQuery 将自动替换 ? 为正确名以执行回调


error Function (默认: 自动判断 (xml 或 html)) 请求失败时将此思路方法这个思路方法有 3个参数:XMLHttpRequest 对象信息(可能)捕获对象
function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中个有值 this; // the options for this ajax request }


global Boolean (默认: true) 是否触发全局 AJAX 事件设置为 false 将不会触发全局 AJAX 事件如 ajaxStart 或 ajaxStop 可用于控制区别Ajax事件
Modied Boolean (默认: false) 仅在服务器数据改变时获取新数据使用 HTTP 包 Last-Modied 头信息判断
processData Boolean (默认: true) 默认情况下发送数据将被转换为对象(技术上讲并非串) 以配合默认内容类型 "application/x-www-form-urlencoded"如果要发送 DOM 树信息或其它不希望转换信息请设置为 false
success Function 请求成功后回调这个思路方法有两个参数:服务器返回数据返回状态
function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }



这里有几个Ajax事件参数:beforeSend success complete error 我们可以定义这些事件来很好处理我们每次Ajax请求注意下这些Ajax事件里面 this 都是指向Ajax请求选项信息(请参考说 get 思路方法时this图片)
请认真阅读上面参数列表如果你要用jQuery来进行Ajax开发那么这些参数你都必需熟知
举例代码获取博客园首页文章题目:
$.ajax({
type: "get",
url: "http://www.cnblogs.com/rss",
beforeSend: function(XMLHttpRequest){
//ShowLoading;
},
success: function(data, textStatus){
$(".ajax.ajaxResult").html("");
$("item",data).each(function(i, domEle){
$(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text+"</li>");
});
},
complete: function(XMLHttpRequest, textStatus){
//HideLoading;
},
error: function{
//请求出错处理
}
});
这里将显示首页文章列表

其他
jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项
设置 AJAX 请求默认地址为 "/xmlhttp/"禁止触发全局 AJAX 事件用 POST 代替默认 GET 思路方法其后 AJAX 请求不再设置任何选项参数
jQuery 代码:
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });
serialize 和 serializeArray
serialize : 序列表表格内容为串
serializeArray : 序列化表格元素 (类似 '.serialize' 思路方法) 返回 JSON 数据结构数据
举例:
HTML代码:
<p id="results"><b>Results: </b> </p>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2"
checked="checked"/> check2
<input type="radio" name="radio" value="radio1"
checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2
</form>


serializeArray 结果为:




些资源

个jQueryAjax Form表单插件:http://www.malsup.com/jquery/form/

个专门生成Loading图片站点:http://ajaxload.info/ 大家觉得那些Loading比较炫可以在这里跟帖晒下方便大家取用嘎嘎