ajax相關知識點
AJAX的概念,即“Asynchronous Javascript And XML”
通過在後臺(瀏覽器的後臺)與服務器進行少量數據交換,AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。
傳統的網頁(不使用 AJAX)如果需要更新內容,必需重載整個網頁面或者使用iframe。
AJAX寫法
瀏覽器兼容
if(window.ActiveXObject){
//ActiveX是瀏覽器的插件
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE 678 OPEAR OLD
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();//NEW
}
狀態碼
readyState
XMLHttpRequest的準備狀態,從0~4發生改變
0:請求未初始化
1:服務器連接已建立
2:請求已經接受
3:請求處理中
4:請求已完成,且響應已就緒
status
200:正常完成
404:未找到頁面
500:服務器處理錯誤
ActiveX:就是IE瀏覽器提供的插件接口
例如:PDFReader ActiveX、FlashPlayer ActiveX、網上銀行 ActiveX、XMLHTTP ActiveX
為什麽響應有文本和XML格式
因為當下最流行的數據交互格式,一種是json(responseText),另外一種是XML(responseXML)
* JSON.parse(xmlHttp.responseText)
數據格式:
XML:可擴展標記語言
HTML:超文本標記語言
JSON:基本上取代了ajax的responseXML格式
第一:文件更小
第二:json格式對於javascript更加友好
* JSON.parse(jsonString);
代碼:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div>賬戶余額:</div> 9 <b id="balance">0</b> 10 <button onclick="refreshBalance()">刷新余額</button> 11 <button onclick="loadDetails()">加載歷史交易記錄</button> 12 <div id="details"></div> 13 <script> 14 function refreshBalance(){ 15 var xmlHttp; 16 if(window.ActiveXObject){//native code 系統自帶的 17 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 18 }else if(window.XMLHttpRequest){ 19 xmlHttp = new XMLHttpRequest(); 20 }else{ 21 throw new Error("您的瀏覽器暫時不支持AJAX,請升級或者更換瀏覽器"); 22 } 23 xmlHttp.open("GET","balance.txt"); 24 xmlHttp.onreadystatechange = function(){ 25 if(xmlHttp.readyState==4&&xmlHttp.status==200){ 26 document.getElementById("balance").innerHTML = xmlHttp.responseText; 27 } 28 } 29 //xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 30 xmlHttp.send(null); 31 } 32 function loadDetails(){ 33 var xmlHttp; 34 if(window.ActiveXObject){//native code 35 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 36 }else if(window.XMLHttpRequest){ 37 xmlHttp = new XMLHttpRequest(); 38 }else{ 39 throw new Error("您的瀏覽器暫時不支持AJAX,請升級或者更換瀏覽器"); 40 } 41 xmlHttp.open("GET","details.xml"); 42 xmlHttp.onreadystatechange = function(){ 43 if(xmlHttp.readyState==4&&xmlHttp.status==200){ 44 //document.getElementById("details").innerHTML = ; 45 console.log(xmlHttp.responseXML.root); 46 } 47 } 48 //xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 49 xmlHttp.send(null); 50 } 51 </script> 52 </body> 53 </html>
1 function showJsonp() { 2 var url="" 3 var word=encodeURI(‘H型支柱‘); 4 $.ajax({ 5 url:url, 6 type:‘post‘, 7 data:{word:word,size:20}, 8 dataType:‘jsonp‘, 9 jsonp:‘a‘, 10 jsonpCallback:"ss", 11 success:function (data) { 12 console.log(data) 13 } 14 }) 15 }
參數:jsonp :在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分,例如{jsonp:‘onJsonPLoad‘}會導致將"onJsonPLoad=?"傳給服務器。
jsonCallback: 是客戶端註冊的,獲取 跨域服務器 上的json數據 後,回調的函數。
http://crossdomain.com/services.php?callback=jsonpCallback
這個 url 是跨域服務 器取 json 數據的接口,參數為回調函數的名字,返回的格式為
jsonpCallback({msg:‘this is json data‘})
ajax相關知識點