JQuery深入(北大青鳥(niǎo)內(nèi)部教員提升講座)

第三講：JQuery深入主講人:童金浩Mail:hfaccpxu@126.comWeb:QQ:157297480第三講：JQuery深入主講人:童金浩目標(biāo)jQueryAjax實(shí)戰(zhàn)利用jQueryAjax進(jìn)行表的增刪改查操作jQuery與.net后臺(tái)交互（VS2008對(duì)JSON的支持）jQuery插件的編寫jqGrid插件的高級(jí)使用Chapter2/27目標(biāo)jQueryAjax實(shí)戰(zhàn)Chapter2/27一、jQueryAjax實(shí)戰(zhàn)Chapter3/27一、jQueryAjax實(shí)戰(zhàn)Chapter3/27jQueryAjax一、Ajax請(qǐng)求jQuery.ajax(options)load(url,[data],[callback])jQuery.get(url,[data],[callback])jQuery.getJSON(url,[data],[callback])jQuery.getScript(url,[callback])jQuery.post(url,[data],[callback])Chapter4/27jQueryAjax一、Ajax請(qǐng)求Chapter4/271.1、jQuery.ajax(options)通過(guò)HTTP請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)。jQuery底層AJAX實(shí)現(xiàn)。簡(jiǎn)單易用的高層實(shí)現(xiàn)見(jiàn)$.get,$.post等。$.ajax()返回其創(chuàng)建的XMLHttpRequest對(duì)象。大多數(shù)情況下你無(wú)需直接操作該對(duì)象，但特殊情況下可用于手動(dòng)終止請(qǐng)求。$.ajax()只有一個(gè)參數(shù)：參數(shù)key/value對(duì)象，包含各配置及回調(diào)函數(shù)信息。詳細(xì)參數(shù)選項(xiàng)見(jiàn)下。注意1：如果你指定了dataType選項(xiàng)，請(qǐng)確保服務(wù)器返回正確的MIME信息，(如xml返回"text/xml")。錯(cuò)誤的MIME類型可能導(dǎo)致不可預(yù)知的錯(cuò)誤。

Chapter5/271.1、jQuery.ajax(options)Chapte注意2：如果dataType設(shè)置為"script"，那么所有的遠(yuǎn)程(不在同一域名下)的POST請(qǐng)求都將轉(zhuǎn)化為GET請(qǐng)求。(因?yàn)閷⑹褂肈OM的script標(biāo)簽來(lái)加載)返回值XMLHttpRequest參數(shù)options(可選):AJAX請(qǐng)求設(shè)置。所有選項(xiàng)都是可選的。選項(xiàng)async(Boolean):(默認(rèn):true)默認(rèn)設(shè)置下，所有請(qǐng)求均為異步請(qǐng)求。如果需要發(fā)送同步請(qǐng)求，請(qǐng)將此選項(xiàng)設(shè)置為false。注意，同步請(qǐng)求將鎖住瀏覽器，用戶其它操作必須等待請(qǐng)求完成才可以執(zhí)行。beforeSend(Function):發(fā)送請(qǐng)求前可修改XMLHttpRequest對(duì)象的函數(shù)，如添加自定義HTTP頭。XMLHttpRequest對(duì)象是唯一的參數(shù)。

function(XMLHttpRequest){

this;//調(diào)用本次AJAX請(qǐng)求時(shí)傳遞的options參數(shù)

}

Chapter6/27注意2：如果dataType設(shè)置為"script"，那么所有cache(Boolean):(默認(rèn):true,dataType為script時(shí)默認(rèn)為false)jQuery1.2新功能，設(shè)置為false將不會(huì)從瀏覽器緩存中加載請(qǐng)求信息。complete(Function):

請(qǐng)求完成后回調(diào)函數(shù)(請(qǐng)求成功或失敗時(shí)均調(diào)用)。參數(shù)：XMLHttpRequest對(duì)象和一個(gè)描述成功請(qǐng)求類型的字符串。

function(XMLHttpRequest,textStatus){

this;//調(diào)用本次AJAX請(qǐng)求時(shí)傳遞的options參數(shù)

}contentType(String):(默認(rèn):"application/x-www-form-urlencoded")發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類型。默認(rèn)值適合大多數(shù)應(yīng)用場(chǎng)合。data(Object,String):

發(fā)送到服務(wù)器的數(shù)據(jù)。將自動(dòng)轉(zhuǎn)換為請(qǐng)求字符串格式。GET請(qǐng)求中將附加在URL后。查看processData選項(xiàng)說(shuō)明以禁止此自動(dòng)轉(zhuǎn)換。必須為Key/Value格式。如果為數(shù)組，jQuery將自動(dòng)為不同值對(duì)應(yīng)同一個(gè)名稱。如{foo:["bar1","bar2"]}轉(zhuǎn)換為'&foo=bar1&foo=bar2'。Chapter7/27cache(Boolean):(默認(rèn):true,dadataType(String):預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定，jQuery將自動(dòng)根據(jù)HTTP包MIME信息返回responseXML或responseText，并作為回調(diào)函數(shù)參數(shù)傳遞，可用值:"xml":返回XML文檔，可用jQuery處理。"html":返回純文本HTML信息；包含script元素。"script":返回純文本JavaScript代碼。不會(huì)自動(dòng)緩存結(jié)果。除非設(shè)置了"cache"參數(shù)"json":返回JSON數(shù)據(jù)。Chapter8/27dataType(String):預(yù)期服務(wù)器返回的數(shù)據(jù)error(Function):(默認(rèn):自動(dòng)判斷(xml或html))請(qǐng)求失敗時(shí)調(diào)用時(shí)間。參數(shù)：XMLHttpRequest對(duì)象、錯(cuò)誤信息、（可選）捕獲的錯(cuò)誤對(duì)象。Ajax事件。function(XMLHttpRequest,textStatus,errorThrown){

//通常textStatus和errorThrown之中

//只有一個(gè)會(huì)包含信息

this;//調(diào)用本次AJAX請(qǐng)求時(shí)傳遞的options參數(shù)

}Chapter9/27error(Function):(默認(rèn):自動(dòng)判斷(global(Boolean):(默認(rèn):true)是否觸發(fā)全局AJAX事件。設(shè)置為false將不會(huì)觸發(fā)全局AJAX事件，如ajaxStart或ajaxStop可用于控制不同的Ajax事件。ifModified(Boolean):(默認(rèn):false)僅在服務(wù)器數(shù)據(jù)改變時(shí)獲取新數(shù)據(jù)。使用HTTP包Last-Modified頭信息判斷。processData(Boolean):(默認(rèn):true)默認(rèn)情況下，發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對(duì)象(技術(shù)上講并非字符串)以配合默認(rèn)內(nèi)容類型"application/x-www-form-urlencoded"。如果要發(fā)送DOM樹(shù)信息或其它不希望轉(zhuǎn)換的信息，請(qǐng)?jiān)O(shè)置為false。success(Function):

請(qǐng)求成功后回調(diào)函數(shù)。參數(shù)：服務(wù)器返回?cái)?shù)據(jù)，數(shù)據(jù)格式。Ajax事件。function(data,textStatus){

//data可能是xmlDoc,jsonObj,html,text,等等...

this;//調(diào)用本次AJAX請(qǐng)求時(shí)傳遞的options參數(shù)

}Chapter10/27global(Boolean):(默認(rèn):true)timeout(Number):設(shè)置請(qǐng)求超時(shí)時(shí)間（毫秒）。此設(shè)置將覆蓋全局設(shè)置。type(String):(默認(rèn):"GET")請(qǐng)求方式("POST"或"GET")，默認(rèn)為"GET"。注意：其它HTTP請(qǐng)求方法，如PUT和DELETE也可以使用，但僅部分瀏覽器支持。url(String):(默認(rèn):當(dāng)前頁(yè)地址)發(fā)送請(qǐng)求的地址。username(String):用于響應(yīng)HTTP訪問(wèn)認(rèn)證請(qǐng)求Chapter11/27timeout(Number):設(shè)置請(qǐng)求超時(shí)時(shí)間（毫秒1.load(url,[data],[callback])：載入遠(yuǎn)程HTML文件代碼并插入至DOM中。url(String):請(qǐng)求的HTML頁(yè)的URL地址。data(Map):(可選參數(shù))發(fā)送至服務(wù)器的key/value數(shù)據(jù)。callback(Callback):(可選參數(shù))請(qǐng)求完成時(shí)(不需要是success的)的回調(diào)函數(shù)。這個(gè)方法默認(rèn)使用GET方式來(lái)傳遞的，如果[data]參數(shù)有傳遞數(shù)據(jù)進(jìn)去，就會(huì)自動(dòng)轉(zhuǎn)換為POST方式的。jQuery1.2中，可以指定選擇符，來(lái)篩選載入的HTML文檔，DOM中將僅插入篩選出的HTML代碼。語(yǔ)法形如"url#some>selector"。這個(gè)方法可以很方便的動(dòng)態(tài)加載一些HTML文件，例如表單。Chapter12/271.load(url,[data],[callbac示例代碼：$(“#divcontent").load("/QLeelulu/archive/2008/03/30/1130270.html.post",function(responseText,textStatus,XMLHttpRequest){this;//在這里this指向的是當(dāng)前的DOM對(duì)象， 即 $(“.ajax.load”)[0]//alert(responseText);//請(qǐng)求返回的內(nèi)容 //alert(textStatus);//請(qǐng)求狀態(tài)：success， error //alert(XMLHttpRequest);//XMLHttpRequest對(duì)象});Chapter13/27示例代碼：Chapter13/271.2、jQuery.get(url,[data],[callback])通過(guò)遠(yuǎn)程HTTPGET請(qǐng)求載入信息。這是一個(gè)簡(jiǎn)單的GET請(qǐng)求功能以取代復(fù)雜$.ajax。請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù)，請(qǐng)使用$.ajax。返回值XMLHttpRequest參數(shù)url(String):待載入頁(yè)面的URL地址data(Map):(可選)待發(fā)送Key/value參數(shù)。callback(Function):(可選)載入成功時(shí)回調(diào)函數(shù)。Chapter14/271.2、jQuery.get(url,[data],[cal顯示test.php返回值(HTML或XML，取決于返回值)。jQuery代碼:$.get("test.php",function(data){

alert("DataLoaded:"+data);

});顯示test.cgi返回值(HTML或XML，取決于返回值)，添加一組請(qǐng)求參數(shù)。jQuery代碼:$.get("test.cgi",{name:"John",time:"2pm"},

function(data){

alert("DataLoaded:"+data);

});

Chapter15/27顯示test.php返回值(HTML或XML，取決于1.3、jQuery.getJSON(url,[data],[callback])通過(guò)HTTPGET請(qǐng)求載入JSON數(shù)據(jù)。注意：此行以后的代碼將在這個(gè)回調(diào)函數(shù)執(zhí)行前執(zhí)行。返回值XMLHttpRequest參數(shù)url(String):發(fā)送請(qǐng)求地址。data(Map):(可選)待發(fā)送Key/value參數(shù)。callback(Function):(可選)載入成功時(shí)回調(diào)函數(shù)。Chapter16/271.3、jQuery.getJSON(url,[data],從test.js載入JSON數(shù)據(jù)并顯示JSON數(shù)據(jù)中一個(gè)name字段數(shù)據(jù)。jQuery代碼:$.getJSON("test.js",function(json){

alert("JSONData:"+json.users[3].name);

});從test.js載入JSON數(shù)據(jù)，附加參數(shù)，顯示JSON數(shù)據(jù)中一個(gè)name字段數(shù)據(jù)。jQuery代碼:$.getJSON("test.js",{name:"John",time:"2pm"},function(json){

alert("JSONData:"+json.users[3].name);

});Chapter17/27從test.js載入JSON數(shù)據(jù)并顯示JSON數(shù)1.4、jQuery.getScript(url,[callback])通過(guò)HTTPGET請(qǐng)求載入并執(zhí)行一個(gè)JavaScript文件。jQuery1.2版本之前，getScript只能調(diào)用同域JS文件。1.2中，您可以跨域調(diào)用JavaScript文件。注意：Safari2或更早的版本不能在全局作用域中同步執(zhí)行腳本。如果通過(guò)getScript加入腳本，請(qǐng)加入延時(shí)函數(shù)。返回值XMLHttpRequest參數(shù)url(String):待載入JS文件地址。callback(Function):(可選)成功載入后回調(diào)函數(shù)。Chapter18/271.4、jQuery.getScript(url,[call1.5、jQuery.post(url,[data],[callback])通過(guò)遠(yuǎn)程HTTPPOST請(qǐng)求載入信息。這是一個(gè)簡(jiǎn)單的POST請(qǐng)求功能以取代復(fù)雜$.ajax。請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù)，請(qǐng)使用$.ajax。返回值XMLHttpRequest參數(shù)url(String):發(fā)送請(qǐng)求地址。data(Map):(可選)待發(fā)送Key/value參數(shù)。callback(Function):(可選)發(fā)送成功時(shí)回調(diào)函數(shù)。Chapter19/271.5、jQuery.post(url,[data],[ca二、Ajax事件ajaxComplete(callback)ajaxError(callback)ajaxSend(callback)ajaxStart(callback)ajaxStop(callback)ajaxSuccess(callback)Chapter20/27二、Ajax事件Chapter20/272.1、ajaxComplete(callback)AJAX請(qǐng)求完成時(shí)執(zhí)行函數(shù)。Ajax事件。XMLHttpRequest對(duì)象和設(shè)置作為參數(shù)傳遞給回調(diào)函數(shù)。返回值jQuery參數(shù)callback(Function):待執(zhí)行函數(shù)示例AJAX請(qǐng)求完成時(shí)執(zhí)行函數(shù)。jQuery代碼:

$("#msg").ajaxComplete(function(event,request,settings){

$(this).append("<li>請(qǐng)求完成.</li>");

});Chapter21/272.1、ajaxComplete(callback)Chap2.2、ajaxError(callback)AJAX請(qǐng)求發(fā)生錯(cuò)誤時(shí)執(zhí)行函數(shù)。Ajax事件。XMLHttpRequest對(duì)象和設(shè)置作為參數(shù)傳遞給回調(diào)函數(shù)。捕捉到的錯(cuò)誤可作為最后一個(gè)參數(shù)傳遞。返回值jQuery參數(shù)callback(Function):待執(zhí)行函數(shù)function(event,XMLHttpRequest,ajaxOptions,thrownError){

//thrownError只有當(dāng)異常發(fā)生時(shí)才會(huì)被傳遞

this;//監(jiān)聽(tīng)的dom元素

}示例AJAX請(qǐng)求失敗時(shí)顯示信息。jQuery代碼:$("#msg").ajaxError(function(event,request,settings){

$(this).append("<li>出錯(cuò)頁(yè)面:"+settings.url+"</li>");

});Chapter22/272.2、ajaxError(callback)Chapter2.4、ajaxSend(callback)AJAX請(qǐng)求發(fā)送前執(zhí)行函數(shù)。Ajax事件。XMLHttpRequest對(duì)象和設(shè)置作為參數(shù)傳遞給回調(diào)函數(shù)。返回值jQuery參數(shù)callback(Function):待執(zhí)行函數(shù)示例AJAX請(qǐng)求發(fā)送前顯示信息。jQuery代碼:

$("#msg").ajaxSend(function(evt,request,settings){

$(this).append("<li>開(kāi)始請(qǐng)求:"+settings.url+

"</li>");

});Chapter23/272.4、ajaxSend(callback)Chapter22.5、ajaxStart(callback)AJAX請(qǐng)求開(kāi)始時(shí)執(zhí)行函數(shù)。Ajax事件。返回值jQuery參數(shù)callback(Function):待執(zhí)行函數(shù)示例AJAX請(qǐng)求開(kāi)始時(shí)顯示信息。jQuery代碼:

$("#loading").ajaxStart(function(){

$(this).show();

});Chapter24/272.5、ajaxStart(callback)Chapter2.6、ajaxStop(callback)AJAX請(qǐng)求結(jié)束時(shí)執(zhí)行函數(shù)。Ajax事件。返回值jQuery參數(shù)callback(Function):待執(zhí)行函數(shù)示例AJAX請(qǐng)求結(jié)束后隱藏信息。jQuery代碼:

$("#loading").ajaxStop(function(){

$(this).hide();

});Chapter25/272.6、ajaxStop(callback)Chapter22.7、ajaxSuccess(callback)AJAX請(qǐng)求成功時(shí)執(zhí)行函數(shù)。Ajax事件。XMLHttpRequest對(duì)象和設(shè)置作為參數(shù)傳遞給回調(diào)函數(shù)。返回值jQuery參數(shù)callback(Function):待執(zhí)行函數(shù)示例當(dāng)AJAX請(qǐng)求成功后顯示消息。jQuery代碼:

$("#msg").ajaxSuccess(function(evt,request,settings){

$(this).append("<li>