如何将jquery ajax转换为本机javascript？

Question

这是我的ajaxHandler，我想将此转换为本地javascript，即使用XMLHttpRequest，但我不明白如何转换。

ajaxHandler = {

  defaultAttributes: {

    type: 'GET',

    url: 'index.php/request',

    datatype: 'json',

    data: {},

    success: null,

    error: function(data) {

      errorHandler.showError('An Error occurred while trying to retreive your requested data, Please try again...');

    },

    timeout: function() {

      errorHandler.showError('The request has been timed out, Please check your Internet connection and try again...');

    }

  },

  sendRequest: function(attributes) {

    Paper.giffyLoading.style.display = 'block';

    if (!attributes.nopopup) {

      if (attributes.loadmsg) {

        Controllers.AnimationController.createProgressBarScreen(attributes.loadmsg);

        attributes.loadmsg = null;

      }

    }

    $.ajax(attributes);

  }

}

我已经尝试像这样转换上面的代码

XMLRequestDefaultHandler = function() {

  var xmlHttp = new XMLHttpRequest();

  xmlHttp.open('GET', 'index.php/request', true);

  xmlHttp.onreadystatechange = function() {

    if (xmlHttp.readyState === 4 || xmlHttp.status === 200) {



    } else {

      errorHandler.showError('An Error occurred while trying to retreive your requested data, Please try again...');





    }

  };

  xmlHttp.send(null);



}

Answer 1

我提取了Jquery的ajax函数，无需使用jquery就可以工作。

并替换$.ajax(attributes);为ajax(attributes);

没有JQuery的JQuery的ajax函数：

function ajax(option) { // $.ajax(...) without jquery.
    if (typeof(option.url) == "undefined") {
        try {
            option.url = location.href;
        } catch(e) {
            var ajaxLocation;
            ajaxLocation = document.createElement("a");
            ajaxLocation.href = "";
            option.url = ajaxLocation.href;
        }
    }
    if (typeof(option.type) == "undefined") {
        option.type = "GET";
    }
    if (typeof(option.data) == "undefined") {
        option.data = null;
    } else {
        var data = "";
        for (var x in option.data) {
            if (data != "") {
                data += "&";
            }
            data += encodeURIComponent(x)+"="+encodeURIComponent(option.data[x]);
        };
        option.data = data;
    }
    if (typeof(option.statusCode) == "undefined") { // 4
        option.statusCode = {};
    }
    if (typeof(option.beforeSend) == "undefined") { // 1
        option.beforeSend = function () {};
    }
    if (typeof(option.success) == "undefined") { // 4 et sans erreur
        option.success = function () {};
    }
    if (typeof(option.error) == "undefined") { // 4 et avec erreur
        option.error = function () {};
    }
    if (typeof(option.complete) == "undefined") { // 4
        option.complete = function () {};
    }
    typeof(option.statusCode["404"]);

    var xhr = null;

    if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) { try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } }
        else { xhr = new XMLHttpRequest(); }
    } else { alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest..."); return null; }

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 1) {
            option.beforeSend();
        }
        if (xhr.readyState == 4) {
            option.complete(xhr, xhr.status);
            if (xhr.status == 200 || xhr.status == 0) {
                option.success(xhr.responseText);
            } else {
                option.error(xhr.status);
                if (typeof(option.statusCode[xhr.status]) != "undefined") {
                    option.statusCode[xhr.status]();
                }
            }
        }
    };

    if (option.type == "POST") {
        xhr.open(option.type, option.url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
        xhr.send(option.data);
    } else {
        xhr.open(option.type, option.url+option.data, true);
        xhr.send(null);
    }

}