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屬性: 請求結果【狀態碼(相應的狀態碼能夠百度去搜索)】
*1
xx:信息響應類,表示接收到請求而且繼續處理
*2
xx:處理成功響應類,表示動做被成功接收、理解和接受 (主要是:200)
*3
xx:重定向響應類,爲了完成指定的動做,必須接受進一步處理
*4
xx:客戶端錯誤,客戶請求包含語法錯誤或者是不能正確執行
*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 }