Ajax 的全面總結
Ajax在前端開發中有著舉足輕重的地位,關於Ajax的使用和注意事項一直是一個重要的話題,藉此機會,本文希望對Ajax做一個全面的總結,徹底揭開Ajax的神秘面紗。
一.什麼是Ajax
Ajax(Asynchronous JavaScript and XML),可以理解為JavaScript執行非同步網路請求。通俗的理解的話就是,如果沒有Ajax技術,改變網頁的一小部分(哪怕是一行文字、一張圖片)都需要重新載入一次整個頁面,而有了Ajax之後,就可以實現在網頁不跳轉不刷新的情況下,在網頁後台提交數據,部分更新頁面內容。
二.Ajax的原生寫法
1.XMLHttpRequest對象
XMLHttpRequest 對象用於在後台與伺服器交換數據,能夠在不重新載入頁面的情況下更新網頁,在頁面已載入後從伺服器請求數據,在頁面已載入後從伺服器接收數據,在後台向伺服器發送數據。所以XMLHttpRequest對象是Ajax技術的核心所在。
2.實現流程
創建 XMLHttpRequest對象——>打開請求地址,初始化數據——>發送請求數據——>監聽回調函數狀態——>收到伺服器返回的應答結果。
下面用具體的代碼進行解釋:
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 這個通用的方法能對封裝原理有很好的認識。
四.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:一種藉助 元素解決主流瀏覽器的跨域數據訪問問題的方式。
八.Ajax跨域訪問
ajax很好,但不是萬能的,ajax的請求與訪問同樣會受到瀏覽器同源策略的限制,不能訪問不同主域中的地址。所以,為了解決這一問題,實現跨域訪問,有很多種方式,上述提到的jsonp就是一種流行的方式,還有其他一些方式,我在這裡就不展開說了,只是想說明ajax的使用也是有條件的,任何技術的實現都不會是沒有限制的。跨域訪問時一個很重要的知識點,之前專門寫過一篇關於跨域訪問的總結,還挺詳細的,可以移步查看: javascript中實現跨域的方式總結
九.再議HTTP狀態碼
前面提到的"200"、"404"只是http狀態碼中常見的兩個,當瀏覽者訪問一個網頁時,瀏覽者的瀏覽器會向網頁所在伺服器發出請求。當瀏覽器接收並顯示網頁前,此網頁所在的伺服器會返回一個包含HTTP狀態碼的信息頭(server header)用以響應瀏覽器的請求。
需要掌握的常見http狀態碼大致有以下一些:
十.不可忽視的HTTP頭文件
http請求中的一個重要關注點就是請求頭和響應頭的內容,從這兩個頭文件中可以看出很多東西,當我們用發送一個ajax請求的時候,如果沒有達到預期的效果,那麼就需要打開瀏覽器的調試工具,從NetWork中找到相應的ajax請求,再通過查看請求頭和響應頭的信息,大體會知道這次請求的結果是怎麼樣的,結合響應的主體內容,可以很快找到問題。所以學會看http的頭文件信息是前端開發中必須掌握的一個技能,下面就來看看具體的頭文件信息。
1.請求頭信息:
2.響應頭信息:
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注入等不能很好地防禦。
作者:山外de樓
※2017 Web 開發安全問題 TOP10,看看中槍了沒?
※webRTC——瀏覽器里的音視頻通話
※和 Firebug 說再見 Firefox 宣布 Firebug 的壽命即將終止
※前端小白到30K月薪的路徑有哪些
※vscode 將在下個穩定版本換回藍色 logo!
TAG:JavaScript |