很多朋友都喜歡用JQ 而ajax更是JQ里必不可少的 下面為大家詳細(xì)介紹一下JQ的ajax

首先 什么是ajax：

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

簡短地說，在不重載整個(gè)網(wǎng)頁的情況下，AJAX 通過后臺加載數(shù)據(jù)，并在網(wǎng)頁上進(jìn)行顯示

jQuery 提供多個(gè)與 AJAX 有關(guān)的方法。

通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠(yuǎn)程服務(wù)器上請求文本、HTML、XML 或 JSON - 同時(shí)您能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁的被選元素中。

第一種

$("#id").load()

這算是比較常見的一種JQ的ajax的寫法  通過ID找到dom節(jié)點(diǎn) 然后等頁面加載完畢之后通過aja請求數(shù)據(jù)

load() 方法通過 AJAX 請求從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放置到指定的元素中

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

一共有三個(gè)參數(shù)

url：規(guī)定要將請求發(fā)送到哪個(gè) URL

data：可選。規(guī)定連同請求發(fā)送到服務(wù)器的數(shù)據(jù)，通常情況下如果只是簡單的請求數(shù)據(jù)這個(gè)參數(shù)可以忽略

function(response,status,xhr)：可選。規(guī)定當(dāng)請求完成時(shí)運(yùn)行的函數(shù)。請求完成后將要實(shí)現(xiàn)的函數(shù)。

雖然是可選 但是通常情況下都會寫的，因?yàn)檎埱髷?shù)據(jù)回來之后總是要操作數(shù)據(jù)做點(diǎn)什么對吧。

eg：

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

第二種

$.get();

相信對ajax稍微有點(diǎn)了解的朋友都知道get和post 那么同樣的 JQ里面也少不了他們兩個(gè)

使用get方法需要先知道你所要請求的數(shù)據(jù)是json類型還是JSONP類型

如果是json：

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

JSONP：

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

對于JSONP這兩種寫法的區(qū)別就在于傳遞參數(shù)的方式，第一種是直接在后面加？然后寫數(shù)據(jù)，第二種是逗號隔開之后在大括號里寫

第三種

$.post(URL,data,callback);

必需的 URL 參數(shù)規(guī)定希望請求的 URL。

可選的 data 參數(shù)規(guī)定連同請求發(fā)送的數(shù)據(jù)。

可選的 callback 參數(shù)是請求成功后所執(zhí)行的函數(shù)名

和get方法差不多  post也有不同的寫法

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

具體區(qū)別和上面get方法一樣

下面給大家說說get和post的區(qū)別

Get:
用get方式可傳送簡單數(shù)據(jù)，但大小一般限制在1KB下，數(shù)據(jù)追加到url中發(fā)送（http的header傳送），也就是說，瀏覽器將各個(gè)表單字段元素及其數(shù)據(jù)按照URL參數(shù)的格式附加在請求行中的資源路徑后面。另外最重要的一點(diǎn)是，它會被客戶端的瀏覽器緩存起來，那么，別人就可以從瀏覽器的歷史記錄中，讀取到此客戶的數(shù)據(jù)，比如賬號和密碼等。因此，在某些情況下，get方法會帶來嚴(yán)重的安全性問題。

Post:
當(dāng)使用POST方式時(shí)，瀏覽器把各表單字段元素及其數(shù)據(jù)作為HTTP消息的實(shí)體內(nèi)容發(fā)送給Web服務(wù)器，而不是作為URL地址的參數(shù)進(jìn)行傳遞，使用POST方式傳遞的數(shù)據(jù)量要比使用GET方式傳送的數(shù)據(jù)量大的多。

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

第四種

$.ajax();

這種方法估計(jì)是大家最常用到的，因?yàn)樵诖蠖鄶?shù)編譯軟件中例如Hbuilder，直接會出現(xiàn)類似的提示

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

而根據(jù)這個(gè)大家也很容易猜到這些參數(shù)的意義，需要注意的是async 這個(gè)是用來判斷同步異步的，通常情況下大家可以不用理會，直接刪掉就好，這時(shí)候可能有朋友會問了，成功之后的函數(shù)寫到哪里，別著急，看下面

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

只要這樣就可以在這個(gè)function函數(shù)內(nèi)對請求回來的數(shù)據(jù)進(jìn)行操作了。

第五種

$.getJSON();

這種方法可能大家不是很常見，但是不得不說這種方法是最簡潔也可以說是最方便的一種方法

$.getJSON("http://datainfo./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)                    })

如果大家是從上面一直看到這里的相信很容易理解這兩種寫法是做什么的  沒錯(cuò) 第一種是為了請求JSONP第二種是常規(guī)json數(shù)據(jù)

可能有朋友就不理解了，到底什么是JSONP什么是JSON，這個(gè)問題如果討論起來那就又是另一個(gè)話題了 在這里大家只需要知道你所要請求的數(shù)據(jù)

是什么類型的就好，通常在接口里都會給你說明的，而在ajax里怎么用也比較好區(qū)分，就是JSONP會加?callback=而json不需要，所以當(dāng)你看見？的時(shí)候

那么沒錯(cuò)了 他就是JSONP

第六種

$.getScript();

這種方法就厲害了，可能前五種方法大家只能請求數(shù)據(jù)，那么我問大家，當(dāng)大家想引用一個(gè)js文件的時(shí)候會怎么做呢？

是不是直接引用script標(biāo)簽引入，這里這種方法可以避免使用標(biāo)簽

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

這樣就可以直接引用test.js了。

然后再給大家說一說使用ajax中常見的一些問題及解決方法

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

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

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

4.服務(wù)器端請求參數(shù)區(qū)分Get與Post。如果是get方式則$username = $_GET["username"]; 如果是post方式，則$username = $_POST["username"];

AJAX亂碼問題

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

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

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

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

原文連接