一.什么是Ajax
Ajax(Asynchronous JavaScript and XML),可以理解為JavaScript執行異步網路請求。通俗的理解的話就是，如果沒有Ajax技術，改變網頁的一小部分（哪怕是一行文字、一張圖片）都需要重新加載一次整個頁面，而有了Ajax之后，就可以實作在網頁不跳轉不重繪的情況下，在網頁后臺提交資料，部分更新頁面內容。
二.Ajax的原生寫法
1.XMLHttpRequest物件
XMLHttpRequest 物件用于在后臺與服務器交換資料，能夠在不重新加載頁面的情況下更新網頁，在頁面已加載后從服務器請求資料，在頁面已加載后從服務器接收資料，在后臺向服務器發送資料。所以XMLHttpRequest物件是Ajax技術的核心所在。
2.實作流程
創建 XMLHttpRequest物件——>打開請求地址，初始化資料——>發送請求資料——>監聽回呼函式狀態——>收到服務器回傳的應答結果。
下面用具體的代碼進行解釋：
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();//在這里創建 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);//發送請求
xmlhttp.onreadystatechange=state_Change;//監聽回呼函式
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
function state_Change() //這里是回呼函式
{
if (xmlhttp.readyState==4&&xmlhttp.status==200)
//當滿足這兩個條件時表示請求成功,完成回應 4 = "loaded", 200 = OK
{
var data=https://bbs.csdn.net/topics/xmlhttp.responseText; //拿到服務器回傳的資料
// ...our code here...在這里進行資料回傳后的操作
}else
{
alert("Problem retrieving XML data");
}
}
3.原生寫法中的注意點
(1).open() 的第三個引數中使用了 "true",該引數規定請求是否異步處理，默認是異步。True 表示腳本會在 send() 方法之后繼續執行，而不等待來自服務器的回應。
(2).關于readyState
(3).關于status 由服務器回傳的 HTTP 狀態代碼，200 表示成功，而 404 表示 "Not Found" 錯誤。當 readyState 小于 3 的時候讀取這一屬性會導致一個例外。(后面會有http狀態碼的詳細解讀)
三.JQuery中的Ajax
JQuery對原生Ajax做了很好的封裝，使用起來非常簡單方便,具體的很多方法如 $.ajax，$.post， $.get， $.getJSON等能根據不同需要進行呼叫，寫法更加簡潔，但是為了兼顧各個方法在這里我以一個通用的方法 $.ajax為例做一個簡單的決議,按照下面的模式寫好各個引數,就能成功進行Ajax的請求了,可能在實際中使用 $.post， $.get 這兩個方法使用比較多，但是理解$.ajax 這個通用的方法能對封裝原理有很好的認識。
$.ajax({
type: //資料的提交方式：get和post
url: //請求地址
async: //是否支持異步重繪，默認是true
data: //需要提交的資料
dataType: //服務器回傳資料的型別，例如xml,String,Json等
success:function(data){
} //請求成功后的回呼函式,引數data就是服務器回傳的資料
error:function(data){
} //請求失敗后的回呼函式，根據需要可以不寫，一般只寫上面的success回呼函式
})
四.GET or POST？
作為Ajax最常用的兩種資料提交方式，GET和POST有著自己的特點和適用場景，正確區分GET和POST的不同并根據實際需要進行選用在開發中十分重要，簡單但是關鍵！
先上一張GET 和 POST的比較圖，從這張圖中可以看出兩者之間的差別：
從表格中拎出關鍵點： 1.傳遞資料的方式不同：get是直接把請求資料放在url的后面，是可見的，post的請求資料不會顯示在url中，是不可見的。 2.資料長度和資料型別的差異：get有資料長度的的限制，且資料型別只允許ASCII字符，post在這兩方面都沒有限制。 3.安全性的差異：get不安全，post更安全。
由此得出的兩者的使用場景：get使用較方便，適用于頁面之間非敏感資料的簡單傳值，post使用較為安全，適用于向服務器發送密碼、token等敏感資料。
五.success和complete的區別
JQuery封裝的Ajax回呼函式中，success、error、complete是最常用的三個，其中，success和error很好區別，一個是請求成功呼叫的，另一個是請求失敗呼叫的，從字面上就可以理解。但是success和complete容易混淆，在這里特別做一個說明：
success:請求成功后回呼函式。
complete:請求完成后回呼函式 (請求成功或失敗時均呼叫)。
注意到括號里面了嗎，沒錯，區別就在于complete只要請求完成，不論是成功還是失敗均會呼叫。也就是說如果呼叫了success，一定會呼叫complete；反過來呼叫了complete，不一定會呼叫success。(狀態碼404、403、301、302...都會進入complete，只要不出錯就會呼叫)
六.XML -> JSON
Ajax中的是 "x" 指的就是XML。
xml:可擴展標記語言，標準通用標記語言的子集，是一種用于標記電子檔案使其具有結構性的標記語言。
xml作為一種資料互動格式，廣泛用在計算機領域，然而，隨著json的發展，json以其明顯的優勢已經漸漸取代了xml成為現在資料互動格式的標準，所以在這里，想強調的是，json現在是主流的資料互動格式，前后端的互動標準，無論是前端提交給后臺的資料，還是后臺回傳給前端的資料，都最好統一為json格式，各自接收到資料后再決議資料即可供后續使用。所以 "Ajax" 實際上已經發展為 "Ajaj"
七.JSON和JSONP
json 和 jsonp 看起來只相差了一個 “p” ，然而實際上根本不是一個東西，千萬別以為是差不多的兩個概念。
json：(JavaScript Object Notation, JS 物件標記) 是一種輕量級的資料交換格式。
jsonp：一種借助 <script> 元素解決主流瀏覽器的跨域資料訪問問題的方式。
八.Ajax跨域訪問
ajax很好，但不是萬能的，ajax的請求與訪問同樣會受到瀏覽器同源策略的限制，不能訪問不同主域中的地址。所以，為了解決這一問題，實作跨域訪問，有很多種方式，上述提到的jsonp就是一種流行的方式，還有其他一些方式，我在這里就不展開說了，只是想說明ajax的使用也是有條件的，任何技術的實作都不會是沒有限制的。跨域訪問時一個很重要的知識點，之前專門寫過一篇關于跨域訪問的總結，還挺詳細的，可以移步查看： javascript中實作跨域的方式總結
九.再議HTTP狀態碼
前面提到的"200"、"404"只是http狀態碼中常見的兩個，當瀏覽者訪問一個網頁時，瀏覽者的瀏覽器會向網頁所在服務器發出請求。當瀏覽器接收并顯示網頁前，此網頁所在的服務器會回傳一個包含HTTP狀態碼的資訊頭（server header）用以回應瀏覽器的請求。
需要掌握的常見http狀態碼大致有以下一些：
101：切換協議，服務器根據客戶端的請求切換協議
**200：請求成功。一般用于GET與POST請求**
**301：永久重定向**
**302：臨時重定向**
303：與301類似。使用GET和POST請求查看
**304：請求資源未修改，使用快取**
307：與302類似。使用GET請求重定向
**404：客戶端請求失敗**
408：請求超時
**500：內部服務器錯誤，無法完成請求**
505:服務器不支持請求的HTTP協議的版本，無法完成處理
十.不可忽視的HTTP頭檔案
http請求中的一個重要關注點就是請求頭和回應頭的內容，從這兩個頭檔案中可以看出很多東西，當我們用發送一個ajax請求的時候，如果沒有達到預期的效果，那么就需要打開瀏覽器的除錯工具，從NetWork中找到相應的ajax請求，再通過查看請求頭和回應頭的資訊，大體會知道這次請求的結果是怎么樣的，結合回應的主體內容，可以很快找到問題。所以學會看http的頭檔案資訊是前端開發中必須掌握的一個技能，下面就來看看具體的頭檔案資訊。
首先隨便上一張sf中的完成一個搜索結果的http請求，可以從圖中的右側清楚看到請求頭和回應頭的內容，包括了很多個欄位資訊，這些欄位資訊就是我們需要掌握的知識點，下面挑出其中的重點欄位進行分析。
1.請求頭資訊：
Accept：客戶端支持的資料型別
Accept-Charset：客戶端采用的編碼
Accept-Encoding：客戶端支持的資料壓縮格式
Accept-Language：客戶端的語言環境
Cookie：客服端的cookie
Host：請求的服務器地址
Connection：客戶端與服務連接型別
If-Modified-Since:上一次請求資源的快取時間，與Last-Modified對應
If-None-Match：客戶段快取資料的唯一標識，與Etag對應
Referer:發起請求的源地址。
2.回應頭資訊：
content-encoding：回應資料的壓縮格式。
content-length：回應資料的長度。
content-language：語言環境。
content-type：回應資料的型別。
Date:訊息發送的時間
Age:經過的時間
Etag:被請求變數的物體值,用于判斷請求的資源是否發生變化
Expires：快取的過期時間
Last-Modified：在服務器端最后被修改的時間
server：服務器的型號
3.兩者都可能出現的訊息
Pragma：是否快取(http1.0提出) Cache-Control:是否快取(http1.1提出)
4.跟快取相關的欄位
(1) 強制快取 expire 和 cache-control
(2) 對比快取 Last-Modified 和 If-Modified-Since Etag 和 If-None-Match
十一.Ajax的優缺點
1.優點：
頁面無重繪，在頁面內與服務器通信，減少用戶等待時間，增強了用戶體驗。
使用異步方式與服務器通信，回應速度更快。
可以把一些原本服務器的作業轉接到客戶端，利用客戶端閑置的能力來處理，減輕了服務器和帶寬的負擔，節約空間和寬帶租用成本。
基于標準化的并被廣泛支持的技術，不需要下載插件或者小程式。
2.缺點：
無法進行操作的后退，即不支持瀏覽器的頁面后退。
對搜索引擎的支持比較弱。
可能會影響程式中的例外處理機制。
安全問題，對一些網站攻擊，如csrf、xxs、sql注入等不能很好地防御。
uj5u.com熱心網友回復：
所以是散分嘛？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/125259.html
標籤：JavaScript
上一篇：csdn寫博客居然搜索不到
下一篇：vue pc 端自適應螢屏