一.技术概述

Ajax即Asynchronous?Javascript?And?XML,它的意思是异步js和xml,包括:?HTML?或?XHTML, CSS,?JavaScript,?DOM, XML,?XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

以上内容引用自百度百科。

二.使用原理

ajax帮我们封装了javascript的XmlHttpRequest对象，使得我们可以很轻松地通过url地址来获取到一些数据，再通过dom操作将数据渲染到页面上，这样我们便不需要刷新整个页面，就能在前端上非常快速地改变外观。

而vue则为我们提供了数据和dom的响应式驱动，帮助我们实时渲染页面中的dom元素，而不再需要我们使用原生js复杂臃肿的document.queryselector方法获取元素再做操作。

总之，ajax负责获取数据，vue负责实时渲染数据，就这么简单。

三.案例示范

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue和ajax的配合使用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
</head>

<body>
    <div id="app">
       <span>{{message}}</span>
       <input type="button" value="获取Message" @click="getMessage">
    </div>

    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                message: "demo"
            },
            methods: {
                getMessage:function(){
                    var that=this;
                    $.ajax({
                    type: "method",
                    url: "url",
                    data: "data",
                    dataType: "dataType",
                    success: function (response) {
                        that.message = response.data;
                    }
                });
                }
            }
        })

    
    </script>
</body>

</html>

在这个案例中，我引入了vue2.0和jquery的官方地址，并随手写了一个id为app的div，在这个div中的span标签中，将我在vue对象中声明的message变量渲染在这里，如读者所见，它的初值是"demo"。

另外，除了声明了变量，我还声明了一个函数，名叫getMessage，它将作为ajax请求的回调函数，它的作用是：获取ajax请求得到的数据并且赋值给message变量。div中的按钮通过vue指令@click绑定了这个函数。当我们点击了这个按钮后，message变量的值就会发生变化，随之发生的就是页面数据的实时渲染，这非常酷！

这里要注意的是，getMessage()函数中的this指向问题。如读者所见，我们必须先将this存放到that(当然也可以取别的名字)中，在ajax回调中使用that而不是this。

如果你使用以下这种写法，那你就大错特错了！

 <script>
        var vue = new Vue({
            el: "#app",
            data: {
                message: "demo"
            },
            methods: {
                getMessage:function(){
                    
                    $.ajax({
                    type: "method",
                    url: "url",
                    data: "data",
                    dataType: "dataType",
                    success: function (response) {
                        this.message = response.data;
                    }
                });
                }
            }
        })
    </script>

这样去写，会导致this.message报undefined异常。这就是this指向不对的问题。

说了这么多，如果读者想要复制这段代码自己测试的话，请将ajax请求中的属性加以更改，否则将无效。