原生js之四步走搞定Ajax


      說到Ajax,不得不先提一下 HTTP(HTTP,HyperText Transfer Protocol)協議,中文名:超文本傳輸協議,是互聯網上應用最為廣泛的一種網絡協議。所有的WWW文件都必須遵守這個標准。設計HTTP最初的目的是為了提供一種發布和接收HTML頁面的方法。 一次HTTP 請求,包含了兩個重要的部分:上行request(請求)和下行response(響應)

  HTTP協議定義了很多與服務器交互的方法,最基本的有4種,分別是GET,POST,PUT,DELETE. 一個URL地址用於描述一個網絡上的資源,而HTTP中的GET, POST, PUT,DELETE就對應着對這個資源的查,改,增,刪4個操作。 我們最常見的也是我們關心的就是GET和POST了。GET一般用於獲取/查詢資源信息,而POST一般用於更新資源信息。

我們看看GET和POST的區別:

1. GET提交的數據會放在URL之后,以?分割URL和傳輸數據,參數之間以&相連,如EditPosts.aspx?name=test1&id=123456.  POST方法是把提交的數據放在HTTP包的Body中.

2. GET提交的數據大小有限制(因為瀏覽器對URL的長度有限制,本身並沒有限制),而POST方法提交的數據沒有限制。

3. GET方式提交數據,會帶來安全問題,比如一個登錄頁面,通過GET方式提交數據時,用戶名和密碼將出現在URL上,如果頁面可以被緩存或者其他人可以訪問這台機器,就可以從歷史記錄獲得該用戶的賬號和密碼。

如果你使用chrome瀏覽器的話,可以再下面的頁面中看到這兩種請求攜帶的信息:

  通常,瀏覽器產生 HTTP 請求,是由於用戶輸入了新的網址、或者點擊了超級鏈接,使頁面跳轉,這將導致頁面的全局刷新。 Ajax(Asynchronous Javascript And XML:異步JavaScript和XML)技術,可以使網頁悄悄地、偷偷地發起HTTP請求,請求回來的數據在頁面局部刷新呈遞。ajax的使用其實很簡單:
第一步,new出一個XMLHttpRequest對象:
這里變量名xhr可以隨便起,只是一般工程師都喜歡使用這個名字,就像var arr一樣,姑且當做一種約定俗成的東西就好,方便大家交流。
第二步,處理服務器上面返回的響應:

其中,if語句小括號中的的語句:readyState表示返回XMLHTTP請求的當前狀態,具體數值示意如下:
 
0 (未初始化)
對象已建立,但是尚未初始化(尚未調用open方法)
1 (初始化)
已調用send()方法,正在發送請求
2 (發送數據)
send方法調用完成,但是當前的狀態及http頭未知
3 (數據傳送中)
已接收部分數據,因為響應及http頭不全,這時通過responseBody和responseText獲取部分數據會出現錯誤,
4 (完成)
數據接收完畢,此時可以通過通過responseBody和responseText獲取完整的回應數據

 

第三步, 創建一個請求,第一個參數是請求的類型 get 或者 post ,第二個參數就是請求的路徑,第三個參數叫做是否使用異步機制:


如果是post請求,在發送請求前需要做以下處理:
第四步,發送請求:

總結一下:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM