AJAX的前世此生與將來

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

什麼是Ajax？

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

Ajax有什麼用？

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

Ajax有什麼好處？

會帶來更好的用戶體驗。

2、Ajax的前世

1）前端的Ajax

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

2）中間件的Ajax

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

3、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);

4、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種方案（最新最全）中提到過，就不在這裏介紹了。

5、總結

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