1. 程式人生 > >【JavaScript基礎筆記】Ajax,同源策略

【JavaScript基礎筆記】Ajax,同源策略

ajax 重新 The 並且 網站 然而 async ajax請求 control

AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。
AJAX 是一種用於創建快速動態網頁的技術。
通過在後臺與服務器進行少量數據交換,AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。
傳統的網頁(不使用 AJAX)如果需要更新內容,必需重載整個網頁面。
有很多使用 AJAX 的應用程序案例:新浪微博、Google 地圖、開心網等等。

技術分享圖片

GET 還是 POST?
與 POST 相比,GET 更簡單也更快,並且在大部分情況下都能用。
然而,在以下情況中,請使用 POST 請求:
? 無法使用緩存文件(更新服務器上的文件或數據庫)
? 向服務器發送大量數據(POST 沒有數據量限制)
? 發送包含未知字符的用戶輸入時,POST 比 GET 更穩定也更可靠

onreadystatechange 事件
當請求被發送到服務器時,我們需要執行一些基於響應的任務。
每當 readyState 改變時,就會觸發 onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態信息。
下面是 XMLHttpRequest 對象的三個重要的屬性:
技術分享圖片

在 onreadystatechange 事件中,我們規定當服務器響應已做好被處理的準備時所執行的任務。
當 readyState 等於 4 且狀態為 200 時,表示響應已就緒
使用 Callback 函數
callback 函數是一種以參數形式傳遞給另一個函數的函數。
如果您的網站上存在多個 AJAX 任務,那麽您應該為創建 XMLHttpRequest 對象編寫一個標準的函數,並為每個 AJAX 任務調用該函數。
該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務(每次調用可能不盡相同):

技術分享圖片

同源策略:只有協議+端口+域名一模一樣的條件下,才允許發AJAX請求

如果我們需要用Ajax發送跨域請求時
我們可以通過CROS
Response.setheader(‘Access-Control-Allow-Origin‘)

技術分享圖片

【JavaScript基礎筆記】Ajax,同源策略