天天看點

原生ajax的請求函數

ajax:一種請求資料的方式,不需要重新整理整個頁面;

ajax的技術核心是 XMLHttpRequest 對象;

ajax 請求過程:建立 XMLHttpRequest 對象、連接配接伺服器、發送請求、接收響應資料;

下面簡單封裝一個函數,之後稍作解釋

ajax({
        url: "./TestXHR.aspx",              //請求位址
        type: "POST",                       //請求方式
        data: { name: "super", age: 20 },        //請求參數
        dataType: "json",
        success: function (response, xml) {
            // 此處放成功後執行的代碼
        },
        fail: function (status) {
            // 此處放失敗後執行的代碼
        }
    });

    function ajax(options) {
        options = options || {};
        options.type = (options.type || "GET").toUpperCase();
        options.dataType = options.dataType || "json";
        var params = formatParams(options.data);

        //建立 - 非IE6 - 第一步
        if (window.XMLHttpRequest) {
            var xhr = new XMLHttpRequest();
        } else { //IE6及其以下版本浏覽器
            var xhr = 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, true);
            xhr.send(null);
        } else if (options.type == "POST") {
            xhr.open("POST", options.url, true);
            //設定表單送出時的内容類型
            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)