원생 JS AJAX 실현

AJAX 설명
  • IE7 및 그 이상 버 전에 서 원생 XHR 대상 을 지원 하기 때문에 new XML HttpRequest () 를 직접 사용 할 수 있 습 니 다.
  • IE6 와 그 이전 버 전에 서 XHR 대상 은 MSXML 라 이브 러 리 의 한 ActiveX 대상 을 통 해 이 루어 졌 다.: new ActiveXObject ('Microsoft. XML HTTP');

  • 이루어지다
    function ajax(options) {
        options = options || {};
        options.type = (options.type || "GET").toUpperCase();
        options.async = options.async || true;
        var params = formatParams(options.data);
        // IE9  ,  ES5,              
        //var qs = Object.keys(data).reduce(function(pre,cur,index){
        //   return pre + '&' + encodeURIComponent(cur) + '=' + encodeURIComponent(data[cur]);
        //},'');
        //var params = qs.slice(1);
    
        //  xhr -  IE6/IE6         
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    
        //   -    
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                var status = xhr.status;
                if (status >= 200 && status < 300) {
                    options.success && options.success(xhr.responseText, xhr.responseXML);
                } else {
                    options.fail && options.fail(status);
                }
            }
        }
    
        //        -    
        if (options.type == "GET") {
            xhr.open("GET", options.url + "?" + params, options.async);
            xhr.send(null);
        } else if (options.type == "POST") {
            xhr.open("POST", options.url, options.async);
            //            
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(params);
        }
    }
    //     
    function formatParams(data) {
        var arr = [];
        for (var name in data) {
            arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
        }
        arr.push(("v=" + Math.random()).replace(".", ""));
        return arr.join("&");
    }
    
    //    
    ajax({
        url: "url",              //    
        type: "POST",                       //    
        data: { a: "test", b: "t" },        //    
        success: function (response, xml) {
            //            
        },
        fail: function (status) {
            //            
        }
    });
    

    좋은 웹페이지 즐겨찾기