$.ajax({
type:"POST",
url:"xxx",
data:"aaa",
async:ture, //true是異步請求，請求開始后综膀，其它代碼依然可以執(zhí)行
success:function(data){ //data是后臺返回的數(shù)據(jù)
//code
}
})
$('#btn1').click(function(){
$.ajax({
cache:true,//保留緩存數(shù)據(jù)
type:"POST",//為post請求
url:"FormTest",//這是我在后臺接受數(shù)據(jù)的文件名
data:$('#loginForm').serialize(),//將該表單序列化
async:false,//設(shè)置成true剧劝，這標志著在請求開始后，其他代碼依然能夠執(zhí)行。如果把這個選項設(shè)置成false谣妻，這意味著所有的請求都不再是異步的了卒稳，這也會導致瀏覽器被鎖死
error:function(request){//請求失敗之后的操作
return;
},
success:function(data){//請求成功之后的操作
console.log("success");
}
});
})
轉(zhuǎn)載自：https://segmentfault.com/a/1190000010832550
Ajax的全面總結(jié)
山外de樓 2017年08月24日發(fā)布
- 贊 | 6 收藏 | 84
- 1.7k 次瀏覽
Ajax在前端開發(fā)中有著舉足輕重的地位，關(guān)于Ajax的使用和注意事項一直是一個重要的話題湃窍，借此機會匪傍，本文希望對Ajax做一個全面的總結(jié)觉痛，徹底揭開Ajax的神秘面紗。
一.什么是Ajax
Ajax(Asynchronous JavaScript and XML),可以理解為JavaScript執(zhí)行異步網(wǎng)絡(luò)請求手蝎。通俗的理解的話就是俐芯，如果沒有Ajax技術(shù)，改變網(wǎng)頁的一小部分（哪怕是一行文字邮辽、一張圖片）都需要重新加載一次整個頁面贸营，而有了Ajax之后，就可以實現(xiàn)在網(wǎng)頁不跳轉(zhuǎn)不刷新的情況下钞脂，在網(wǎng)頁后臺提交數(shù)據(jù)冰啃，部分更新頁面內(nèi)容。
二.Ajax的原生寫法
1.XMLHttpRequest對象
XMLHttpRequest 對象用于在后臺與服務器交換數(shù)據(jù)阎毅，能夠在不重新加載頁面的情況下更新網(wǎng)頁，在頁面已加載后從服務器請求數(shù)據(jù)汪榔，在頁面已加載后從服務器接收數(shù)據(jù)，在后臺向服務器發(fā)送數(shù)據(jù)雌团。所以XMLHttpRequest對象是Ajax技術(shù)的核心所在士聪。
2.實現(xiàn)流程
創(chuàng)建 XMLHttpRequest對象——>打開請求地址，初始化數(shù)據(jù)——>發(fā)送請求數(shù)據(jù)——>監(jiān)聽回調(diào)函數(shù)狀態(tài)——>收到服務器返回的應答結(jié)果灵寺。
下面用具體的代碼進行解釋：
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();//在這里創(chuàng)建 XMLHttpRequest對象
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.open("GET",url,true); //請求的方式和請求地址
xmlhttp.send(null);//發(fā)送請求
xmlhttp.onreadystatechange=state_Change;//監(jiān)聽回調(diào)函數(shù)
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
function state_Change() //這里是回調(diào)函數(shù)
{
if (xmlhttp.readyState==4&&xmlhttp.status==200)
//當滿足這兩個條件時表示請求成功,完成響應 4 = "loaded", 200 = OK
{
var data=xmlhttp.responseText; //拿到服務器返回的數(shù)據(jù)
// ...our code here...在這里進行數(shù)據(jù)返回后的操作
}else
{
alert("Problem retrieving XML data");
}
}
3.原生寫法中的注意點
(1).open() 的第三個參數(shù)中使用了 "true",該參數(shù)規(guī)定請求是否異步處理区岗，默認是異步。True 表示腳本會在 send() 方法之后繼續(xù)執(zhí)行叮称，而不等待來自服務器的響應藐鹤。
(2).關(guān)于readyState
[圖片上傳失敗...(image-590888-1523107830436)]
(3).關(guān)于status
由服務器返回的 HTTP 狀態(tài)代碼，200 表示成功挠蛉，而 404 表示 "Not Found" 錯誤肄满。當 readyState 小于 3 的時候讀取這一屬性會導致一個異常。(后面會有http狀態(tài)碼的詳細解讀)
三.JQuery中的Ajax
JQuery對原生Ajax做了很好的封裝讥电，使用起來非常簡單方便,具體的很多方法如 $.ajax轧抗，$.post， $.get横媚， $.getJSON等能根據(jù)不同需要進行調(diào)用，寫法更加簡潔恢口，但是為了兼顧各個方法在這里我以一個通用的方法 $.ajax為例做一個簡單的解析,按照下面的模式寫好各個參數(shù),就能成功進行Ajax的請求了,可能在實際中使用 $.post穷躁， $.get 這兩個方法使用比較多，但是理****解$.ajax 這個通用的方法能對封裝原理有很好的認識猿诸。
$.ajax({
type: //數(shù)據(jù)的提交方式：get和post
url: //請求地址
async: //是否支持異步刷新，默認是true
data: //需要提交的數(shù)據(jù)
dataType: //服務器返回數(shù)據(jù)的類型址芯，例如xml,String,Json等
success:function(data){
} //請求成功后的回調(diào)函數(shù),參數(shù)data就是服務器返回的數(shù)據(jù)
error:function(data){
} //請求失敗后的回調(diào)函數(shù)窜觉，根據(jù)需要可以不寫，一般只寫上面的success回調(diào)函數(shù)
})
四.GET or POST旬陡？
作為Ajax最常用的兩種數(shù)據(jù)提交方式语婴，GET和POST有著自己的特點和適用場景，正確區(qū)分GET和POST的不同并根據(jù)實際需要進行選用在開發(fā)中十分重要，簡單但是關(guān)鍵啥繁！
先上一張GET 和 POST的比較圖，從這張圖中可以看出兩者之間的差別：
[圖片上傳失敗...(image-62c75e-1523107830436)]
從表格中拎出關(guān)鍵點：
1.傳遞數(shù)據(jù)的方式不同：get是直接把請求數(shù)據(jù)放在url的后面酬核，是可見的适室，post的請求數(shù)據(jù)不會顯示在url中，是不可見的蔬螟。
2.數(shù)據(jù)長度和數(shù)據(jù)類型的差異：get有數(shù)據(jù)長度的的限制汽畴，且數(shù)據(jù)類型只允許ASCII字符，post在這兩方面都沒有限制鲁猩。
3.安全性的差異：get不安全罢坝，post更安全。
由此得出的兩者的使用場景：get使用較方便，適用于頁面之間非敏感數(shù)據(jù)的簡單傳值男应，post使用較為安全是尔，適用于向服務器發(fā)送密碼、token等敏感數(shù)據(jù)薪铜。
五.success和complete的區(qū)別
JQuery封裝的Ajax回調(diào)函數(shù)中恩溅，success、error蜒滩、complete是最常用的三個奶稠，其中，success和error很好區(qū)別锌订，一個是請求成功調(diào)用的，另一個是請求失敗調(diào)用的啦辐，從字面上就可以理解蜈项。但是success和complete容易混淆，在這里特別做一個說明：
success:請求成功后回調(diào)函數(shù)侥衬。
complete:請求完成后回調(diào)函數(shù) (請求成功或失敗時均調(diào)用)跑芳。
注意到括號里面了嗎，沒錯肘习，區(qū)別就在于complete只要請求完成坡倔，不論是成功還是失敗均會調(diào)用脖含。也就是說如果調(diào)用了success投蝉，一定會調(diào)用complete；反過來調(diào)用了complete关拒，不一定會調(diào)用success庸娱。(狀態(tài)碼404、403归露、301斤儿、302...都會進入complete，只要不出錯就會調(diào)用)
六.XML -> JSON
Ajax中的是 "x" 指的就是XML疆液。
xml:可擴展標記語言陕贮，標準通用標記語言的子集，是一種用于標記電子文件使其具有結(jié)構(gòu)性的標記語言飘蚯。
xml作為一種數(shù)據(jù)交互格式局骤，廣泛用在計算機領(lǐng)域暴凑，然而，隨著json的發(fā)展现喳，json以其明顯的優(yōu)勢已經(jīng)漸漸取代了xml成為現(xiàn)在數(shù)據(jù)交互格式的標準，所以在這里嗦篱，想強調(diào)的是，json現(xiàn)在是主流的數(shù)據(jù)交互格式诫欠，前后端的交互標準，無論是前端提交給后臺的數(shù)據(jù)轿偎，還是后臺返回給前端的數(shù)據(jù)被廓，都最好統(tǒng)一為json格式，各自接收到數(shù)據(jù)后再解析數(shù)據(jù)即可供后續(xù)使用昆婿。所以 "Ajax" 實際上已經(jīng)發(fā)展為 "Ajaj"
七.JSON和JSONP
json 和 jsonp 看起來只相差了一個 “p” 亦渗，然而實際上根本不是一個東西，千萬別以為是差不多的兩個概念多律。
json：(JavaScript Object Notation, JS 對象標記) 是一種輕量級的數(shù)據(jù)交換格式搂蜓。
jsonp：一種借助“<script>”元素解決主流瀏覽器的跨域數(shù)據(jù)訪問問題的方式。
八.Ajax跨域訪問
ajax很好相味，但不是萬能的殉挽，ajax的請求與訪問同樣會受到瀏覽器同源策略的限制，不能訪問不同主域中的地址一死。所以傻唾，為了解決這一問題，實現(xiàn)跨域訪問伪煤，有很多種方式凛辣，上述提到的jsonp就是一種流行的方式，還有其他一些方式蝙砌，我在這里就不展開說了，只是想說明ajax的使用也是有條件的择克，任何技術(shù)的實現(xiàn)都不會是沒有限制的肚邢。跨域訪問時一個很重要的知識點骡湖，之前專門寫過一篇關(guān)于跨域訪問的總結(jié)响蕴，還挺詳細的，可以移步查看：
javascript中實現(xiàn)跨域的方式總結(jié)
九.再議HTTP狀態(tài)碼
前面提到的"200"浦夷、"404"只是http狀態(tài)碼中常見的兩個劈狐，當瀏覽者訪問一個網(wǎng)頁時，瀏覽者的瀏覽器會向網(wǎng)頁所在服務器發(fā)出請求肥缔。當瀏覽器接收并顯示網(wǎng)頁前续膳，此網(wǎng)頁所在的服務器會返回一個包含HTTP狀態(tài)碼的信息頭（server header）用以響應瀏覽器的請求。
需要掌握的常見http狀態(tài)碼大致有以下一些：
101：切換協(xié)議坟岔，服務器根據(jù)客戶端的請求切換協(xié)議
200：請求成功炮车。一般用于GET與POST請求
301：永久重定向
302：臨時重定向
303：與301類似酣溃。使用GET和POST請求查看
304：請求資源未修改，使用緩存
307：與302類似扛或。使用GET請求重定向
404：客戶端請求失敗
408：請求超時
500：內(nèi)部服務器錯誤碘饼，無法完成請求
505:服務器不支持請求的HTTP協(xié)議的版本悲伶，無法完成處理
十.不可忽視的HTTP頭文件
http請求中的一個重要關(guān)注點就是請求頭和響應頭的內(nèi)容住涉，從這兩個頭文件中可以看出很多東西舆声，當我們用發(fā)送一個ajax請求的時候，如果沒有達到預期的效果媳握，那么就需要打開瀏覽器的調(diào)試工具蛾找，從NetWork中找到相應的ajax請求，再通過查看請求頭和響應頭的信息打毛，大體會知道這次請求的結(jié)果是怎么樣的隘冲，結(jié)合響應的主體內(nèi)容，可以很快找到問題展辞。所以學會看http的頭文件信息是前端開發(fā)中必須掌握的一個技能罗珍，下面就來看看具體的頭文件信息。
首先隨便上一張sf中的完成一個搜索結(jié)果的http請求蘸朋，可以從圖中的右側(cè)清楚看到請求頭和響應頭的內(nèi)容扣唱，包括了很多個字段信息，這些字段信息就是我們需要掌握的知識點炼彪，下面挑出其中的重點字段進行分析正歼。
[圖片上傳失敗...(image-40afef-1523107830436)]
1.請求頭信息：
Accept：客戶端支持的數(shù)據(jù)類型
Accept-Charset：客戶端采用的編碼
Accept-Encoding：客戶端支持的數(shù)據(jù)壓縮格式
Accept-Language：客戶端的語言環(huán)境
Cookie：客服端的cookie
Host：請求的服務器地址
Connection：客戶端與服務連接類型
If-Modified-Since:上一次請求資源的緩存時間，與Last-Modified對應
If-None-Match：客戶段緩存數(shù)據(jù)的唯一標識喜爷，與Etag對應
Referer:發(fā)起請求的源地址。
2.響應頭信息：
content-encoding：響應數(shù)據(jù)的壓縮格式术幔。
content-length：響應數(shù)據(jù)的長度轿塔。
content-language：語言環(huán)境。
content-type：響應數(shù)據(jù)的類型揍障。
Date:消息發(fā)送的時間
Age:經(jīng)過的時間
Etag:被請求變量的實體值,用于判斷請求的資源是否發(fā)生變化
Expires：緩存的過期時間
Last-Modified：在服務器端最后被修改的時間
server：服務器的型號
3.兩者都可能出現(xiàn)的消息
Pragma：是否緩存(http1.0提出)
Cache-Control:是否緩存(http1.1提出)
4.跟緩存相關(guān)的字段
(1) 強制緩存
expire 和 cache-control
(2) 對比緩存
Last-Modified 和 If-Modified-Since
Etag 和 If-None-Match
十一.Ajax的優(yōu)缺點
1.優(yōu)點：
1.頁面無刷新毒嫡，在頁面內(nèi)與服務器通信幻梯，減少用戶等待時間，增強了用戶體驗碘梢。
2.使用異步方式與服務器通信煞躬，響應速度更快。
3.可以把一些原本服務器的工作轉(zhuǎn)接到客戶端恩沛，利用客戶端閑置的能力來處理，減輕了服務器和帶寬的負擔芒珠，節(jié)約空間和寬帶租用成本搅裙。
4.基于標準化的并被廣泛支持的技術(shù)部逮，不需要下載插件或者小程序。
2.缺點：
1.無法進行操作的后退存炮，即不支持瀏覽器的頁面后退蜈漓。
2.對搜索引擎的支持比較弱。
3.可能會影響程序中的異常處理機制融虽。
4.安全問題有额，對一些網(wǎng)站攻擊，如csrf茴迁、xxs萤衰、sql注入等不能很好地防御。
