是通過xmlHttPRequest對象來實現的,該對象包含了一些方法來進行請求的發送、監聽請求過程中的狀態、接收響應內容等:
var xhr = new xmlhttpRequest();xhr.onReadyStateChange = function() { if (xhr.readyState === 4) { //不使用this更靠譜 if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ alert(xhr.responseText); }};xhr.open('get', 'url', true);xhr.setRequestHeader('name', 'value');xhr.send(null); //不發送任何內容必須使用nullreadyState
共有5種狀態,在此一一不作說明。其中4
表示已接收到所有的響應內容。readyStateChange
事件綁定需要在open
方法調用之前。setRequestHeader
方法需要在open
和send
之間調用。
此外,如果需要在url上加參數,必須使用encodeURIComponent
來對參數的name
和value
進行編碼。encodeURIComponent
只能使用UTF-8編碼格式.
RFC 1738規定:
“只有字母和數字[0-9a-zA-Z]、一些特殊符號”$-_.+!*’(),”[不包括雙引號]、以及某些保留字,才可以不經過編碼直接用于URL。”
而不同的操作系統、不同的瀏覽器、不同的網頁字符集,將導致完全不同的編碼結果。并且URL本身和后面追加的查詢參數的編碼方式很可能不同。這樣會比較混亂,因此可以提前使用JS對URL進行編碼,使得統一,而不直接通過瀏覽器。
參考: 關于URL編碼 url的三個js編碼函數escape(),encodeURI(),encodeURIComponent()簡介
當異步請求地址的協議、主域名、子域名(例如www)、端口號中有任何一個同源頁面不同,則是一次跨域請求。
CORS是W3C的一個工作草案。是通過頭部來進行瀏覽器和服務器間的溝通。 通過設置自定義頭部Origin
,該頭部內容為請求源的地址和端口號。服務器如果接收請求,則會在access-Control-Allow-Origin
相應頭部中返回與Origin
相同內容或者*
(公共資源)。如果不接受,則不返回該頭部或者頭部不匹配。瀏覽器就會駁回該請求。
現代瀏覽器已經通過原生的xhr
對象實現了跨域請求(IE10+)。使用方式和同源的沒什么區別,當瀏覽器發現ajax進行跨域后,會自動添加一些請求頭部。主要需要服務器實現CORS接口。 但跨域xhr
對象也有一些使用上的限制。 同時,跨域請求分為簡單請求和非簡單請求,當為非簡單請求時,預先發送一個option
類型的請求進行預檢(preflight
),服務器通過后,瀏覽器才會發送真正的請求(和簡單請求一樣)。
參考: 跨域資源共享 CORS 詳解
跨域資源共享方式比JSONP更強大,前者支持所有請求方式,而后者只支持GET
。不過JSONP對于那些不支持CORS的瀏覽器來說是實現跨域的一種方式。 JSONP的實現原理是src
是不受同源策略限制的,當script標簽出現在文檔樹種時,會請求一段JS代碼,獲取到該代碼后立即執行。 需要前端和服務端之間約定好callback的字段名(即下例中的callbackName
),方便后端取到回調函數,并用將數據作為參數傳遞給回調函數然后返回這個回調函數,頁面在獲取到這個回調函數后會立即執行。 前端需要做的:
還有一些其他跨域方式: 前端跨域的整理
訪問未聲明的變量會報錯,但訪問不存在的對象的屬性不會報錯,返回undefined
。
新聞熱點
疑難解答