jQuery的ajax詳解

不少朋友都喜歡用JQ 而ajax更是JQ裏必不可少的 下面爲你們詳細介紹一下JQ的ajax

首先 什麼是ajax：

AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

簡短地說，在不重載整個網頁的狀況下，AJAX 經過後臺加載數據，並在網頁上進行顯示

jQuery 提供多個與 AJAX 有關的方法。

經過 jQuery AJAX 方法，您可以使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您可以把這些外部數據直接載入網頁的被選元素中。

第一種

$("#id").load()

這算是比較常見的一種JQ的ajax的寫法  經過ID找到dom節點 而後等頁面加載完畢以後經過aja請求數據

load() 方法經過 AJAX 請求從服務器加載數據，並把返回的數據放置到指定的元素中

load(url,data,function(response,status,xhr))

一共有三個參數

url：規定要將請求發送到哪一個 URL

data：可選。規定連同請求發送到服務器的數據，一般狀況下若是隻是簡單的請求數據這個參數能夠忽略

function(response,status,xhr)：可選。規定當請求完成時運行的函數。請求完成後將要實現的函數。

雖然是可選 可是一般狀況下都會寫的，由於請求數據回來以後老是要操做數據作點什麼對吧。

eg：

$("button").click(function(){
  $("div").load('demo_ajax_load.txt');
});

第二種

$.get();

相信對ajax稍微有點了解的朋友都知道get和post 那麼一樣的 JQ裏面也少不了他們兩個

使用get方法須要先知道你所要請求的數據是json類型仍是JSONP類型

若是是json：

$.get("http://datainfo.duapp.com/shopdata/getclass.php",function(data){
            console.log(data)        })

JSONP：

$.get("http://datainfo.duapp.com/shopdata/getuser.php?userID=f66",function(data){
            console.log(data)
        },"JSONP");
$.get("http://datainfo.duapp.com/shopdata/getCar.php",{userID:"f66"},function(data){
            console.log(data)
        },"JSONP")

對於JSONP這兩種寫法的區別就在於傳遞參數的方式，第一種是直接在後面加？而後寫數據，第二種是逗號隔開以後在大括號裏寫

第三種

$.post(URL,data,callback);

必需的 URL 參數規定但願請求的 URL。

可選的 data 參數規定連同請求發送的數據。

可選的 callback 參數是請求成功後所執行的函數名

和get方法差很少  post也有不一樣的寫法

$.post("http://datainfo.duapp.com/shopdata/getuser.php?userID=f66",function(data){
            console.log(data)        },"JSONP");        $.post("http://datainfo.duapp.com/shopdata/getCar.php",{userID:"f66"},function(data){            console.log(data)        },"JSONP")

具體區別和上面get方法同樣

下面給你們說說get和post的區別

Get:
用get方式可傳送簡單數據，但大小通常限制在1KB下，數據追加到url中發送（http的header傳送），也就是說，瀏覽器將各個表單字段元素及其數據按照URL參數的格式附加在請求行中的資源路徑後面。另外最重要的一點是，它會被客戶端的瀏覽器緩存起來，那麼，別人就能夠從瀏覽器的歷史記錄中，讀取到此客戶的數據，好比賬號和密碼等。所以，在某些狀況下，get方法會帶來嚴重的安全性問題。

Post:
當使用POST方式時，瀏覽器把各表單字段元素及其數據做爲HTTP消息的實體內容發送給Web服務器，而不是做爲URL地址的參數進行傳遞，使用POST方式傳遞的數據量要比使用GET方式傳送的數據量大的多。

總之，GET方式傳送數據量小，處理效率高，安全性低，會被緩存，而POST反之。

第四種

$.ajax();

這種方法估計是你們最經常使用到的，由於在大多數編譯軟件中例如Hbuilder，直接會出現相似的提示

$.ajax({
      type:"get",
      url:"",
      async:true
  });

而根據這個你們也很容易猜到這些參數的意義，須要注意的是async 這個是用來判斷同步異步的，一般狀況下你們能夠不用理會，直接刪掉就好，這時候可能有朋友會問了，成功以後的函數寫到哪裏，彆着急，看下面

$.ajax({
      type:"get",
      url:"",
      function(data){
            console.log(data)      
        }
  });

只要這樣就能夠在這個function函數內對請求回來的數據進行操做了。

第五種

$.getJSON();

這種方法可能你們不是很常見，可是不得不說這種方法是最簡潔也能夠說是最方便的一種方法

$.getJSON("http://datainfo.duapp.com/shopdata/getCar.php?userID=f66&callback=?",function(data){
           console.log(data)        })

    
$.getJSON("pro.json",function(data){            console.log(data)            sortPrice(data);            data.sort(function(a,b){               return a.price - b.price;            })           console.log(data)                    })

若是你們是從上面一直看到這裏的相信很容易理解這兩種寫法是作什麼的  沒錯 第一種是爲了請求JSONP第二種是常規json數據

可能有朋友就不理解了，到底什麼是JSONP什麼是JSON，這個問題若是討論起來那就又是另外一個話題了 在這裏你們只須要知道你所要請求的數據

是什麼類型的就好，一般在接口裏都會給你說明的，而在ajax裏怎麼用也比較好區分，就是JSONP會加?callback=而json不須要，因此當你看見？的時候

那麼沒錯了 他就是JSONP

第六種

$.getScript();

這種方法就厲害了，可能前五種方法你們只能請求數據，那麼我問你們，當你們想引用一個js文件的時候會怎麼作呢？

是否是直接引用script標籤引入，這裏這種方法能夠避免使用標籤

$("#btn").click(function(){
            $.getScript("test.js",function(){
                setTimeout(function(){
                    alert(2)
                },2000)
            })
        });

這樣就能夠直接引用test.js了。

而後再給你們說一說使用ajax中常見的一些問題及解決方法

使用Post方式需注意：
1.設置header的Context-Type爲application/x-www-form-urlencode確保服務器知道實體中有參數變量. 一般使用XmlHttpRequest對象的SetRequestHeader("Context-Type","application/x-www- form-urlencoded;")。例：

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2.參數是名/值一一對應的鍵值對,每對值用&號隔開.如 var name=abc&sex=man&age=18，注意var name=update.php?

abc&sex=man&age=18以及var name=?abc&sex=man&age=18的寫法都是錯誤的;
3.參數在Send(參數)方法中發送,例： xmlHttp.send(name); 若是是get方式，直接 xmlHttp.send(null);

4.服務器端請求參數區分Get與Post。若是是get方式則$username = $_GET["username"]; 若是是post方式，則$username = $_POST["username"];

AJAX亂碼問題

產生亂碼的緣由:
一、xtmlhttp 返回的數據默認的字符編碼是utf-8，若是客戶端頁面是gb2312或者其它編碼數據就會產生亂碼
二、post方法提交數據默認的字符編碼是utf-8，若是服務器端是gb2312或其餘編碼數據就會產生亂碼

解決辦法有：
一、若客戶端是gb2312編碼，則在服務器指定輸出流編碼
二、服務器端和客戶端都使用utf-8編碼

gb2312:header('Content-Type:text/html;charset=GB2312');

utf8:header('Content-Type:text/html;charset=utf-8');