一.技術概述

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請求中的屬性加以更改，否則將無效，

四.前后端分離實作原理

我們以java為例，傳統的開發會在jsp中通過嵌入java代碼實作與后端的鏈接，但這，寫過的都知道，比較笨重且麻煩，如果有一種辦法能讓瀏覽器自己通過腳本語言渲染資料就好了，于是，我們想到了Vue，

我們可以通過ajax請求給后端的Servlet,也就是MVC模式下的視圖層，然后通過回呼函式將資料存放在Vue物件中，而vue物件中的data是和頁面元素雙向系結的，這樣就能在不需要重繪頁面的情況下渲染新的元素，

這樣一來，前端就真的只是前端，后端就真的只是后端了，

前端請求后端介面的資料然后渲染到頁面，后端只需要負責開發供前端人員使用的介面，這樣一來，相比于傳統開發模式，開發效率將大大提高，

以上全部內容僅代表個人觀點，如有異議請及時指出，畢竟博主也只是個菜鳥，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/413460.html

標籤：其他

上一篇：UIScreen.main.bounds回傳不正確的大小

下一篇：Js基本包裝型別（含原理）

淺談使用ajax和vue實作前后端分離

一.技術概述

二.使用原理

三.案例示范

四.前后端分離實作原理