Ajax原理一篇就夠了
前言
本文為轉載文,首發地址為GitHub部落格,文末附原文連結
AJAX即“Asynchronous Javascript And XML”,是指一種建立互動式網頁應用的網頁開發技術。AJAX 是一種用於建立快速動態網頁的技術。它可以令開發者只向伺服器獲取資料(而不是圖片,HTML文件等資源),網際網路資源的傳輸變得前所未有的輕量級和純粹,這激發了廣大開發者的創造力,使各式各樣功能強大的網路站點,和網際網路應用如雨後春筍一般冒出,不斷帶給人驚喜。
一、什麼是Ajax
Ajax是一種非同步請求資料的web開發技術,對於改善使用者的體驗和頁面效能很有幫助。簡單地說,在不需要重新重新整理頁面的情況下,Ajax 通過非同步請求載入後臺資料,並在網頁上呈現出來。常見運用場景有表單驗證是否登入成功、百度搜索下拉框提示和快遞單號查詢等等。Ajax的目的是提高使用者體驗,較少網路資料的傳輸量。
二、Ajax原理是什麼
在解釋Ajax原理之前,我們不妨先舉個“領導想找小李彙報一下工作”例子,領導想找小李問點事,就委託祕書去叫小李,自己就接著做其他事情,直到祕書告訴他小李已經到了,最後小李跟領導彙報工作。
Ajax請求資料流程與“領導想找小李彙報一下工作”類似。其中最核心的依賴是瀏覽器提供的XMLHttpRequest物件,它扮演的角色相當於祕書,使得瀏覽器可以發出HTTP請求與接收HTTP響應。瀏覽器接著做其他事情,等收到XHR返回來的資料再渲染頁面。
理解了Ajax的工作原理後,接下來我們探討下如何使用Ajax。
三、Ajax的使用
1.建立Ajax核心物件XMLHttpRequest(記得考慮相容性)
2.向伺服器傳送請求
-
method:請求的型別;GET 或 POST
-
url:檔案在伺服器上的位置
-
async:true(非同步)或 false(同步)
注意:post請求一定要設定請求頭的格式內容
3.伺服器響應處理(區分同步跟非同步兩種情況)
responseText 獲得字串形式的響應資料。
responseXML 獲得XML 形式的響應資料。
①同步處理
②非同步處理
相對來說比較複雜,要在請求狀態改變事件中處理。
什麼是readyState?
readyState是XMLHttpRequest物件的一個屬性,用來標識當前XMLHttpRequest物件處於什麼狀態。
readyState總共有5個狀態值,分別為0~4,每個值代表了不同的含義
-
0:未初始化 -- 尚未呼叫.open()方法;
-
1:啟動 -- 已經呼叫.open()方法,但尚未呼叫.send()方法;
-
2:傳送 -- 已經呼叫.send()方法,但尚未接收到響應;
-
3:接收 -- 已經接收到部分響應資料;
-
4:完成 -- 已經接收到全部響應資料,而且已經可以在客戶端使用了;
什麼是status?
HTTP狀態碼(status)由三個十進位制數字組成,第一個十進位制數字定義了狀態碼的型別,後兩個數字沒有分類的作用。HTTP狀態碼共分為5種類型:
常見的狀態碼
僅記錄在 RFC2616 上的 HTTP 狀態碼就達 40 種,若再加上 WebDAV(RFC4918、5842)和附加 HTTP 狀態碼 (RFC6585)等擴充套件,數量就達 60 餘種。接下來,我們就介紹一下這些具有代表性的一些狀態碼。
-
200 表示從客戶端發來的請求在伺服器端被正常處理了。
-
204 表示請求處理成功,但沒有資源返回。
-
301 表示永久性重定向。該狀態碼錶示請求的資源已被分配了新的URI,以後應使用資源現在所指的URI。
-
302 表示臨時性重定向。
-
304 表示客戶端傳送附帶條件的請求時(指採用GET方法的請求報文中包含if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一個首部)伺服器端允許請求訪問資源,但因發生請求未滿足條件的情況後,直接返回304Modified(伺服器端資源未改變,可直接使用客戶端未過期的快取)
-
400 表示請求報文中存在語法錯誤。當錯誤發生時,需修改請求的內容後再次傳送請求。
-
401 表示未授權(Unauthorized),當前請求需要使用者驗證
-
403 表示對請求資源的訪問被伺服器拒絕了
-
404 表示伺服器上無法找到請求的資源。除此之外,也可以在伺服器端拒絕請求且不想說明理由時使用。
-
500 表示伺服器端在執行請求時發生了錯誤。也有可能是Web應用存在的bug或某些臨時的故障。
-
503 表示伺服器暫時處於超負載或正在進行停機維護,現在無法處理請求。
③GET和POST請求資料區別
-
使用Get請求時,引數在URL中顯示,而使用Post方式,則放在send裡面
-
使用Get請求傳送資料量小,Post請求傳送資料量大
-
使用Get請求安全性低,會被快取,而Post請求反之
關於第一點區別,詳情見下面兩張圖:
四、結束語
其實通過 XMLHttpRequest或者封裝後的框架進行網路請求,這種方式已經有點老舊了,配置和呼叫方式非常混亂,近幾年剛剛出來的Fetch提供了一個更好的替代方法,它不僅提供了一種簡單,合乎邏輯的方式來跨網路非同步獲取資源,而且可以很容易地被其他技術使用。
想了解如何利用Fetch請求資料,請猛戳
fetch 如何請求常見資料格式
想了解Ajax如何請求後臺資料,請猛戳
Ajax請求後臺資料
原文:https://github.com/ljianshu/Blog/issues/45
最後:“相信有很多想學前端的小夥伴,今年年初我花了一個月整理了一份最適合2018年學習的web前端乾貨,從最基礎的HTML+CSS+JS到移動端HTML5等都有整理,送給每一位前端小夥伴,53763,1707這裡是小白聚集地,歡迎初學和進階中的小夥伴。”
祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峰。