AJAX的前世今生與未來

一、通過三個問答來認識一下Ajax

什么是Ajax？

Ajax是Asynchronous Javascript And XML的縮寫，它是一種技術。

Ajax有什么用？

這一技術能夠向服務器請求額外的數據而不用卸載頁面。

Ajax有什么好處？

會帶來更好的用戶體驗。

二、Ajax的前世

1）前端的Ajax

早在Ajax出世之前，Ajax式的通信要通過一些Hack才能完成，大多數是使用隱藏的框架或內嵌框架。（很遺憾我不是在那個時期成長起來的，所以就不太熟悉了，大概是利用iframe來實現的，只不過是不跨域而已）

2）中間件的Ajax

在Ajax出世之前，有一種叫遠程腳本的技術，它的工作和Ajax類似。Javascript要借助Java applet或者Flash等中間件才能實現。（具體是怎么來做的，我也不是很清楚，大概的原理是Javascript與中間件通信，中間件再與服務器通信）

三、Ajax的今生

Ajax技術的核心是XMLHttpRequest對象（簡稱XHR）。

下面只對xhr的大概過程作了簡單的介紹，如果想深入了解ajax，大家可以深入了解了一下xhr的各個屬性、方法和過程。

創建跨瀏覽器的xhr

function createXHR(){
    if(typeof XMLHttpRequest != 'undefined'){
        return new XMLHttpRequest();
    }else if(typeof ActiveXObject != 'undefined'){// for IE6-
        if(typeof arguments.callee.activXString != 'string'){
            var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp',],
                i, len;
            for(i=0, len=versions.length; i<len; i++){
                try{
                    new ActiveXObject(versions[i]);
                    arguments.callee.activXString = versions[i];
                    break;
                }catch(e){}
            }
        }
        return new ActiveXObject(arguments.callee.activXString);
    }else{
        throw new Error('No XHR object available.');
    }
}

同步xhr

var xhr = createXHR();
xhr.open('get', 'example.php', false);
xhr.send(null);

異步xhr

var xhr = createXHR();
xhr.onreadystatechange = function(){
    if(xhr.readyState ==4){
        if(xhr.status>=200 && xhr.status < 300 || xhr.status == 304){
            console.log(xhr.responseText);
        }else{
            console.log('Request was unsuccessful'+xhr.status);
        }
    }
};
xhr.open('get', 'example.txt', true);
xhr.send(null);

四、Ajax的未來

1） xhr2

W3C開始着手xhr的規范化，xhr2進一步發展了xhr。

1>FormData

FormData用於對表單的序列化，好處是不必明確在xhr對象上設置請求的頭部。xhr能夠識別出FormData數據，並設置相應的頭部。

xhr.open('get', 'example.txt', true);
var form = document.getElementById('form1');
xhr.send(FormData(form));

2>timeout

timeout屬性表示在請求多少毫秒之后就停止請求。

xhr.open('get', 'example.txt', true);
xhr.timeout = 1000;
xhr.timeout = function(){
    console.log('Request not return in a second');
}
xhr.send(null);

3>load

load用以代替readystatechange+readyState

xhr.onload = function(){
    if(xhr.status>=200 && xhr.status < 300 || xhr.status == 304){
        console.log(xhr.responseText);
    }else{
        console.log('Request was unsuccessful'+xhr.status);
    }
}
xhr.open('get', 'example.php', false);
xhr.send(null);

4>progress

onprogress事件會接收一個event對象，它的target就是xhr，此外還包含了三個額外的屬性：lengthComputable表示進度信息是否可用, position表示已經接收的數據的字節數, totalSize表示根據Content-Length響應頭部確定的預期字節數。有了這些信息，我們就可以向用戶展示一個進度條了。

xhr.onload = function(){
    if(xhr.status>=200 && xhr.status < 300 || xhr.status == 304){
        console.log(xhr.responseText);
    }else{
        console.log('Request was unsuccessful'+xhr.status);
    }
};
xhr.onprogress = function(event){
    var divStatus = document.getElementById('status');
    if(event.lengthComputalbe){
        divStatus.innerHTML = 'Received ' + event.position + 'of' + 
            event.totalSize + 'bytes';
    }
};
xhr.open('get', 'example.php', false);
xhr.send(null);

2）CORS

這個我在前端解決跨域問題的8種方案（最新最全）中提到過，就不在這里介紹了。

3）Comet

Comet指的是一種服務器推送技術，它是一種更加高級的Ajax技術。Comet分為輪詢和HTTP流兩種形式。

SSE（Server Sent Event）

var source = new EventSource('myevents.php');
source.onmessage = function(event){
    var data =  event.data;
    ......
}

4）Web Sockts

這個我也在前端解決跨域問題的8種方案（最新最全）中提到過，就不在這里介紹了。

五、總結

從Ajax的發展來看，它是越來越成熟，越來越強大，它不僅在無刷新方面提升了用戶體驗，也在跨域訪問中有着出色的能力。