1. 程式人生 > >來談談ajax

來談談ajax

bubuko 改變 屬性 技術 設置 就是 pre req read

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

在這裏截取了一張網上的圖。

技術分享圖片

XMLHttpRequest 是ajax的基礎,所以要先創建這個對象。

XMLHttpRequest 用於在後臺與服務器交換數據。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。

如需將請求發送到服務器,我們使用 XMLHttpRequest 對象的 open() 和 send() 方法:

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

請求又分為post和get請求

與 POST 相比,GET 更簡單也更快,並且在大部分情況下都能用。

然而,在以下情況中,請使用 POST 請求:

  • 無法使用緩存文件(更新服務器上的文件或數據庫)
  • 向服務器發送大量數據(POST 沒有數據量限制)
  • 發送包含未知字符的用戶輸入時,POST 比 GET 更穩定也更可靠

XMLHttpRequest 對象如果要用於 AJAX 的話,其 open() 方法的 async 參數必須設置為 true:

這裏的async意思為異步。

對於 web 開發人員來說,發送異步請求是一個很大的優勢。很多在服務器執行的任務都相當費時。AJAX 出現之前,這可能會引起應用程序掛起或停止。

通過 AJAX,JavaScript 無需等待服務器的響應,而是在等待服務器響應時執行其他腳本,當響應就緒後對響應進行處理。

簡單來說就是使用ajax異步傳輸,在這個數據傳輸的過程中不會阻塞其他進程的進行。

獲得來自服務器的響應,要使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

responseText:獲得字符串形式的響應數據;

responseXML:獲得 XML 形式的響應數據;

當請求被發送到服務器時,我們需要執行一些基於響應的任務。

每當 readyState 改變時,就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態信息。

下面是 XMLHttpRequest 對象的三個重要的屬性:

  onreadystatechange

  readyState------ 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

          0:請求未初始化

          1:服務器連接已建立

          2:請求已接收

          3:請求處理中

          4:請求已完成,且響應已就緒

  status------- 有n種返回值。我就不一一舉例了。

        兩種經常出現的: 200: "OK" 404: 未找到頁面

當 readyState 等於 4 且狀態為 200 時,表示響應已就緒

總結: 引用一句別人的話:

  直白地說,就是沒用AJAX的網頁,你點一個按鈕就要刷新一下頁面,盡管新頁面上只有一行字和當前頁面不一樣,但你還是要無聊地等待頁面刷新。

  用了AJAX之後,你點擊,然後頁面上的一行字就變化了,頁面本身不用刷。

  AJAX只是一種技術,不是某種具體的東西。不同的瀏覽器有自己實現AJAX的組件。

  ajax異步傳輸+js+xml。

  簡單地解釋就是:向服務器發送請求的時候,我們不必等待結果,而是可以同時做其他的事情,等到有了結果我們可以再來處理這個事。(當然,在其他語境下這個解釋可能就不對了)

  這個很重要,如果不是這樣的話,我們點完按鈕,頁面就會死在那裏,其他的數據請求不會往下走了。這樣比等待刷新似乎更加討厭。(雖然提供異步通訊功能的組件默認情況下都是異步的,但它們也提供了同步選項,如果你好奇把那個選項改為false的話,你的頁面就會死在那裏)

  xml只是一種數據格式,在這件事裏並不重要,我們在更新一行字的時候理論上說不需要這個格式,但如果我們更新很多內容,那麽格式化的數據可以使我們有條理地去實現更新。

  現在大部分人其實是用JSON這種格式來代替XML的,因為前者更加簡潔,據說目前的解析速度也更快。多快好省,能省則省啊。

  感覺寫的思路不是太清晰。請各位大神指教。

來談談ajax