原生js、jQuery和Vue.js的Ajax的详细对比

原生js

ajax('get', 'http://127.0.0.1:3000/get', function(response){
            alert(JSON.parse(response)['message']);
        });
ajax('post', 'http://127.0.0.1:3000/post', function (response) {
            alert(JSON.parse(response)['message']);
        }, JSON.stringify({name: "post测试"}));
function ajax(method, url, callback, data, async){
        var data=data || null;
        var async=async || true;
        var xhr = new window.XMLHttpRequest || ActiveXObject('Microsoft.XMLHTTP');
        xhr.open(method, url, async);
        xhr.setRequestHeader('content-type', 'application/json');
        xhr.send(data);
        console.log("发送的数据是："+data);
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status >=200&&xhr.status<300||xhr.status==304){
                    console.log("完成请求，响应就绪");
                    callback(this.responseText);
                }
            }
        }
    }

原生js-Promise

ajax('get', 'http://127.0.0.1:3000/get').then(function (data) {
            alert(JSON.parse(data).message);
        }).catch(function (error) {
            alert(error);
        });
ajax('post', 'http://127.0.0.1:3000/post', JSON.stringify({ name: "post测试" })).then(function (data) {
            alert(JSON.parse(data).message);
        }).catch(function (error) {
            alert(error);
        });
function ajax(method, url, data, async) {
        var data = data || null;
        var async = async || true;
        var xhr = new window.XMLHttpRequest || ActiveXObject('Microsoft.XMLHTTP');
        xhr.open(method, url, async);
        xhr.setRequestHeader('content-type', 'application/json');
        xhr.send(data);
        console.log("发送的数据是：" + data);
        return new Promise(function (resolve, reject) {
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                        console.log("完成请求，响应就绪");
                        resolve(this.responseText);
                    }
                    else {
                        reject(new Error(this.statusText));
                    }
                }
            }
        });
    }

jQuery

$.get('http://127.0.0.1:3000/get', function(data, status){
            alert(data.message);
        });
$.post('http://127.0.0.1:3000/post', {
            name: 'post测试',
        }, function(data, status){
            alert(data.message);
        });

Vue.js

new Vue().$http.get('http://127.0.0.1:3000/get').then(function (res) {
            alert(res.body.message);
        }, function () {
            console.log('请求失败处理');
        });
new Vue().$http.post('http://127.0.0.1:3000/post', { name: "post测试"}, { emulateJSON: true }).then(function (res) {
            alert(res.body.message);
        }, function (res) {
            console.log(res.status);
        });

关于这几个版本的Ajax的实验测试和我的总结，可以查看我的关于Ajax的jQuery、Vue.js、原生js的各个版本的实现对比