前言:
? ? ? ? 在現(xiàn)在的網(wǎng)頁設(shè)計(jì)中,大多數(shù)數(shù)據(jù)請求都使用的是異步請求方式,避免阻塞頁面加載蛀骇。Ajax 全稱是 asynchronous javascript and xml蜒灰,主要用來實(shí)現(xiàn)客戶端與服務(wù)器端的異步通信效果,實(shí)現(xiàn)頁面的局部刷新,從而創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。$.ajax 是 jQuery 底層 AJAX 實(shí)現(xiàn),$.ajax是一種通用的底層封裝盒至,$.ajax()請求數(shù)據(jù)之后,則需要使用回調(diào)函數(shù)士修,有beforeSend枷遂、error、dataFilter棋嘲、success酒唉、complete等。$.get沸移、 $.post是簡單易用的高層實(shí)現(xiàn)痪伦,我們使用$.get $.post方法,jQuery會自動封裝調(diào)用底層的$.ajax雹锣。
內(nèi)容:
?區(qū)別一:
? ? ? ? ?$.get 只處理簡單的 GET 請求功能以取代復(fù)雜 $.ajax网沾,請求成功時(shí)可調(diào)用回調(diào)函數(shù)。不支持出錯(cuò)時(shí)執(zhí)行函數(shù)蕊爵,否則必須使用$.ajax辉哥。如:$.get("url", { name: "John", id: "12345" } ) ,$.get方法在請求時(shí)會自動生成queryString提交給服務(wù)器(name=John&id=12345)在辆。
? ? ? ? ?$.post 只處理POST請求功能以取代復(fù)雜 $.ajax 证薇。請求成功時(shí)可調(diào)用回調(diào)函數(shù)。不支持出錯(cuò)時(shí)執(zhí)行函數(shù)匆篓,否則必須使用$.ajax浑度。$.post方法提交的數(shù)據(jù)直接類似表單提交,提交的數(shù)據(jù)量比$.get更大鸦概。
? ? ? ? $.ajax在不修改其屬性的條件下箩张,type=“get”,則實(shí)現(xiàn)方式跟$.get一致,type=“post”,則實(shí)現(xiàn)方式跟$.post一致窗市。
區(qū)別二:
? ? ? ?$.post和$.get發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類型的默認(rèn)contentType="application/x-www-form-urlencoded"先慷,這兩個(gè)方法不支持修改contentType,如果需要更改咨察,需要使用$.ajaxSetup({ contentType : 'application/json;charset=utf-8' });但是設(shè)置了該類型后论熙,后續(xù)所有請求編碼都變成了‘a(chǎn)pplication/json’。
? ? ? ?$.ajax則支持修改contentType摄狱,且更改的contentType僅適用于當(dāng)前請求脓诡,其他請求的contentType仍然適用默認(rèn)值,適合在一個(gè)頁面有多種不同內(nèi)容編碼方式時(shí)使用媒役。當(dāng)contentType=‘a(chǎn)pplication/json’時(shí)祝谚,需要對表單數(shù)據(jù)進(jìn)行轉(zhuǎn)換,并將轉(zhuǎn)換以后的值賦值給ajax的data屬性酣衷,轉(zhuǎn)換過程如下圖所示:
區(qū)別三:
? ? ? get請求通過URL(請求行)提交數(shù)據(jù)交惯,在URL中可以看到所傳參數(shù),而且傳輸數(shù)據(jù)量小不能大于2kb穿仪,一般用于查詢操作席爽;get請求返回的內(nèi)容可以被瀏覽器緩存起來,安全性不高啊片。
? ? ? post通過“請求體”傳遞數(shù)據(jù)拳昌,參數(shù)不會在url中顯示,安全性比get要高钠龙,傳輸數(shù)據(jù)量大默認(rèn)沒有限制炬藤,一般用于增刪改,瀏覽器不會緩存post請求返回的內(nèi)容碴里。
? ? ? ?當(dāng)然post和get都可以用于增刪改查沈矿,但是get不安全及傳輸數(shù)據(jù)量小 所以一般用于查詢操作。
小結(jié):
$.get(URL,data,function(data,status,xhr),dataType) 咬腋,get的官方語法羹膳;$(selector).post(URL,data,function(data,status,xhr),dataType) ,post的官方語法根竿;
$.ajax({name:value, name:value, ... }) ,ajax的官方語法陵像;
? ? ? ?就語法方面來說就珠,get和post都是括號中設(shè)置參數(shù),URL必需醒颖,其他參數(shù)為可選妻怎,ajax括號中是JSON格式的鍵值對,需要加上大花括慌⑶浮逼侦;就功能來說,get和post都是ajax的快捷實(shí)現(xiàn)腰耙,只能處理默認(rèn)屬性的請求榛丢,ajax可以執(zhí)行精確的需求控制,所有的 jQuery AJAX 方法都使用 ajax() 方法挺庞,該方法通常用于其他方法不能完成的請求晰赞。
? ? ? ajax常用的重要參數(shù)包括:data?規(guī)定要發(fā)送到服務(wù)器的數(shù)據(jù);dataType?預(yù)期的服務(wù)器響應(yīng)的數(shù)據(jù)類型选侨;type?規(guī)定請求的類型(GET 或 POST)宾肺;url?規(guī)定發(fā)送請求的 URL,默認(rèn)是當(dāng)前頁面侵俗;contentType 發(fā)送數(shù)據(jù)到服務(wù)器時(shí)所使用的內(nèi)容類型锨用。默認(rèn)是:"application/x-www-form-urlencoded"。常用的contentType如下:
1隘谣、application/x-www-form-urlencoded:最常見的POST提交數(shù)據(jù)方式增拥,原生form默認(rèn)的提交方式(可以使用enctype指定提交數(shù)據(jù)類型),jquery寻歧,zepto等默認(rèn)post請求提交的方式
2掌栅、multipart/form-data:使用表單上傳文件時(shí),必須指定表單的 enctype屬性值為 multipart/form-data. 請求體被分割成多部分码泛,每部分使用 --boundary分割猾封;
3、application/json:通過json的形式將數(shù)據(jù)發(fā)送給服務(wù)器噪珊。json的形式的優(yōu)點(diǎn)是它可以傳遞結(jié)構(gòu)復(fù)雜的數(shù)據(jù)形式晌缘,比如對象里面嵌套數(shù)組這樣的形式等。
4痢站、binary (application/octet-stream):只能提交二進(jìn)制磷箕,而且只能提交一個(gè)二進(jìn)制,如果提交文件的話阵难,只能提交一個(gè)文件岳枷,后臺接收參數(shù)只能有一個(gè),而且只能是流(或者字節(jié)數(shù)組)。