ajax方法簡單實現

ajax基本步驟

1. 判斷方法型別，GET，POST或其他

2. 得到資料，&分隔的key value字串形式

3. 註冊onreadystatechange事件

4. 開啟請求，呼叫open

5. 傳送資料，呼叫send

ajax的過程狀態

xhr.readystate

0 未初始化

1 請求開啟，但未傳送，open後send前

2 請求已傳送，send後

3 響應頭已接收，響應體未完成

4 響應全部接收

function ajax(options){
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('...');
    var {url,method,data,async,success,fail} = options;
    var sendBody = null;
    var qs = Object.keys(data).reduce(function(cur,pre,index){
        return pre + '&' + encodeURIComponent(cur) + '=' + encodeURIComponent(data[cur]);
    },'').slice(1);
    if(medthod == 'get'){
        url += '?' + qs;
    }
    else if(medhot == 'post'){
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        sendBody = qs || null;
    }
    xhr.onreadystatechange = function(){
        if(xhr.readystate == 4){
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                success && success(xhr.responseText);
            }
        }
        else{
            fail && fail({
                status:xhr.status,
                statusText:xhr.statusText
            });
        }
    }
    xhr.open(method,url,async);
    xhr.send(sendBody);
}