Ajax簡單認識

Ajax簡介

AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。

ajax

Part 01

應該具備哪些知識

在繼續學習之前，您需要對下面的知識有基本的了解：

HTML / XHTML

CSS

JavaScript / DOM

Part 02

什么是ajax

AJAX = 異步 JavaScript 和 XML。

AJAX 是一種用于創建快速動態網頁的技術。

通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁(不使用 AJAX)如果需要更新內容，必須重載整個網頁面。

有很多使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等

圖丨Ajax仿造

Part 03

Ajax優缺點

Ajax

使用Ajax的最大優點，就是能在不更新整個頁面的前提下維護數據。這使得Web應用程序更為迅捷地回應用戶動作，并避免了在網絡上發送那些沒有改變的信息。

Ajax不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行。就像DHTML應用程序那樣，Ajax應用程序必須在眾多不同的瀏覽器和平臺上經過嚴格的測試。隨著Ajax的成熟，一些簡化Ajax使用方法的程序庫也相繼問世。同樣，也出現了另一種輔助程序設計的技術，為那些不支持JavaScript的用戶提供替代功能。

對應用Ajax最主要的批評就是，它可能破壞瀏覽器的后退與加入收藏書簽功能。在動態更新頁面的情況下，用戶無法回到前一個頁面狀態，這是因為瀏覽器僅能記下歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的可能差別非常微妙；用戶通常都希望單擊后退按鈕，就能夠取消他們的前一次操作，但是在Ajax應用程序中，卻無法這樣做。不過開發者已想出了種種辦法來解決這個問題，HTML5之前的方法大多是在用戶單擊后退按鈕訪問歷史記錄時，通過創建或使用一個隱藏的IFRAME來重現頁面上的變更。(例如，當用戶在Google Maps中單擊后退時，它在一個隱藏的IFRAME中進行搜索，然后將搜索結果反映到Ajax元素上，以便將應用程序狀態恢復到當時的狀態)。

關于無法將狀態加入收藏或書簽的問題，HTML5之前的一種方式是使用URL片斷標識符(通常被稱為錨點，即URL中#后面的部分)來保持追蹤，允許用戶回到指定的某個應用程序狀態。(許多瀏覽器允許JavaScript動態更新錨點，這使得Ajax應用程序能夠在更新顯示內容的同時更新錨點。)HTML5以后可以直接操作瀏覽歷史，并以字符串形式存儲網頁狀態，將網頁加入網頁收藏夾或書簽時狀態會被隱形地保留。上述兩個方法也可以同時解決無法后退的問題。

進行Ajax開發時，網絡延遲——即用戶發出請求到服務器發出響應之間的間隔——需要慎重考慮。如果不給予用戶明確的回應，沒有恰當的預讀數據，或者對XMLHttpRequest的不恰當處理，都會使用戶感到厭煩。通常的解決方案是，使用一個可視化的組件來告訴用戶系統正在進行后臺操作并且正在讀取數據和內容。

過程原理

Part 04

發送Ajax請求的五個步驟

其實也就是 使用 XMLHttpRequest 對象的五個步驟。

請求的網址、請求方法get/post。

提交請求的內容數據、請求主體等。

接收響應回來的內容。

發送 Ajax 請求的五個步驟：

(1)創建異步對象。即 XMLHttpRequest 對象。

(2)設置請求的參數。包括：請求的方法、請求的url。

(3)發送請求。

(4)注冊事件。onreadystatechange事件，狀態改變時就會調用。

如果要在數據完整請求回來的時候才調用，我們需要手動寫一些判斷的邏輯。

(5)獲取返回的數據

圖2發送Ajax請求的五個步驟

Part 05

Ajax是基于現有的Internet標準

AJAX是基于現有的Internet標準，并且聯合使用它們：

XMLHttpRequest 對象 (異步的與服務器交換數據)

JavaScript/DOM (信息顯示/交互)

CSS (給數據定義樣式)

XML (作為轉換數據的格式)

AJAX應用程序與瀏覽器和平臺無關的！

Part 06

Ajax的應用

? ? ?1.用戶上傳頭像的預覽功能；

　　2.注冊，驗證登錄操作，比如用戶名是否重復、登錄密碼是否錯誤等等；

　　3.主機管理系統中的編輯功能，例如刪除某一行主機信息，會偷偷執行刪除數據庫相關操作，并刪除該頁上的數據Dom；

　　4.熱點新聞的刷新、鼠標滾動刷新等；

　　5.等等；

圖3原生Ajax

圖4jquery的Ajax

總結

以上是生活随笔為你收集整理的ajax 导致 css 延迟_AJAX远离404的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。