关于Ajax的jQuery、Vue.js、原生js的各个版本的实现对比

Posted on by mannuan 2 mins read

目录

前言

1、原生js实现

2、原生js实现——Promise版本

3、jQuery实现

4、Vue.js实现

总结

前言

下面对于各个版本的Ajax代码，想要实际测试它们，可以把它命名为server2.html，然后放在当前目录views目录下面。具体的教程可以看测试Ajax的Nodejs服务端代码

1、原生js实现

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>原生js版本</title>
</head>

<body>
    <div><button>点击我发送get请求</button></div>
    <div><button>点击我发送post请求</button></div>
</body>
<script>
    document.getElementsByTagName('button')[0].addEventListener('click', function () {
        ajax('get', 'http://127.0.0.1:3000/get', function (response) {
            alert(JSON.parse(response)['message']);
        });
    });
    document.getElementsByTagName('button')[1].addEventListener('click', function () {
        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) {
        data = data || null;
        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);
                }
            }
        }
    }
</script>

</html>

2、原生js实现——Promise版本

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>原生js版本——Promise版本</title>
</head>

<body>
    <div><button>点击我发送get请求</button></div>
    <div><button>点击我发送post请求</button></div>
</body>
<script>
    document.getElementsByTagName('button')[0].addEventListener('click', function () {
        ajax('get', 'http://127.0.0.1:3000/get').then(function (data) {
            alert(JSON.parse(data).message);
        }).catch(function (error) {
            alert(error);
        });
    });
    document.getElementsByTagName('button')[1].addEventListener('click', function () {
        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) {
        return new Promise(function (resolve, reject) {
            data = data || null;
            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("完成请求，响应就绪");
                        resolve(this.responseText);
                    }
                    else {
                        reject(new Error(this.statusText));
                    }
                }
            }
        });
    }
</script>

</html>

3、jQuery实现

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery版本</title>
    <script src='https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js'></script>
</head>
<body>
    <div><button>点击我发送get请求</button></div>
    <div><button>点击我发送post请求</button></div>
</body>
<script>
    document.getElementsByTagName('button')[0].addEventListener('click', function(){
        $.get('http://127.0.0.1:3000/get', function(data, status){
            alert(data.message);
        });
    });
    document.getElementsByTagName('button')[1].addEventListener('click', function () {
        $.post('http://127.0.0.1:3000/post', {
            name: 'post测试',
        }, function(data, status){
            alert(data.message);
        });
    });
</script>
</html>

4、Vue.js实现

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Vue.js版本</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
    <div><button>点击我发送get请求</button></div>
    <div><button>点击我发送post请求</button></div>
</body>
<script>
    document.getElementsByTagName('button')[0].addEventListener('click', function(){
        new Vue().$http.get('http://127.0.0.1:3000/get').then(function (res) {
            alert(res.body.message);
        }, function () {
            console.log('请求失败处理');
        });
    });
    document.getElementsByTagName('button')[1].addEventListener('click', function () {
        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);
        });
    });
</script>
</html>

总结

  • 使用原生js写ajax步骤比较麻烦，考虑的东西比较多，但是最接近底层，对于理解ajax很有帮助；
  • Promise是同步的，但是.then.catch是异步的，具体可以查看验证Promise是同步的；
  • jQuery实现的写法比较简洁；
  • Vue.js的写法和Promise写法很像，其实内部就是通过Promise来实现的；
  • 其实根据Promise可以将上面4种方法分为两类：
    • 使用Promise：方法2、4
    • 不使用Promise：方法1、3
  • 关于这四个方法Ajax，我专门截取了一些主要的代码片断，进行了更加精确的对比，请查看原生js、jQuery和Vue.js的Ajax的详细对比