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相關知識點