轉載自我的博客javascript
關於Ajax的概述就不說了,有興趣本身去找一下吧,而且建議去我博客看關於原生js實現Ajax函數的實現,但願有所幫助。服務器的配置,那篇文章也給出了地址。
Ajax入門(一)從0開始到一次成功的GET請求
Ajax入門(二)Ajax函數封裝php
jQuery 對 Ajax 作了大量的封裝,咱們使用起來也較爲方便,不須要去考慮瀏覽器兼容性。對於封裝的方式,jQuery採用了三層封裝:最底層的封裝方法爲:$.ajax(),而經過這層封裝了第二層有三種方法:.load()、$.get()和$.post(),最高層是$.getScript()和$.getJSON()方法。css
load()
方法/** * Ajax中的load方法(局部方法,能夠直接綁定在須要獲取的元素上) * @param {String} url 必須,獲取文件地址 * @param {JSON or String} 可選,鍵值對方式的請求參數或者(使用鍵值對形式,請求將轉化成post) * @param {Function} 可選,請求成功的回調函數 * @config {String} responseText 得到字符串形式的響應數據 * @config {String} textStatus 文本方式返回HTTP狀態碼 * @config {Object} XMLHttpRequest xhr對象,有多種屬性 */ .load(url, data, complete(responseText, textStatus, XMLHttpRequest));
例以下面這段代碼html
$('button').click(function () { $('#box').load('test.php', {url : 'guowen'}); });
在控制檯能夠看到請求爲POST,(注意:這裏第二個參數如果字符串的狀況,例如"url=guowen",請求仍然爲GET。)
因此服務器端php文件應該如此設置:java
<?php if ($_POST["url"] == "guowen") {//get請求把POST更改一下就行了 echo "<a href='http://guowenfh.github.io/'>三省吾身丶丶</a>"; } else { echo "其餘網站"; } ?>
關於XHR對象上的屬性,和HTTP狀態碼,參考我原來的博客。git
.load()方法是局部方法,由於他須要一個包含元素的 jQuery 對象做爲前綴。而$.get()和$.post()是全局方法,無須指定某個元素。對於用途而言,.load()適合作靜態文件的異步獲取,而對於須要傳遞參數到服務器頁面的,$.get()和$.post()更加合適。github
$.get()方法有四個參數,前面三個參數和.load()同樣,多了一個第四參數type,即服務器返回的內容格式:包括xml、html、script、json、jsonp和text。第一個參數爲必選參數,後面三個爲可選參數ajax
GET方式請求會直接在html後以?Key=value
跟隨,因此,有三種形式請求數據,json
直接跟在url後api
字符串形式的"url=guowen"
鍵值對形式的{url:"guowen"}
POST請求方式除去不能直接跟在url後以外,剩餘兩個,使用方法同樣
注意: 與.load()
方法不一樣的是:.load()
方法根據第二個參數的不一樣類型,請求方式會改變,但這裏已是兩個獨立的方法了,因此請求類型不會進行轉換。
第四個參數通常都不進行設置,jQuery會自動轉換其類型。強制設置時,有可能會連標籤一塊兒返回。
至於POST與GET方式請求的差異,在我原來的博客中也有寫到,這裏就不贅述了。
$.getScript()
和$.getJSON()
jQuery提供了一組用於特定異步加載的方法:$.getScript()
,用於加載特定的JS文件;$.getJSON()
,用於專門加載JSON文件。
$.getJSON()
方法與以前的使用方法相似,就是把第四個參數,類型強制設置成了JSON。
有時咱們但願可以特定的狀況再加載JS文件,而不是一開始把全部JS文件都加載了,這時就可使用$.getScript()
方法。
//點擊按鈕後再加載 JS 文件 $('input').click(function () { $.getScript('test.js'); });
$.ajax()
$.ajax()是全部 ajax 方法中最底層的方法,全部其餘方法都是基於$.ajax()方法的封裝。這個方法只有一個參數,傳遞一個各個功能鍵值對的對象。
參數不少有興趣的本身去看jQuery.ajax(),原本準備寫幾個經常使用的。強迫症犯了,去網上找資料作成了表格。。以下:
參數 | 類型 | 說明 |
---|---|---|
url | String | 發送請求的地址 |
type | String | 請求方式:POST 或 GET,默認 GET |
timeout | Number | 設置請求超時的時間(毫秒) |
data | Object 或String | 發送到服務器的數據,鍵值對字符串或對象 |
dataType | String | 返回的數據類型,好比 html、xml、json 等 |
beforeSend | Function | 發送請求前可修改 XMLHttpRequest 對象的函數 |
complete | Function | 請求完成後調用的回調函數 |
success | Function | 請求成功後調用的回調函數 |
error | Function | 請求失敗時調用的回調函數 |
global | Boolean | 默認爲 true,表示是否觸發全局 Ajax |
cache | Boolean | 設置瀏覽器緩存響應,默認爲 true。若是 dataType類型爲 script 或 jsonp 則爲 false。 |
content | DOM | 指定某個元素爲與這個請求相關的全部回調函數的上下文。 |
contentType | String | 指 定 請 求 內 容 的 類 型 。 默 認 爲application/x-www-form-urlencoded。 |
async | Boolean | 是否異步處理。默認爲 true,false 爲同步處理 |
processData | Boolean | 默認爲 true,數據被處理爲 URL 編碼格式。若是爲 false,則阻止將傳入的數據處理爲 URL 編碼的格式。 |
dataFilter | Function | 用來篩選響應數據的回調函數。 |
ifModified | Boolean | 默認爲 false,不進行頭檢測。若是爲true,進行頭檢測,當相應內容與上次請求改變時,請求被認爲是成功的。 |
jsonp | String | 指定一個查詢參數名稱來覆蓋默認的 jsonp 回調參數名 callback。 |
username | String | 在 HTTP 認證請求中使用的用戶名 |
password | String | 在 HTTP 認證請求中使用的密碼 |
scriptCharset | String | 當遠程和本地內容使用不一樣的字符集時,用來設置 script 和 jsonp 請求所使用的字符集。 |
xhr | Function | 用來提供 XHR 實例自定義實現的回調函數 |
traditional | Boolean | 默認爲 false,不使用傳統風格的參數序列化。如爲 true,則使用 |
最經常使用的以下:
$('button').click(function () { $.ajax({ type : 'POST', //這裏能夠換成 GET url : 'test.php', data : { url : 'guowen' }, success : function (response, stutas, xhr) { $('#box').html(response); } }); });
注意:對於data屬性,若是是GET、模式,可使用三種以前說所的三種形式。若是是POST模式可使用以前所說的兩種形式。(這裏不須要考慮以前的data類型的問題了,由於指定了請求類型,不會轉化)
使用表單序列化方法.serialize()
,會智能的獲取指定表單內的全部元素。這樣,在面對大量表單元素時,會把表單元素內容序列化爲字符串,而後再使用Ajax請求。
序列化表單內的元素:data : $('form').serialize()
,其他部分相同。
除此以外還能夠直接獲取單選框、複選框和下拉列表框等內容
除了.serialize()
方法,還有一個能夠返回 JSON 數據的方法:.serializeArray()
。這個方法能夠直接把數據整合成鍵值對的 JSON 對象。
使用方法相同$('form').serializeArray()
.
有時,咱們可能會在同一個程序中屢次調用$.ajax()方法。而它們不少參數都相同,這
個時候咱們課時使用 jQuery 提供的$.ajaxSetup()
請求默認值來初始化參數。
$('form input[type=button]').click(function () { $.ajaxSetup({//初始化多個ajax方法相同部分參數,後面再寫ajax的時候,就不用在寫了。 type : 'POST', url : 'test.php', data : $('form').serialize()//表單序列化 }); $.ajax({ success : function (response, status, xhr) { alert(response); } }); });
在使用 data 屬性傳遞的時候,若是是以對象形式傳遞鍵值對,可使用$.param()
方法將對象轉換爲字符串鍵值對格式。
主要是針對沒法直接使用表單序列化方法.serialize()
的狀況,且傳遞參數爲對象,建議使用該方法進行解析後再進行傳遞。
主要是處理網速較慢的狀況,出現請求時間較長的問題。而此時若沒有一點提示,用戶可能會認爲你的網頁出現了問題。如果能在請求過程當中給用戶一些提示,好比:正在努力加載中…… 。 可能會對用戶更加友好一些。
jQuery提供了兩個全局事件,jQuery 提供了兩個全局事件,.ajaxStart()
和.ajaxStop()
。
這兩個全局事件,只要用戶觸發了 Ajax,請求開始時(未完成其餘請求)激活.ajaxStart()
,請求結束時(全部請求都結束了)激活.ajaxStop()
。
值得注意的是,由於是全局事件,因此這兩個方法是直接須要直接綁定到document上的。例如:
$(document).ajaxStart(function(){ $(".loading").show(); }).ajaxStop(function(){ $(".loading").hide(); });
固然你也能夠自行在ajax內部進行一些設置,如請求超時時間,該ajax函數是否觸發全局事件等等。以鍵值對的方式寫明就能夠了。
錯誤處理也特別簡單
$.ajax({ //………… timeout : 500,//若是請求時間太長,能夠設置超時 global : false,//若是某個 ajax 不想觸發全局事件,能夠設置取消 error : function(xhr,errorText,errorType){//通常都直接用xhr對象 alert("發生錯誤:"+xhr.status);//返回錯誤狀態碼 } });
除此以外$.get()
、$.post()
和.load()
,能夠經過連綴處理使用局部.error()
方法來處理錯誤,固然還有一個全局的方法:經過全局.ajaxError()
事件方法來返回錯誤信息。便可
jQuery 對於 Ajax 操做提供了不少全局事件方法,除去上面已經提到的.ajaxStart()、.ajaxStop()、.ajaxError()等事件方法。他們都屬於請求時觸發的全局事件,除了這些,還有一些其餘全局事件:
.ajaxSuccess(),對應一個局部方法:.success(),請求成功完成時執行。
.ajaxComplete(),對應一個局部方法:.complete(),請求完成後註冊一個回調函數。
.ajaxSend(),沒有對應的局部方法,只有屬性 beforeSend,請求發送以前要綁定的函數。
注意:全局事件方法是全部 Ajax 請求都會觸發到,而且只能綁定在 document 上。而局部方法,則針對某個 Ajax。
對於一些全局事件方法的參數,大部分爲對象,而這些對象有哪些屬性或方法能調用,
能夠經過遍歷方法獲得。如:
//遍歷 settings 對象的屬性 $(document).ajaxSuccess(function (event, xhr, settings) { for (var i in settings) { console.log(i); } });
這些全局方法,在$.ajax()方法中均可以直接以參數中的鍵值對的形式來完成
其實在同一個域中時,只要url的後綴是json的文件的,默認就是json。固然你還可使用$.ajax()
方法設置 dataType屬性加載 JSON 文件。
先來試試本地JSON:
php以下:
<?php $_arr= array('a'=>1,'b'=>2,'c'=>3); $_result = json_encode($_arr); echo $_result; ?>
js:
$.ajax({ type:"post", url:"test.php", dataType:"json",//由於文件類型是php。可是返回的數據是json,因此必須設置類型,不然返回字符串 success:function(response,staus,xhr){ console.log(response.a);//打印出來1 } });
實現跨域:這部分須要服務器端配合。
<?php $_arr= array('a'=>1,'b'=>2,'c'=>3); $_result = json_encode($_arr); $_callback = $_GET['callback'];//關鍵在這。配合客戶端JS使用 echo $_callback."($_result)";//php用點號實現字符串拼接 ?>
客戶端實現:
$.ajax({//我本地地址爲http://127.0.0.1:8020/ajax.html type:"GET", url:"http://localhost/test.php?callback=?",//這樣就能夠實現跨域資源的訪問了,最後的?號,jQuery會自動轉化成字符串 dataType:"json",//若這裏使用JSONP的話,能夠刪除上面url的「?callback=?」,jQuery會自動處理。 success:function(response,staus,xhr){ alert(response.a); console.log(response) } });
固然咱們還能夠進行使用$.getJSON()
。使用方式同上。
在以前,咱們使用了局部方法:.success()、.complete()和.error()。這三個局部方法並非 XMLHttpRequest 對象調用的,而是$.ajax()之類的全局方法返回的對象調用的。這個對象,就是 jqXHR 對象,它是原生對象 XHR 的一個超集。
//獲取 jqXHR 對象,查看屬性和方法 var jqXHR = $.ajax({ type : 'POST', url : 'test.php', data : $('form').serialize() }); for (var i in jqXHR) { document.write(i + '<br />'); }
注意:若是使用 jqXHR 對象的話,那麼建議用.done()、.always()和.fail()代
替.success()、.complete()和.error()。覺得在將來版本中,極可能將這三種方法廢棄取消。
//成功後回調函數 jqXHR.done(function (response) { $('#box').html(response); });
使用 jqXHR 的連綴方式比$.ajax()的屬性方式有三大好處:
可連綴操做,可讀性大大提升;
能夠屢次執行同一個回調函數;
爲多個操做指定回調函數;
PS:不少都只作了一下測試,並不能熟練應用,先過一遍吧,之後再來熟練掌握。