基於Ajax技術的先後端Json數據交互方式實現

前言

使用瀏覽器訪問網站是平常生活中必不可少的一件事情，當咱們在瀏覽器地址欄中輸入網址後會看到網站的內容，那麼這個過程當中發生了什麼?下面簡單介紹下瀏覽器訪問網站過程。

第一步：瀏覽器向DNS服務器發起DNS請求，DNS服務器解析域名後返回域名對應的網站服務器IP地址
第二步：瀏覽器獲取IP地址後向網絡服務器發送一個HTTP請求
第三步：網絡服務器解析瀏覽器的請求後從數據庫獲取資源，將生成的html文件封裝至HTTP 響應包中，返回至瀏覽器解析

下圖抓包顯示了訪問「www.baidu.com」時，DNS請求和響應、HTTP請求和響應

第四步：瀏覽器解析HTTP 響應後，下載html文件，繼而根據文件內包含的外部引用文件、圖片或者多媒體文件等逐步下載，最終將獲取到的所有文件渲染成完整的網站頁面。

下圖顯示GET請求到HTML文件後繼續請求了多個JS、CSS文件

---

前端與後端

瀏覽器顯示的網頁即爲web前端界面，提供用戶與網站進行交互的可視化接口，而web後端服務主要指在服務器中執行的邏輯運算和數據處理，它爲前端提供着訪問服務。所謂的先後端只是從代碼被執行的位置來區分的，前端代碼在用戶面前被執行，後端代碼在遙遠的服務器上被執行。可是，不管前端或後端代碼，都是存放在服務器上的，只是當瀏覽器請求的時候，從服務器發送過去而已。

---

AJAX介紹

在上述web應用工做的原理中，咱們經過HTTP協議訪問一個在服務端存在的文件，服務器能夠找到該文件並將其內容封裝到HTTP請求中，以消息體的形式返回給客戶端。不過這種方式只能訪問靜態的頁面，沒法與後端數據庫進行交互。既然用戶須要經過web前端實時與後端數據庫進行交互，那麼網頁也須要動態的更新，若是每次更新一個數據都經過從新獲取Html文件的方式來實現勢必會致使網絡負荷加劇，頁面加載遲緩。而Ajax技術能夠很好的解決這個問題。

Ajax即異步JavaScript和XML，是一種建立交互式網頁的技術，能夠不從新加載整個網頁的狀況下更新部分網頁。目前jQuery庫提供多個與AJAX相關的方法。經過 jQuery AJAX方法，可以使用HTTP Get和HTTP Post從遠程服務器上請求文本、HTML、XML或JSON，同時可以把這些外部數據直接載入網頁被選元素中。

做爲web開發人員普遍採用的JavaScript封裝庫之一的jQuery庫，它能夠極大地簡化咱們的JavaScript編程，緩解瀏覽器之間不兼容的影響，要知道在不一樣瀏覽器中進行web網頁的兼容性測試也是一個不小的工做量。咱們能夠經過一個簡單的例子發現jQuery庫的優點所在：

$("p.neat").addClass("ohmy").show("slow");

經過以上簡短的代碼，開發者能夠遍歷「neat」類中全部的<p>元素，而後向其增長「ohmy」類，同時以動畫效果緩緩顯示每個段落。開發者無需檢查客戶端瀏覽器類型，無需編寫循環代碼，無需編寫複雜的動畫函數，僅僅經過一行代碼就能實現上述效果。jQuery的口號「最少的代碼作最多的事情」果然名副其實，它把JavaScript帶到了一個更高的層次。

---

JSON格式介紹

對於交互的數據格式，這裏採用JSON(JavaScript Object Notation)，它是一種輕量級的數據交換格式，採用徹底獨立於編程語言的文本格式來存儲和表示數據。JSON鍵值的層次結構簡潔清晰，易於閱讀和編寫，使得 JSON 成爲理想的數據交換語言。舉個例子來理解JSON數據格式：

{//JSON鍵/值對
「'wJsona'」:」kkk」
「'wjsonb'」:」12」
「'wjsonc」:」80」
}

---

代碼實現

下面介紹前端jQuery .ajax()請求JSON數據的方法，代碼以下：

        function useTestFun() {
            $.ajax({
                url: "/Usedefine",//獲取數據的URL
                data:JSON.stringify({
                    'wJsona':"kkk",        
                    'wjsonb':12,
                    'wjsonc':80,
                }),
                type: "POST",//HTTP請求方法
                dataType:'JSON',//獲取數據執行方式
                success:function(data){
                    if(data.status == 'True'){//傳入爲JSON對象格式
                        alert('鏈接成功');
                    }
                    else{ 
                        $("#labletip").show();
                    }
                },
                error:function(err){
                    alert('鏈接失敗');
                }
            });
        }

在數據傳輸過程當中，JSON是以文本，即字符串的形式傳遞的，而JS操做的是JSON對象，因此JSON對象和JSON字符串之間的相互轉換是關鍵，可使用JSON.stringify()將JSON對象轉化爲JSON字符串，使用JSON.parse()將JSON字符串轉換爲JSON對象。

JSON字符串:    var str1 = '{ "name": "cxh", "sex": "man" }'; 
    JSON對象:    var str2 = { "name": "cxh", "sex": "man" };
var obj = str.parseJSON(); //由JSON字符串轉換爲JSON對象
var obj = JSON.parse(str); //由JSON字符串轉換爲JSON對象
var last = obj.toJSONString(); //將JSON對象轉化爲JSON字符
var last = JSON.stringify(obj); //將JSON對象轉化爲JSON字符

以下所示爲HTTP協議中JSON數據的傳輸格式，後端服務器可以使用第三方JSON庫來處理JSON數據，返回JSON數據時對HTTP協議的Content-Type字段設置爲「application/json」。