Ajax 에 대해 서 알 아야 할 부분.

Ajax 기술 핵심 은 XMLHttpRequest 대상 (XHR 로 약칭)
ajax 의 사용 은 서버 에서 비동기 적 으로 정 보 를 얻 을 수 있 습 니 다. 사용자 가 클릭 하면 페이지 를 새로 고치 지 않 아 도 새로운 데 이 터 를 얻 을 수 있 습 니 다.
XHR 에 대한 브 라 우 저의 지원 을 위해 다음 과 같은 방법 을 사용 합 니 다.

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari        
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5        
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

전체적으로 말 하면 우 리 는 xhr 방법 을 사용 하여 서버 에 요청 을 하고 데 이 터 를 되 돌려 받 으 며 페이지 의 부분 새로 고침 을 실현 하고 데 이 터 를 변경 할 뿐이다.
여기 서 우 리 는 주로 원생 js 로 jquery 와 유사 한 ajax 요청 을 어떻게 포장 하 는 지 연구 합 니 다. 구체 적 인 ajax 세부 방법 은 여러분 이 인터넷 에서 조회 하거나 고도 3 에서 상세 하 게 설명 할 수 있 습 니 다.

//toData    data           ，   URL    
function toData(obj){
    if (obj == null){
        return obj;
    }
    var arr = [];
    for (var i in obj){
        var str = i+"="+obj[i];
        arr.push(str);
    }
    return arr.join("&");
}

function ajax(opts){
    //  ajax  ，          
    var xhr = null,
        abortTimeout = null,
        empty = function(){},
        ajax_url = "",
        opts = {
            type : ( opts.type && opts.type.toUpperCase() ) || "GET",
            url : opts.url || "",
            data : opts.data || "",
            dataType : opts.dataType || "json",
            success : opts.success || empty,
            err :opts.error || empty,
            timeout : opts.timeout || 30000   //      : 30s
        };
    //        xhr
    if (window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }
    else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
        
      //       
    opts.data = toData(opts.data);

       //        ，   URL
    if(opts.type == "GET"){
        if(opts.url.indexOf("?")>-1){
            if(opts.data == ""){
                ajax_url = opts.url;
            }else{
                ajax_url = opts.url + "&" +opts.data;
            }
        }else{
            ajax_url = opts.url + "?" + opts.data;
        }
        xhr.open('GET',ajax_url,true);
        xhr.send();
    }else(opts.type == "POST") {
        xhr.open('POST',opts.url,true);
        //     html    post  ，    http 
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(opts.data);
    }

    //       
    xhr.onreadystatechange = function(){
    /*
        **   readyState   ，    onreadystatechange  
        ** readyState     XMLHttpRequest     
        ** 0 ：      
        ** 1 ：        
        ** 2 ：     
        ** 3 :      
        ** 4 ：     ，     
      */
      if(xhr.readyState == 4){
        var res, 
            error;
        xhr.onreadystatechange = empty;
        clearTimeout(abortTimeout);

        if((xhr.status >= 200 && xhr.status < 300) ||xhr.status ==304){
            res = xhr.responseText;
            try{
                if(opts.type == "GET"){
                    if(opts.dataType == "json"){
                        res = JSON.parse(xhr.responseText);
                    }else if(opts.dataType == "script") {
                        eval(res);
                    }else if(opts.dataType == "xml"){
                        res = xhr.responseXML;
                    }
                }
            }catch(e) {
                error = e;
            }
            if(error){
                opts.error(error,'parsererror',xhr);
            }else{
                opts.success(res);
            }
        }else{
            opts.error(xhr.statusText || 'unknown' ,'status:' +xhr.status,xhr);
        }
      }
    };

    if(opts.timeout > 0){
        xhr.ontimeout = function(){
                      opts.error('Request.timeout','timeout',xhr);
              }
    }

    return xhr;
}
module.exports = ajax;

이 패키지 의 ajax 요청 을 호출 하 겠 습 니 다.

ajax({
    url : url,
    dataType : 'json',
    data : {
        "param1" : "111",
        "param2" : "222"
    },
    success: function(result){
        console.log(result);
    },
    timeout: 30000,
    error : function(error,type,xhr){
        console.log("error" : error,"type:",type,"xhr:",xhr);
    }
});