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亂碼問題

產生亂碼的原因:
1、xtmlhttp 返回的數據默認的字符編碼是utf-8，如果客戶端頁面是gb2312或者其它編碼數據就會產生亂碼
2、post方法提交數據默認的字符編碼是utf-8，如果服務器端是gb2312或其他編碼數據就會產生亂碼

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

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

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