紸啶呮媞璐濄

ajax是異步的JavaScript和XML。通過(guò)后臺(tái)與服務(wù)器少量的數(shù)據(jù)交換，ajax可以實(shí)現(xiàn)網(wǎng)頁(yè)的異步更新。這意味著在不刷新整個(gè)頁(yè)面的情況下，可以對(duì)網(wǎng)頁(yè)的局部進(jìn)行更新。

ajax原理 通過(guò)XMLHttpReuest對(duì)象向服務(wù)器發(fā)出異步請(qǐng)求，從服務(wù)器獲取數(shù)據(jù)，然后用JavaScript操作dom來(lái)更新頁(yè)面。

同步 腳本會(huì)停留并等待服務(wù)器回復(fù)然后再繼續(xù)
異步 腳本允許繼續(xù)其進(jìn)程并處理可能的回復(fù)

交互流程
1，創(chuàng)建XMLHttpRequest對(duì)象
2，open 打開(kāi)url通道，設(shè)置異步傳輸
3，send 發(fā)送數(shù)據(jù)到服務(wù)器
4，服務(wù)器接受數(shù)據(jù)并處理，處理完成后返回結(jié)果
4，客戶端接收服務(wù)器返回

ajax創(chuàng)建流程

 1 function creatXmlHttp(){
 2         var xhr = null;
 3         if(window.XMLHttpRequest){
 4             xhr = new window.XMLHttpRequest();
 5         }else{
 6             try{
 7                 xhr = new window.ActiveXObject('Msxml2.XMLHTTP');
 8             }catch(e){
 9                 try{
10                     xhr = new window.ActiveXObject('Mircosoft.XMLHTTP');
11                 }catch(e){
12                     alert('您的瀏覽器不支持ajax！');
13                 }
14             }
15         }
16         return xhr;
17     }
18 
19     function testCreatXML(){
20         var xhr = creatXmlHttp();
21         xhr.open('get',url,true);
22         xhr.setRequestHeader('content-Type','application/jpson');
23         xhr.onreadystatechange = function(){
24             if(xhr.readyState == 4 && xhr.status == 200){
25                 //
26             }
27         }
28         xhr.send();
29     }

ajax ready對(duì)象狀態(tài)值
0 對(duì)象建立，未初始化
1 初始化，未調(diào)用send
2 發(fā)動(dòng)數(shù)據(jù)
3 數(shù)據(jù)傳輸中，并接收了部分?jǐn)?shù)據(jù)
4 數(shù)據(jù)接收完成

ajax優(yōu)缺點(diǎn)
優(yōu)點(diǎn)
1，無(wú)刷新更新數(shù)據(jù)
2，異步與服務(wù)器通信
3，前后端負(fù)載平衡
4，基準(zhǔn)被廣泛支持
5，界面與應(yīng)用分離
缺點(diǎn)
ajax干掉了back和history功能，對(duì)瀏覽器機(jī)制的破壞
ajax安全問(wèn)題
對(duì)搜索引擎支持弱
破壞程序的異常機(jī)制
違背URL和資源定位的初衷
AJAX不能很好支持移動(dòng)設(shè)備
客戶端過(guò)肥，太多客戶端代碼造成開(kāi)發(fā)上的成本

同源策略
同源是指：同協(xié)議，同端口，同域名

跨域的解決辦法
1，jpsonp
2，動(dòng)態(tài)創(chuàng)建script標(biāo)簽
3，document.domain+iframe
4，HTML5 postMessage
　　　　otherWindow.postMessage(message, targetOrigin);