load()方法通常用來從Web服務器上獲取靜態的數據文件,然而這並不能體現ajax的全部價值。
鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm
在項目中,如果需要傳遞一些參數給服務器中的頁面,那麼可以使用$.get()或者$.post()方法(或者是$.ajax()方法)
$.get()方法使用GET方式來進行異步請求。結構為:$.get(url [, data] [, callback] [, type])
$.get()方法參數解釋如下:
參數名稱 類型 說明 url String 請求的HTML頁的URL地址 data(可選) Object 發送至服務器的key/value數據會作為QueryString附加到請求URL中 callback(可選) Function 載入成功時回調函數(只有當Response的返回狀態是success才調用該方法)自動將請求結果和狀態傳遞給該方法 type(可選) String 服務器端返回內容的格式,包括xml、html、script、json、text和_default$.post()方法。
$.post()和$.get()方法的結構和使用方式相同,不過它們之間仍然有以下區別:
$.getScript():jQuery提供了此方法來直接加載js文件,與加載一個HTML片段一樣簡單方便,並且不需要對JavaScript文件進行處理,JavaScript文件會自動執行。
jQuery代碼如下:
$(function () { $("#send").click(function () { $.getScript("test.js"); }); })
與其他ajax方法一樣,$.getScript()方法也有回調函數,它會在JavaScript文件載入成功後運行。
例如:想載入jQuery官方顏色動畫插件(jquery.color.js),成功後給元素綁定顏色變化動畫:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script> <style> * { margin:0; padding:0;} body { font-size:12px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} .block{width:80px;height:80px;background:#DDD;} </style> <title></title> </head> <body> <button id="go">運行</button> <div class="block"></div> </body> <script type="text/javascript"> $(function () { $.getScript("jquery.color.js", function () { $("#go").click(function () { $(".block").animate({backgroundColor: 'pink'}, 1000) .animate({backgroundColor: 'blue'}, 1000); }); }) }) </script> </html>
$.getJson():該方法用於加載JSON文件,用法與$.getScript()相同。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="../../js/jquery-2.1.3.js"></script> <style> * { margin:0; padding:0;} body { font-size:12px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} </style> <title></title> </head> <body> <br/> <p> <input type="button" id="send" value="加載"/> </p> <div class="comment">已有評論:</div> <div id="resText" > </div> </body> <script type="text/javascript"> $(function () { $('#send').click(function() { $.getJSON('test.json', function(data) { $('#resText').empty(); var html = ''; $.each( data , function(commentIndex, comment) { html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>'; }) $('#resText').html(html); }) }) }) </script> </html>
test.json文件為:
[ { "username": "張三", "content": "沙發." }, { "username": "李四", "content": "板凳." }, { "username": "王五", "content": "地板." } ]
使用JSONP形式的回調函數來加載其他網站的JSON數據。例如:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="../../js/jquery-2.1.3.js"></script> <style> * { margin:0; padding:0;} body { font-size:12px;} .para { width:100px; height:100px; margin:5px; border:0; } </style> <title></title> </head> <body> <p> <input type="button" id="send" value="加載"/> </p> <div id="resText" > </div> </body> <script type="text/javascript"> $(function () { $('#send').click(function() { $.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function( i,item ){ $("<img class='para'/> ").attr("src", item.media.m).appendTo("#resText"); if ( i == 3 ) { return false; } }); } ); }) }) /** * JSONP(JSON with Padding)是一個非官方的協議,它允許在服務器端集成Script tags返回至客戶端,通過JavaScript Callback的形式實現跨域訪問 * 上述的url地址並不能請求到數據,僅用作說明。 * */ </script> </html>
注意:
$.ajax()方法時jQuery最底層的ajax實現。它的結構為:
$.ajax(options).該方法只有一個參數,但在這個對象裡包含了$.ajax()方法所需要的請求設置以及回調函數等信息,參數以key/value的形式存在,所有參數都是可選的,
常用參數列表為:
參數名稱 類型 說明 url String (默認為當前頁地址)發送請求的地址 type String 請求方式(post或get)默認為get。注意其他HTTP請求方法,如PUT何DELETE也可以使用,但僅部分浏覽器支持 timeout Number 設置請求超時時間(毫秒)。此設置將覆蓋$.ajaxSetup()方法的全局設置 data Object或String 發送到服務器的數據。如果不是字符串,將自動轉換為字符串格式。GET請求中將附加在url後。防止這種自動轉換,可以查看processData選項。對象必須為key/value格式,例如{foo1:"bar1", foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組,jQuery將自動為不同值對應同一個名稱。例如{foo:["bar1", "bar2"]}轉換為&foo=bar1&foo=bar2 dataType String預期服務器返回的數據類型。如果不指定,jQuery將自動根據HTTP包MIME信息返回responseXML或responseText,並作為回調函數參數傳遞。可用的類型如下。
xml:返回XML文檔,可用jQuery處理
html:返回純文本HTML信息;包含的script標簽會在插入DOM時執行
script:返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時(不在同一個域下),所有POST請求都將轉為GET請求。
json:返回JSON數據
jsonp:JSONP格式。使用JSONP形式調用函數時,例如myurl?callback=?,jQuery將自動替換後一個”?“為正確的函數名,以執行回調函數。
text:返回純文本字符串
beforeSend Function發送請求前可以修改XMLHttpRequest對象的函數,例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次Ajax請求。XMLHttpRequest對象是唯一的參數。
function(XMLHttpRequest) {
this;//調用本次Ajax請求時傳遞的options參數
}
complete Function請求完成後調用的回調函數(請求成功或失敗時均調用)
參數:XMLHttpRequest對象和一個描述成功請求類型的字符串。
function(XMLHttpRequest, textStatue){
this;//調用本次Ajax請求時傳遞的options參數
}
success Function請求成功後調用的回調函數,有兩個參數。
(1)由服務器返回,並根據dataType參數進行處理後的數據
(2)描述狀態的字符串
function(data, textStatus) {
//data可能是xmlDoc、jsonObj、html、text等
this;//調用本次Ajax請求時傳遞的options參數
}
error Function請求失敗時被調用的函數。該函數有3個參數,即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。
Ajax事件函數如下:
function(XMLHttpRequest, textStatus, errorThrown) {
//通常情況下textStatus和errorThrown只有其中一個包含信息
this;//調用本次Ajax請求時傳遞的options參數
}
global Boolean 默認為true。表示是否觸發全局Ajax事件。設置為false將不會觸發全局Ajax事件,AjaxStart或AjaxStop可用於控制各種Ajax事件jQuery權威指南 PDF版中文+配套源代碼 http://www.linuxidc.com/Linux/2013-10/91059.htm
jQuery實戰 中文PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90631.htm
《jQuery即學即用(雙色)》 PDF+源代碼 http://www.linuxidc.com/Linux/2013-09/90383.htm
鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm
jQuery完成帶復選框的表格行高亮顯示 http://www.linuxidc.com/Linux/2013-08/89406.htm
jQuery基礎教程(第4版) PDF 完整高清版+配套源碼 http://www.linuxidc.com/Linux/2014-03/98162.htm
--------------------------------------分割線 --------------------------------------
jQuery 的詳細介紹:請點這裡
jQuery 的下載地址:請點這裡