JavaScript之Ajax


Ajax在前端開發中有着舉足輕重的地位,關於Ajax的使用和注意事項一直是一個重要的話題,借此機會,本文希望對Ajax做一個全面的總結,徹底揭開Ajax的神秘面紗。

一.什么是Ajax

不太理解Ajax的可以看下,前端工作筆記-關於Ajax的那些事的總結!

 

二.Ajax的原生寫法

不太理解Ajax的可以看下,前端工作筆記-關於Ajax的那些事的總結!

 

2.實現流程

創建 XMLHttpRequest對象——>打開請求地址,初始化數據——>發送請求數據——>監聽回調函數狀態——>收到服務器返回的應答結果。

下面用具體的代碼進行解釋:

不太理解Ajax的可以看下,前端工作筆記-關於Ajax的那些事的總結!

 

不太理解Ajax的可以看下,前端工作筆記-關於Ajax的那些事的總結!

 

不太理解Ajax的可以看下,前端工作筆記-關於Ajax的那些事的總結!

 

(3).關於status 由服務器返回的 HTTP 狀態代碼,200 表示成功,而 404 表示 "Not Found" 錯誤。當 readyState 小於 3 的時候讀取這一屬性會導致一個異常。(后面會有http狀態碼的詳細解讀)

不太理解Ajax的可以看下,前端工作筆記-關於Ajax的那些事的總結!

 

不太理解Ajax的可以看下,前端工作筆記-關於Ajax的那些事的總結!

 

四.GET or POST?

作為Ajax最常用的兩種數據提交方式,GET和POST有着自己的特點和適用場景,正確區分GET和POST的不同並根據實際需要進行選用在開發中十分重要,簡單但是關鍵!

先上一張GET 和 POST的比較圖,從這張圖中可以看出兩者之間的差別:

不太理解Ajax的可以看下,前端工作筆記-關於Ajax的那些事的總結!

 

不太理解Ajax的可以看下,前端工作筆記-關於Ajax的那些事的總結!

 

不太理解Ajax的可以看下,前端工作筆記-關於Ajax的那些事的總結!

 

不太理解Ajax的可以看下,前端工作筆記-關於Ajax的那些事的總結!

 

七.JSON和JSONP

不太理解Ajax的可以看下,前端工作筆記-關於Ajax的那些事的總結!

 

ajax很好,但不是萬能的,ajax的請求與訪問同樣會受到瀏覽器同源策略的限制,不能訪問不同主域中的地址。所以,為了解決這一問題,實現跨域訪問,有很多種方式,上述提到的jsonp就是一種流行的方式,還有其他一些方式,我在這里就不展開說了,只是想說明ajax的使用也是有條件的,任何技術的實現都不會是沒有限制的。跨域訪問時一個很重要的知識點,之前專門寫過一篇關於跨域訪問的總結,還挺詳細的,可以移步查看: javascript中實現跨域的方式總結

不太理解Ajax的可以看下,前端工作筆記-關於Ajax的那些事的總結!

 

十.不可忽視的HTTP頭文件

http請求中的一個重要關注點就是請求頭和響應頭的內容,從這兩個頭文件中可以看出很多東西,當我們用發送一個ajax請求的時候,如果沒有達到預期的效果,那么就需要打開瀏覽器的調試工具,從NetWork中找到相應的ajax請求,再通過查看請求頭和響應頭的信息,大體會知道這次請求的結果是怎么樣的,結合響應的主體內容,可以很快找到問題。所以學會看http的頭文件信息是前端開發中必須掌握的一個技能,下面就來看看具體的頭文件信息。

首先隨便上一張sf中的完成一個搜索結果的http請求,可以從圖中的右側清楚看到請求頭和響應頭的內容,包括了很多個字段信息,這些字段信息就是我們需要掌握的知識點,下面挑出其中的重點字段進行分析。

不太理解Ajax的可以看下,前端工作筆記-關於Ajax的那些事的總結!

 

1.請求頭信息:

Accept:客戶端支持的數據類型
Accept-Charset:客戶端采用的編碼
Accept-Encoding:客戶端支持的數據壓縮格式
Accept-Language:客戶端的語言環境
Cookie:客服端的cookie
Host:請求的服務器地址
Connection:客戶端與服務連接類型
If-Modified-Since:上一次請求資源的緩存時間,與Last-Modified對應
If-None-Match:客戶段緩存數據的唯一標識,與Etag對應
Referer:發起請求的源地址。
不太理解Ajax的可以看下,前端工作筆記-關於Ajax的那些事的總結!

 

3.兩者都可能出現的消息

Pragma:是否緩存(http1.0提出) Cache-Control:是否緩存(http1.1提出)

4.跟緩存相關的字段

(1) 強制緩存 expire 和 cache-control

(2) 對比緩存 Last-Modified 和 If-Modified-Since Etag 和 If-None-Match

不太理解Ajax的可以看下,前端工作筆記-關於Ajax的那些事的總結!

 

2.缺點:

  1. 無法進行操作的后退,即不支持瀏覽器的頁面后退。
  2. 對搜索引擎的支持比較弱。
  3. 可能會影響程序中的異常處理機制。
  4. 安全問題,對一些網站攻擊,如csrf、xxs、sql注入等不能很好地防御。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM