前端學習——JQuery Ajax使用經驗

標籤：ajax   getjson   

0.前言    在項目推進過程中經常使用Ajax，通過Jquery提供的函數可以非常方便的使用Ajax，但是在實際使用中也遇到一些問題，例如如何防止瀏覽器使用緩衝，如何使用同步方式等。通過博文整理總結希望自身有所提高。    在這裡通過一個加法例子說明問題.為了突出ajax，前端網頁和後端PHP程式儘可能的簡單。
    【前端】——add.html
圖1 add頁面    【後端】——add.php

<?php// 返回JSON格式header('Content-Type:application/json;charset=utf-8');$result = array();$result["result"] = $_GET["a"] + $_GET["b"];echo json_encode($result, JSON_NUMERIC_CHECK);?>

    【代碼倉庫】——test-jquery-ajax     代碼倉庫位於bitbucket使用Hg(而不是Git)，Hg在windows或ubuntu上均有很好用的GUI工具——TortoiseHg，本人愚笨沒能熟練掌握Git。    【TortoiseHg使用說明】——如果沒有使用過Hg請參考博文hg clone部分操作即可。       【JQuery 中文API】
1.常用的getJSON    在項目推進過程中使用的最多的便是getJSON，getJSON可從伺服器獲得一個JSON資料包，請注意若使用JSON格式伺服器HTTP首部中應包含application/json資訊，否則會產生相容性問題（簡單說IE就可能出問題）。

    var submit_async = function() {        $.getJSON('add.php', {             a: $('input[name="a"]').val(),            b: $('input[name="b"]').val()        },         function(data) {            $('#result').text(data.result);        });    };

    【HTTP請求和響應】
圖2 完整的HTTP請求和響應
2.防止瀏覽器使用緩衝    瀏覽器為了加快運行速度，如果反覆請求同一個URL，那麼瀏覽器會使用緩衝中的內容而不在向伺服器重新請求。為了防止瀏覽器使用緩衝，可以在URL之後加入一些變化的內容，最常用的方法便是加入目前時間的毫秒值，例如加入&now=<目前時間毫秒值>。（即使用這種方法也存在一些“頑固派”，例如運行iOS6系統的safari瀏覽器）。

    var submit_async = function() {        $.getJSON('add.php', {             a: $('input[name="a"]').val(),            b: $('input[name="b"]').val(),            now: new Date().getTime() // 防止瀏覽器使用緩衝        },         function(data) {            $('#result').text(data.result);        });    };

    【HTTP請求和響應】
圖3 完整的HTTP請求和響應
3.使用同步方式    getJSON方法並沒有同步選項，如果使用同步方式可使用ajax原生方法。同步方式需要設定async選項為false。

    var submit_sync = function() {        $.ajax({            type: "get",            url: 'add.php',            async: false, // 使用同步方式            data: {                a: $('input[name="a"]').val(),                b: $('input[name="b"]').val(),                now: new Date().getTime() // 注意不要在此行增加逗號            },            contentType: "application/json; charset=utf-8",            dataType: "json",            // cache: false,            success: function(data) {                $('#result').text(data.result);            } // 注意不要在此行增加逗號        });    }

    【HTTP請求和響應】    HTTP請求和響應同圖3.
4.再議防止瀏覽器使用緩衝    在ajax方法中有一個cache選項，如果設定為cache:false意為禁止瀏覽器緩衝。實現的方法和【2】非常相似，該參數在URL之後加入&_=<目前時間毫秒值>

    var submit_sync = function() {        $.ajax({            type: "get",            url: 'add.php',            async: false, // 使用同步方式            data: {                a: $('input[name="a"]').val(),                b: $('input[name="b"]').val()            },            contentType: "application/json; charset=utf-8",            dataType: "json",            cache: false,            success: function(data) {                $('#result').text(data.result);            } // 注意不要在此行增加逗號        });    }

    【HTTP請求和響應】
圖4 完整的HTTP請求和響應