手寫Ajax的意義所在，從青銅到鑽石！

話說菩提祖師打了孫猴子三板子  而後悟空學會72般變化以及一身神通 對待這個問題做爲面試者要思考更加深層次的意義 才更能得到承認

 

實際上寫的ajax 很能看出一個的水平 貼幾段代碼就能夠看出水平的高低

 

代碼1:青銅水平

var req = new XMLHttpRequest();
req.open("get", "mockData/usersinfo.json", true);
req.send();
req.onreadystatechange = function () {
    if (req.readyState == 4 && req.status == 200) {
        var result= req.responseText;
    }
}

特別普通的一段原生ajax  功能也是特別的簡單的功能 獲取一個模擬的數據 這段代碼能反應啥   你能夠寫出來  也能記住對吧

 

代碼2:白銀水平

 function ajax(type, url, success) {
    var req = new XMLHttpRequest();
    req.open(type, url, true);
    req.send();
    req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
            var result = req.responseText;
            success(result);

        }
    }
}

ajax("get", "http://localhost:8055/listcount.php?search=a", function (result) {
    alert(result);
});

上面的代碼  跟代碼1的功能能夠說是同樣  可是代碼的複用性 就變得徹底不同

是真的

由於能夠哪裏調用就哪裏調用

 

代碼3:黃金水平

function ajax(json) {
    var req = new XMLHttpRequest();
    var type = json["type"];
    var url = json["url"];
    if (json["data"]) {
        var html = "?";
        for (var i in json["data"]) {
            html += i + "=" + json["data"][i] + "&";
        }
        html = html.substring(0, html.length - 1);
        url += html;
    }
    var success = json["success"];
    req.open(type, url, true);
    req.send();
    req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
            var result = req.responseText;
            if (json["dataType"] == "json") {
                result = JSON.parse(result);
            }
            success(result);
        }
    }
}
ajax({
    type: "get",
    url: "http://localhost:8055/listcount.php",
    data: {search: "l"},
    dataType: "json",
    success: function (result) {
        alert(result["count"]);

 }
});

以上代碼功能也是同樣 可是感受更好了 是否是有一點所謂jq中使用ajax的感受了 此刻能夠啦啦啦的 跳個舞了 千萬不要知足

 

代碼4:鑽石水平

var $ = {
    ajax: function (json) {
        var req = new XMLHttpRequest();
        var type = json["type"];
        var url = json["url"];
        if (json["data"]) {
            var html = "?";
            for (var i in json["data"]) {
                html += i + "=" + json["data"][i] + "&";
            }
            html = html.substring(0, html.length - 1);
            url += html;
        }
        var success = json["success"];
        req.open(type, url, true);
        req.send();
        req.onreadystatechange = function () {
            if (req.readyState == 4 && req.status == 200) {
                var result = req.responseText;
                if (json["dataType"] == "json") {
                    result = JSON.parse(result);
                }
                success(result);
            }
        }
    }
}

$.ajax({
    type: "get",
    url: "http://localhost:8055/listcount.php",
    data: {search: "l"},
    dataType: "json",
    success: function (result) {
        alert(result["count"]);
    }
});

怎麼樣 雖然寫的是原生ajax  可是寫出了jq底層代碼的味道   跟jq中使用方式如出一轍 參數 回調 封裝  面面俱到  水平高低  一看就知道了 本身都會寫 工做確定也就會用 這纔是鑽石水平    還有更高級的星耀 就能夠融入Promise 請求頭配置等等

不要小看任意一道面試題  可能其中另有深意  體驗本身的價值才能拿到更快拿到offer