摘要:今天我來談談技術。我簡要羅列一下幾種常見的技術動態腳本注入和圖片信標技術接下來我簡要談談我對這幾種技術的理解。該特性可以實現無阻塞加載腳本技術。和動態腳本注入類似,技術也有可跨域和無法發送非請求的問題。目前使用最多的技術手段就是利用技術。
今天我來談談Ajax技術。
Ajax是一種與服務器通信而無需重載頁面的方法。數據可以從服務器獲取或者發給服務器。
Ajax和異步分不開,但是本文重點部分不是異步,而是對實現Ajax的技術進行總結。
我簡要羅列一下幾種常見的Ajax技術:
動態腳本注入和JSON-P
圖片信標(Beacons)
XMLHttpRequest(XHR)技術
接下來我簡要談談我對這幾種技術的理解。
動態腳本注入之前的文章中談到,標簽作為DOM的一部分,可以由JavaScript調用DOM操作的接口動態創建。動態創建的元素可以為其設置src屬性并且插入到DOM樹中。此時異步線程會并行的去加載src資源,等到資源加載完成之后,其中的字符會當做JavaScript語句執行。
該技術是一個hack技術,它利用了瀏覽器的特性。該特性可以實現“無阻塞加載腳本”技術。更多細節可以移步:無阻塞加載腳本的理解。
除了在頁面初始化的時候可以使用動態腳本注入,Ajax技術也可以使用動態腳本注入的技術實現。動態腳本注入可以從服務器中請求數據。
首先我們需要將待請求數據的細節放在src中。因為src對應一個url,瀏覽器會將這個url作為GET請求發往相應的服務器,所以我們將請求數據作為查詢字符串寫入src。
服務器在收到請求后,會返回數據。但是這個數據必須以一段JavaScript腳本的形式返回。原因是瀏覽器收到響應數據后會將其當做JavaScript腳本執行。
也就是說,假設響應數據如果只是簡單的xml或者json數據,對于動態腳本注入來說,沒有任何意義。
因此服務器收到動態腳本注入中的GET請求時,需要返回一個約定好的表示JavaScript腳本的字符串。這段腳本還需要處理瀏覽器端需要的數據,比如:
dosomething([{"x": 1, "y": "haha"}]);
這段字符串返回之后就會被執行。其中dosomething就是約定好的一個回調函數名。這個回調函數已經在之前的腳本中定義好。
另外,我們還可以將回調函數名稱作為查詢字符串傳入,這樣服務器就可以動態的將回調函數作為響應數據中的一部分返回。
dosomething中的參數一個JSON數據,但是它在返回之后,會被當做JavaScript對象執行。由于這種特性,使用JSON的動態腳本注入又可以稱作所謂的“JSON-P”。
該技術還有兩個注意點:
動態腳本注入技術可以跨域訪問,不同域中返回的腳本可能截獲網站數據,導致安全問題,因此要小心使用。
動態腳本注入技術不能發送POST等非GET請求。然而,有些瀏覽器對GET請求有諸多限制(比如url字符數的限制),因此需要POST請求的Ajax,請考慮其他方法。
BeaconsBeacons技術很適合向服務器發送數據。
和上面的動態腳本注入類似,Beacons可以使用特定的DOM元素,利用src屬性向服務器發送數據,但是不需要服務器返回數據。
我們可以使用一個Image對象,設置src之后,該請求會從服務器返回一個圖片(一般是一個1*1的透明圖片)。這是最常用的方法。
var url = "...."; var params = [ "..", ".." ]; var img = new Image(); img.src = url + "?" + params.join("&");
如果響應中不需要任何數據,注意需要服務器設置狀態碼為204 No Content。
如果需要一定的消息返回,我們可以用一種變通的手法:設置返回圖片的寬度,不同的寬度代表不同的信息。這些信息可以在Image對象的onload事件中監聽。
img.onload = function(){ if (this.width === 1){ // ... } else if (this.width === 2){ // ... } // else if ... }
和動態腳本注入類似,Beacons技術也有可跨域和無法發送非GET請求的問題。
另外,也可以利用標簽來做類似的操作。
XMLHttpRequest目前Ajax使用最多的技術手段就是利用XMLHttpRequest技術。
XMLHttpRequest是一個特殊的構造函數,這個構造函數不在ECMA標準內,但是各大瀏覽器對其均支持良好。
直接上代碼:
var xhr = new XMLHttpRequest(); var url = "..."; var data; // 接受響應主體 var header; // 接受響應頭 var status; // 接收狀態碼 var statusText; // 接收狀態信息 xhr.onreadystatechange = function(){ // 監聽readyState變化 if (xhr.readyState === 4){ // 該值為4,表明響應結束 data = xhr.responseText; // 獲取響應主體 // or: data = xhr.responseXML; ... headers = xhr.getAllResponseHeaders(); // 獲取響應頭 status = xhr.status; // 獲取狀態碼 statusText = xhr.statusText; //獲取狀態信息 // do something... } } xhr.open("GET", url, true); // 開啟一個請求,true表示異步響應 xhr.setRequestHeader("..", ".."); // 設置請求頭 xhr.send(null); // 開始發送,參數是請求主體(用于POST請求)
XMLHttpRequest支持GET和POST請求,并且可以輕松設置請求主體和部分請求頭,也可以獲取響應主體和響應頭。雖然名稱叫XMLHttpRequest,但是事實上它支持各種不同的數據格式如JSON、HTML等。
但是注意,該技術是不能跨域訪問的,除非web服務器設置了允許跨域訪問策略。
另一個值得注意的地方就是:readyState的值為4,表明響應結束,但是我們也可以監聽其值為3的情況,該值表明響應正在進行,此時可以獲取部分響應主體。
readyState的值為0、1和2分別表示open()尚未調用、open()已調用,和接收到頭信息。這些用途相對較小。
更多詳情,請參見MDN中關于XMLHttpRequest的解釋:鏈接
結束文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90835.html
摘要:一概述什么是同步,什么是異步同步現象客戶端發送請求到服務器端,當服務器返回響應之前,客戶端都處于等待卡死狀態異步現象客戶端發送請求到服務器端,無論服務器是否返回響應,客戶端都可以隨意做其他事情,不會被卡死的運行原理頁面發起請求,會將請求發送 一、Ajax概述1.什么是同步,什么是異步同步現象:客戶端發送請求到服務器端,當服務器返回響應之前,客戶端都處于等待 卡死狀態異步現象:客戶...
摘要:我在面試前針對基礎也花了不少的時間,期間也將自己寫過的博文粗略地刷了一遍,同時也在網上找了不少比較好的資料部分是沒看完的。看面試題也是校驗自己是否真正理解了這個知識點,也很有可能會有新的收獲。 一、前言 只有光頭才能變強 回顧前面: 廣州三本找Java實習經歷 上一篇寫了自己面試的經歷和一些在面試的時候遇到的題目(筆試題和面試題)。 我在面試前針對Java基礎也花了不少的時間,期間也將...
摘要:前端最基礎的就是。一個朋友的問題,監測下載進度。這節主要是講如何使用,以及前端下載的核心操作。下載文件,并顯示進度條。下載文件,并顯示進度條下載文件上面已經實現了,那我們先說說如何顯示進度條。實現代碼如下,我們操作成讀流,然后統計長度。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(H...
摘要:前端最基礎的就是。一個朋友的問題,監測下載進度。這節主要是講如何使用,以及前端下載的核心操作。下載文件,并顯示進度條。下載文件,并顯示進度條下載文件上面已經實現了,那我們先說說如何顯示進度條。實現代碼如下,我們操作成讀流,然后統計長度。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(H...
閱讀 2907·2021-11-15 18:02
閱讀 3801·2021-10-14 09:43
閱讀 3733·2021-09-08 10:41
閱讀 2522·2019-08-30 15:53
閱讀 1804·2019-08-30 14:14
閱讀 1943·2019-08-29 16:12
閱讀 3139·2019-08-29 14:03
閱讀 1280·2019-08-29 13:46