原生Ajax（相容）

function ajax(options){
    options = options||{};
    var xhr = window.XMLHttpRequest ? (new XMLHttpRequest()) : (new ActiveXObject("Microsoft.XMLHTTP")) ;
    //onreadystatechange事件放在open()前，確保跨瀏覽器相容性
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4){
            if
 
(xhr.status>=200&&xhr.status<300){
                ...
            }else{
                ...
            }
        }
    }
    //啟動一個請求以備傳送
    xhr.open('get/post','example.php',true);
    //設定請求頭
    xhr.setRequestHeader(...);
    //傳送資料
    xhr.send(null);
}

GET和POST的區別，何時使用POST

GET：一般用於資訊獲取，查詢字串引數追加在URL末尾，對所傳送資訊的數量也有限制，一般在2000個字元

//向現有URL末尾追加查詢字串
function addURLParam(url,name,value){
    url += (url.index('?')==-1?'?':'&');
    url += encodeURIComponent(name)+'='+encodeURIComponent(value);
    return url;
}

POST：一般用於向伺服器傳送應該被儲存的資料，對所傳送的資料沒有數量和格式的限制。

注：伺服器對POST請求和提交web表單的請求不會一視同仁。

使用XHR來模仿表單提交

//XMLHttpRequest 1級寫法
...
 

    xhr.open('post','postexample.php',true);
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    var form = document.getElementById('user-info');
    xhr.send(serialize(form)); //serialize見頁末

//XMLHttpRequest 2級寫法
...
    xhr.open('post','postexample.php',true);
    var form = document.getElementById('user-info');
    xhr.send(new FormData(form));

與get請求相比，post請求消耗的資源會更多一些，從效能角度，以傳送相同的資料比較，get的請求速度最多可達到post的兩倍。
GET方式需要使用Request.QueryString來取得變數的值，而POST方式通過Request.Form來獲取變數的值。

然而，在以下情況中，請使用 POST 請求：
- 無法使用快取檔案（更新伺服器上的檔案或資料庫）
- 向伺服器傳送大量資料（POST 沒有資料量限制）
- 傳送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠。

xhr其它的一些方法

超時設定timeout及其事件
重寫XHR響應的MIME型別 overrideMimeType()

進度事件

load可以替代readystatechange

progress 在接收響應期間不斷地觸發，會接收到一個event物件，它有三個屬性：lengthComputable（進度資訊是否可用，布林值）、position（已接收的位元組數）、totalSize（預期接收的總位元組數）。
例項：進度指示器

...
xhr.onprogress = function(event){
    var divS = document.getElementById('status');
    if(event.lengthComputable){
        divS.innerHTML = event.position + '/' + event.totalSize
    }
}
...

    //表單序列化  （瞭解）
    function serialize(form){
        var parts=[],field=null,i,len,j,optLen,option,optValue;  
        for(i=0,len=form.elements.length;i<len;i++){  
            field=form.elements[i];  
            switch(field.type){  
                case "select-one"://單選列表預設處理  
                case "select-multiple"://對多選列表的處理最複雜，逐項判斷和累加  
                    if(field.name.length){  
                        for(j=0,optLen=field.options.length;j<optLen;j++){  
                            option=field.options[j];  
                            if(option.selected){  
                                optValue="";  
                                if(option.hasAttribute){  
                                    optValue=(option.hasAttribute("value")?  
                                    option.value:option.text);  
                                }else{  
                                    optValue=(option.attributes["value"].specified?  
                                    option.value:option.text);  
                                }  
                                parts.push(encodeURIComponent(field.name)+"="+  
                                           encodeURIComponent(optValue));  
                            }  
                        }  
                    }  
                    break;  
                case undefined://預設處理  
                case "file"://預設處理  
                case "submit"://預設處理  
                case "reset"://預設處理  
                case "button"://不處理  
                    break;  
                case "radio"://預設處理  
                case "checkbox":  
                    if(!field.checked){  
                        break;  
                    }  
                default://預設處理，要求必須有name屬性  
                    if(field.name.length){  
                        parts.push(encodeURIComponent(field.name)+"="+  
                                   encodeURIComponent(field.value));  
                    }  
            }  
        }  
        return parts.join("&");     
    }