JS——Ajax原理

AJAX:css

AJAX不是JavaScript的規範,它只是一個哥們「發明」的縮寫:Asynchronous JavaScript and XML,意思就是用JavaScript執行異步網絡請求。html

若是仔細觀察一個Form的提交,你就會發現,一旦用戶點擊「Submit」按鈕,表單開始提交,瀏覽器就會刷新頁面,而後在新頁面裏告訴你操做是成功了仍是失敗了。若是不幸因爲網絡太慢或者其餘緣由,就會獲得一個404頁面。ajax

這就是Web的運做原理:一次HTTP請求對應一個頁面。瀏覽器

若是要讓用戶留在當前頁面中,同時發出新的HTTP請求,就必須用JavaScript發送這個新請求,接收到數據後,再用JavaScript更新頁面,這樣一來,用戶就感受本身仍然停留在當前頁面,可是數據卻能夠不斷地更新。緩存

最先大規模使用AJAX的就是Gmail,Gmail的頁面在首次加載後,剩下的全部數據都依賴於AJAX來更新。安全

用JavaScript寫一個完整的AJAX代碼並不複雜,可是須要注意:AJAX請求是異步執行的,也就是說,要經過回調函數得到響應。(轉自:廖雪峯的AJAX介紹)服務器

歸根結底,AJAX就是無刷新數據讀取。(應用於用戶註冊、在線聊天等功能)網絡

 

1)HTTP請求方式異步

  》GET:把數據放在url(網址)裏面來提交  多半用於獲取數據(例如:瀏覽帖子)函數

  》POST:把數據放在不是url的地方      多半用於上傳數據(例如:用戶註冊/上傳圖片等)

兩者區別:

  GET   安全性低、容量低、會有緩存       便於分享

  POST   安全性通常、容量幾乎無限、不會緩存      不便於分享

以下圖所示,就明白GET的方法了:  (當使用GET方法時,在表單中填入相關信息後,瀏覽器網址後面會帶着你所提交的信息,【若用戶名/密碼之類的信息顯示在網址後面,那安全性就低了,我的信息很容易被人竊取】)

 

2)Ajax的編寫

Ajax請求順序:

1)建立Ajax對象:

  》ActiveObject("Microsoft.XMLHTTP")

  》XMLHttpRequest()

2)鏈接服務器:

  》open(方法、文件名、異步傳輸)

3)發送請求:

  》send()

4)接收返回:

   》請求狀態監控(onreadystatechange事件)

    >readyState屬性:  請求狀態【狀態值】

      *0  (未初始化)尚未調用open()方法

      *1  (載入)已調用send()方法,正在發送請求

      *2  (載入完成)send()方法完成,已收到所有響應內容

      *3  (解析)正在解析響應內容

      *4  (完成)響應內容解析完成,能夠在客戶端調用了   (主要是:4)

    >status屬性:  請求結果【狀態碼(相應的狀態碼能夠百度去搜索)】

      *1xx:信息響應類,表示接收到請求而且繼續處理

      *2xx:處理成功響應類,表示動做被成功接收、理解和接受  (主要是:200)

      *3xx:重定向響應類,爲了完成指定的動做,必須接受進一步處理

      *4xx:客戶端錯誤,客戶請求包含語法錯誤或者是不能正確執行

      *5 xx:服務端錯誤,服務器不能正確執行一個正確的請求

    >responseText:  服務器發回來的信息/內容

 

注意:對於Ajax的使用,須要本身搭建一個服務器來使用(本人用的是wamp服務器),把相對應文件放在(wamp/www的路徑下),其中ajax.html文件是用來編寫ajax的,abc.txt用來讓ajax獲取裏面的內容【並且abc.txt中要以utf-8的編碼格式保存(跟瀏覽器編碼格式同樣)】

詳細以下圖:

(1):

(2):

 

1)建立Ajax對象

2)鏈接服務器

3)發送請求

4)接收返回

 

至此,對於AJAX的編寫就完成了,爲了能夠長期利用,能夠把它封裝到函數裏,放在js代碼中,有必要時能夠拿來調用。(新建一個js文檔來存放所封裝的函數)

 1 function Ajax(url,fnSucc,fnFaild){
 2     //1.建立ajax對象
 3     var oAjax=null;
 4     if(window.XMLHttpRequest){          
 5         oAjax=new XMLHttpRequest();
 6     }
 7     else {
 8         oAjax=new ActiveXObject('Microsoft.XMLHTTP');
 9     }
10 
11     //2.鏈接服務器
12     oAjax.open('GET',url,true);
13 
14     //3.發送請求
15     oAjax.send();
16 
17     //4.接收返回
18     oAjax.onreadystatechange=function(){    
19         if(oAjax.readyState==4){       //完成     
20             if(oAjax.status==200){     //成功      
21                 fnSucc(oAjax.responseText);   
22                 //把oAjax.responseText做爲參數給fnSucc函數調用   
23             }else{
24                 if(fnFaild){        
25                     //若調用ajax時,有傳入fnFaild這個參數時就執行
26                     fnFaild(oAjax.status); 
27          }
28        }
29     }
30   }
31 }
相關文章
相關標籤/搜索