ajax - 基於jQuery的介紹

標籤：表示   content   json格式   app   false   load   相同   常用   伺服器   

Ajax基礎補充

XMLHttpRequest對象有以下屬性和操作
屬性：
onreadystatechange
readyState
status
操作：

jQuery的ajax操作，常用函數如下：

$.ajax([options]) //底層的ajax方法
$.get(url, [data], [fn], [type]) //基於get的ajax
$.post(url, [data], [fn], [type]) //基於post的ajax
load(url, [data], [callback]) //這個是對象調用的方法(上面的是全域方法)，可以是get或post


上面4個函數相關參數的解釋：

url：請求路徑
data：向伺服器提交的資料
fb/cllback：回呼函數，有三個參數 function(resp, textStatus, xmlHttp)，相當於xmlhttp.onreadystatechenge = function(){}
data：伺服器返回的資料
info：返回的狀態
xmlHttp：ajax引擎對象
注意：get和post中的回掉函數只有請求成功才會執行
type：返回的資料類型
options：json格式的參數集合



函數逐個介紹：

$.ajax([options])方法
該方法參數是一個json對象，對象中的參數以索引值對形式存放，常用參數如下：

async：預設為true，表示非同步，設定為false則表示請求同步（給予jQuery validate的ajax表單校正時需要設定為同步）
data：發送到伺服器的資料，會自動轉換為請求字串格式，如果是get還會自動添加到url後面
dataType：預期伺服器返回的資料類型，若不指定則根據伺服器中返回的MIME類型（如application/json）自動判斷
type：提交方式，get或post
url：請求地址
success：請求成功後的回呼函數，格式為function(resp, textStatus, xmlHttp)
error：請求失敗後的回呼函數，格式為function(xmlHttp, textStatus, exception)
contentType：像伺服器發送的資料類型，用於data是json串的時候


$.get(url, [data], [fn], [type])方法
get提交方式
回呼函數格式為：function(resp, textStatus, xmlHttp)

$.post(url, [data], [fn], [type])方法
與get提交方法相同 只不過的提交方式是post

load(url, [data], [callback])

回呼函數格式為：function(resp, textStatus, xmlHttp)

此方法是所有ajax操作方法中唯一對象調用的方法，其他都是全域方法
如果提交時攜帶了請求參數(json資料格式或key/value字串)，即data部分存在即為post提交，data部分不存在即為get提交
在將伺服器返回的json格式的字串轉換成json格式對象時的格式是eval("("+json+")");
原因是：eval本身的問題。 由於json是以”{}”的方式來開始以及結束的，在JS中，它會被當成一個語句塊來處理，
所以必須強制性的將它轉換成一種運算式，因此要添加額外的()

表單序列化問題

如果想讓表單通過ajax非同步提交，那麼首先我們要通過js擷取到每個表單中輸入的值，
如果表單項比較多的話，想必又是一件很麻煩，很痛苦的事情，
此時我們可以通過jquery的表單序列化的操作將表單的資料拼接成提交的參數格式
即：name=value&name=value&name=value 或者 json格式對象

var res = $("表單的選取器").serialize(); //可以獲得表單的請求

ajax - 基於jQuery的介紹