AJAX æ¯ä¸æå¡å¨äº¤æ¢æ°æ®çèºæ¯ï¼å®å¨ä¸éè½½å
¨é¨é¡µé¢çæ
åµä¸ï¼å®ç°äºå¯¹é¨åç½é¡µçæ´æ°ãjQueryä½ä¸ºä¸ä¸ªä¼ç§çå端æ¡æ¶ï¼ä¹å®ç¾çæ¯æäºAjaxåè½ãéè¿ jQuery AJAX æ¹æ³ï¼è½å¤ä½¿ç¨ HTTP Get å HTTP Post ä»è¿ç¨æå¡å¨ä¸è¯·æ±ææ¬ãHTMLãXML æ JSON - åæ¶æ¨è½å¤æè¿äºå¤é¨æ°æ®ç´æ¥è½½å
¥ç½é¡µç被éå
ç´ ä¸ãç¼å常è§ç AJAX 代ç 并ä¸å®¹æï¼å 为ä¸åçæµè§å¨å¯¹ AJAX çå®ç°å¹¶ä¸ç¸åãè¿æå³çä½ å¿
é¡»ç¼åé¢å¤ç代ç 对æµè§å¨è¿è¡æµè¯ãä¸è¿ï¼jQuery å¢é为æ们解å³äºè¿ä¸ªé¾é¢ï¼æ们åªéè¦ä¸è¡ç®åç代ç ï¼å°±å¯ä»¥å®ç° AJAX åè½ã
jQueryæä¾çAjaxæ¹æ³ä¸»è¦æï¼
load(url,[data],[callback])ï¼å è½½htmlçææ¬æ件getJSON(url,[data],[callback])ï¼å è½½JSONæ°æ®getScript(url,[callback])ï¼å è½½jsæ件get(url,[data],[callback],[type])ï¼GETæ¹å¼è¯·æ±æ°æ®post(url,[data],[callback],[type])ï¼POSTæ¹å¼è¯·æ±æ°æ®serialize()ï¼æ ¼å¼å表åæ°æ®ajax([options])ï¼ajaxåå§è¯·æ±å½æ°ajaxSetup([options])ï¼è®¾ç½®ajaxå
¨å±åæ° // ajaxå
¨å±äºä»¶æ以ä¸6个ï¼
ajaxStart()ajaxStop()ajaxSend()ajaxComplete()ajaxError()ajaxSuccess()
load()æ¹æ³
load()æ¹æ³å¯ä»¥æ¹ä¾¿çè·åå¼æ¥æ°æ®ï¼urlæ¯ææå¡å¨ä¸çæ件å°åï¼dataæ¯åéå°æå¡å¨çæ°æ®ï¼callbackæ¯æå è½½æååè°ç¨çåè°å½æ°ã
举ä¾ï¼
$(âbutton1â).click(function(){
$(â#divTipâ).load(âb.htmlâ);
})
è¿æ ·å°±æb.htmlä¸çæ°æ®ç´æ¥èµå¼ç»å为divTipçdivã
getJSONæ¹æ³
getJSON()æ¹æ³å¯ä»¥ç´æ¥è°ç¨JSONæ ¼å¼æ°æ®ï¼å è½½åå¯ä»¥ç´æ¥è¿è¡éåJSONæ°æ®ï¼è¿è¡ç¸åºçå¤çã
举ä¾ï¼
$.getJSON( "ajax/test.json",function( data ) {
varitems = [];
$.each( data, function( key,val ) {
items.push( "
" + val +"
" ); }); });
å¨è·åå°test.jsonåï¼éè¿each()æ¹æ³å¯¹dataè¿è¡éåï¼è·åJSONä¸çæ°æ®ï¼ç¶åè¿è¡ç¸åºçå¤çã
getScript()æ¹æ³
éè¿getScript()æ¹æ³è·å.jsæ件ï¼ä¸ä½å¯ä»¥è½»æ¾ç注å
¥èæ¬ï¼å¹¶ä¸æ³¨å
¥çèæ¬èªå¨æ§è¡ï¼å¤§å¤§æé«äºé¡µé¢çæ§è¡æçã
举ä¾ï¼
$("button").click(function(){
$.getScript("/example/jquery/demo_ajax_script.js");
});
demo_ajax_script.jsæ件å
容
?
1
alert("This JavaScript alert wasloaded by AJAX");
å½è°ç¨getScript()æ¹æ³åï¼ä¼å¼¹åºä¸ä¸ªå¯¹è¯æ¡ï¼å¦ä¸æ示ï¼
get()æ¹æ³
ä¹åçå 个æ¹æ³åå«å¤çäºhtmlãJSONãJSæ ¼å¼çæ件ï¼ä½æ们ä¹ç»å¸¸éè¦å è½½XMLæ ¼å¼çæ°æ®ã
æ们大家é½ç¥éï¼ä¸¤ç§å¨å®¢æ·ç«¯åæå¡å¨ç«¯è¿è¡è¯·æ±-ååºç常ç¨æ¹æ³æ¯ï¼GET å POSTã
l GET - ä»æå®çèµæºè¯·æ±æ°æ®
l POST - åæå®çèµæºæ交è¦å¤ççæ°æ®
GET åºæ¬ä¸ç¨äºä»æå¡å¨è·å¾ï¼ååï¼æ°æ®ã注éï¼GETæ¹æ³å¯è½è¿åç¼åæ°æ®ã
get()è¯æ³ï¼
$(selector).get(url,data,success(response,status,xhr),dataType)
åæ°
æè¿°
url
å¿
éãè§å®å°è¯·æ±åéçåªä¸ª URLã
data
å¯éãè§å®è¿å请æ±åéå°æå¡å¨çæ°æ®ã
success(response,status,xhr)
å¯éãè§å®å½è¯·æ±æåæ¶è¿è¡çå½æ°ã
é¢å¤çåæ°ï¼
· response - å
å«æ¥èªè¯·æ±çç»ææ°æ®
· status - å
å«è¯·æ±çç¶æ
· xhr - å
å« XMLHttpRequest 对象
dataType
å¯éãè§å®é¢è®¡çæå¡å¨ååºçæ°æ®ç±»åã
é»è®¤å°ï¼jQuery å°æºè½å¤æã
å¯è½çç±»åï¼
· "xml"
· "html"
· "text"
· "script"
· "json"
· "jsonp"
举ä¾ï¼
$.get("test.xml", { name:"John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
post()æ¹æ³
post()æ¹æ³æ¬è´¨ä¸ä¸get()æ¹æ³æ¬è´¨ä¸æ²¡æ太大åºå«ï¼ä½æ¯GETæ¹å¼ä¸éåä¼ éæ°æ®éè¾å¤§çæ°æ®ï¼åæ¶ï¼å
¶è¯·æ±çåå²ä¿¡æ¯ä¼ä¿åå¨æµè§å¨çç¼åéï¼æä¸å®é£é©ãè以POSTæ¹å¼åæå¡å¨åéæ°æ®è¯·æ±ï¼åä¸åå¨è¿ä¸¤ä¸ªæ¹é¢çä¸è¶³ã
è¯æ³
$.post(url,data,success(data, textStatus,jqXHR),dataType)
举ä¾ï¼
$.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
$("span").html(result);
});
serialize()æ¹æ³
serialize()æ¹æ³ä¹æ¯ä¸ä¸ªé常æç¨çå½æ°ï¼å®å¯ä»¥ç´æ¥å°è¡¨åä¸çæ°æ®è½¬å为è½éAjaxä¼ éçå符串ï¼å³åºååæéçDOMå
ç´ ï¼ä½ä¸ºåéajax请æ±æ¶åéçæ°æ®ã
è¯æ³
$(selector).serialize()
举ä¾
$.post(âUser_Info.aspxâ, $(â#frmUserInfoâ).serialize(),function(data){
$(â#divTipâ).html(data);
});
ajax()æ¹æ³
é¤äºä»¥ä¸åget()ãpost()ãload()çæ¹æ³ä»¥å¤ï¼jQueryè¿æä¾äºæ´ä¸ºå¼ºæçåºå±å½æ°ajax()ï¼è¯¥æ¹æ³ä¸ä»
å¯ä»¥å¾æ¹ä¾¿å°å®ç°ä¸è¿°ä¸ä¸ªå
¨å±å½æ°å®æçåè½ï¼è¿æ´å¤çå
³æ³¨å®ç°è¿ç¨ä¸çç»èã
ajax()è¯æ³ï¼
$.ajax([options])
optionsåæ°å¦ä¸æ示ï¼
åæ°å
ç±»å
æè¿°
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 å°ä¸ä¼ä»æµè§å¨ç¼åä¸å 载请æ±ä¿¡æ¯ã
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 代ç ãä¸ä¼èªå¨ç¼åç»æã
"json": è¿å JSON æ°æ® ã
"jsonp": JSONP æ ¼å¼ãä½¿ç¨ JSONP å½¢å¼è°ç¨å½æ°æ¶ï¼å¦ "myurl?callback=?" jQuery å°èªå¨æ¿æ¢ ? 为æ£ç¡®çå½æ°åï¼ä»¥æ§è¡åè°å½æ°ã
error
Function
(é»è®¤: èªå¨å¤æ (xml æ html)) 请æ±å¤±è´¥æ¶å°è°ç¨æ¤æ¹æ³ãè¿ä¸ªæ¹æ³æä¸ä¸ªåæ°ï¼XMLHttpRequest 对象ï¼é误信æ¯ï¼ï¼å¯è½ï¼æè·çé误对象ã
function (XMLHttpRequest, textStatus, errorThrown) {// é常æ
åµä¸textStatusåerrorThownåªæå
¶ä¸ä¸ä¸ªæå¼this; // the options for this ajax request}
global
Boolean
(é»è®¤: true) æ¯å¦è§¦åå
¨å± AJAX äºä»¶ã设置为 false å°ä¸ä¼è§¦åå
¨å± AJAX äºä»¶ï¼å¦ ajaxStart æ ajaxStop ãå¯ç¨äºæ§å¶ä¸åçAjaxäºä»¶
ifModified
Boolean
(é»è®¤: false) ä»
å¨æå¡å¨æ°æ®æ¹åæ¶è·åæ°æ°æ®ãä½¿ç¨ HTTP å
Last-Modified 头信æ¯å¤æã
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({
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("
"+$(domEle).children("title").text()+"
"); }); }, complete: function(XMLHttpRequest,textStatus){ //HideLoading(); }, error: function(){ //请æ±åºéå¤ç } });
ajaxSetup()æ¹æ³
ç¨æ¥è®¾ç½®å
¨å±çAjaxãå¨ä½¿ç¨$.ajax()æ¶ï¼ææ¶éè¦è°ç¨å¤ä¸ª$.ajax()æ¹æ³ï¼å¦ææ¯ä¸ªæ¹æ³é½è®¾ç½®å
¶ä¸ç请æ±ç»èï¼å°ä¼æ¯ä¸ä»¶åå麻ç¦çäºï¼è¿å°±éè¦ajaxSetupçè¾
å©ã
举ä¾ï¼
$.ajaxSetup({
type:âGETâ,
url:âUserInfo.xmlâ,
dataType:âxmlâ
})
设置äºajax()æ¹æ³è¯·æ±çæ¹å¼ä¸ºGETï¼æ°æ®å°è´¨ä¸ºUserInfo.xmlï¼è¿åæ°æ®ç±»å为xml
ajaxäºä»¶
jQueryä¸æä¾äº6个å
¨å±çajaxäºä»¶ï¼è¯¦ç»å¦ä¸æè¿°ï¼
ajaxStart å
¨å±äºä»¶
å¼å§æ°çAjax请æ±ï¼å¹¶ä¸æ¤æ¶æ²¡æå
¶ä»ajax请æ±æ£å¨è¿è¡ã
ajaxSend å
¨å±äºä»¶
请æ±å¼å§å触åçå
¨å±äºä»¶
ajaxSuccess å
¨å±äºä»¶
å
¨å±ç请æ±æå
ajaxError å
¨å±äºä»¶
å
¨å±çåçé误æ¶è§¦å
ajaxComplete å
¨å±äºä»¶
å
¨å±ç请æ±å®ææ¶è§¦å
ajaxStop å
¨å±äºä»¶
å½æ²¡æAjaxæ£å¨è¿è¡ä¸çæ¶åï¼è§¦åã
举ä¾
$(â#divTipâ).ajaxStart(function(){
$(this).show();
});