jQuery-Ajax（詳解）

之前在思維導(dǎo)圖中介紹過(guò)集中請(qǐng)求Ajax的方法，但是只是匆匆說(shuō)過(guò)，最近看了一本書(shū)，覺(jué)得介紹的比較詳細(xì)，這里結(jié)合筆者自己的想法，重新彌補(bǔ)一下。之前寫(xiě)過(guò)的文章也會(huì)不斷的改善更新。歡迎提意見(jiàn)。

捕獲.PNG

安裝Web環(huán)境

Ajax方法需要與Web服務(wù)器端進(jìn)行交互，需要有環(huán)境才可正常使用，安裝環(huán)境的工具包有很多，可以選擇自行下載。筆者使用的是Apache。

jQuery中的Ajax

在jQuery中，$.Ajax()方法屬于最底層的方法，第2層是load()，$.get()，和$.post()，第3層是$.getScript()和$.getJSON()方法。

一、 load( ) 方法

結(jié)構(gòu)
load( url , [data] , [callback] )

參數(shù)解釋

捕獲.PNG

1.1 應(yīng)用

1.1.1首先構(gòu)建一個(gè)被load（）方法加載并追加到HTML文件，名字為xi.html，html代碼如下：

<ul>
    <li>《慢慢來(lái)，一切都來(lái)得及》</li>
    <li>《你的孤獨(dú)雖敗猶榮》</li>
    <li>《你只是看上去很努力》</li>
    <li>《JavaScript從入門(mén)到放棄》</li>
</ul>
<div>你篩選出來(lái)的元素</div>

1.1.2然后再新建一個(gè)空白頁(yè)面，用來(lái)追加的HTML內(nèi)容，HTML代碼如下：

<h3>你最喜歡讀什么書(shū)？</h3>
<p id="cont"></p>
<button>點(diǎn)擊</button>

1.1.3接下來(lái)就是編寫(xiě)Jquery代碼了，等DOM加載完畢之后，通過(guò)單擊按鈕來(lái)調(diào)用load（）方法，然后將xi.html的內(nèi)容加載到id=“cont”的元素里。
jQuery代碼如下：

$("button").click(function(){
    $("#cont").load("xi.html")//單擊時(shí)將xi.html的內(nèi)容加載到頁(yè)面上
    })
})

運(yùn)行結(jié)果：

GIF.gif

1.2篩選載入的HTML文檔

上面的例子是將xi.html頁(yè)面中的內(nèi)容都加載到id為“cont”的元素里，如果只要加載頁(yè)面內(nèi)的某些內(nèi)容，可以使用load（URL selector）方法的URL參數(shù)來(lái)達(dá)到目的。

注意：URL和選擇器之間有一個(gè)空格。

例如只需要加載xi.html的li元素中內(nèi)容，可以使用如下代碼：

$("button").click(function(){
    $("#cont").load("xi.html li");
})

運(yùn)行結(jié)果：

GIF.gif

1.3傳遞方式

load（）方法傳遞方式根據(jù)參數(shù)data來(lái)自動(dòng)指定。如果沒(méi)有參數(shù)傳遞，則采用get方式，反之，則自動(dòng)轉(zhuǎn)換為post方式。

$("button").click(function(){
    $("#cont").load("xi.html li"，{name:"rain"，age"18"}，function（）{
   //code....
  });
})

1.4 回調(diào)參數(shù)

對(duì)于必須在加載完成后才能繼續(xù)的操作，load（）方法提供了回調(diào)函數(shù)（callback），該函數(shù)有3個(gè)參數(shù)，分別代表“請(qǐng)求返回的內(nèi)容”，“請(qǐng)求狀態(tài)”，“XMLHttpRequest對(duì)象”，代碼如下：

$("#cont").load("xi.html li"，function（responseText，textStates，XMLHttpRequest）{
   //responseText：請(qǐng)求返回的內(nèi)容
   //textStates：請(qǐng)求狀態(tài)：success   error  notmodified  timeout4種
   //XMLHttpRequest：XMLHttpRequest對(duì)象
  });

注意：在load（）方法中，無(wú)論Ajax請(qǐng)求是否成功，只要請(qǐng)求完成?；卣{(diào)函數(shù)就被觸發(fā)。

二、 $.get( ) 方法和$.post（）方法

load（）通常是從web服務(wù)器上獲取靜態(tài)的數(shù)據(jù)文件，如果需要專遞一些參數(shù)給服務(wù)器中的頁(yè)面，可以使用 $.get( ) 方法和$.post（）方法（或$.ajax()方法）

2.1 $.get( ) 方法

結(jié)構(gòu)
$.get( url，[ data ]，[ callback ]，[ type ])
參數(shù)解釋

捕獲.PNG

2.1.1 應(yīng)用

下面是一段評(píng)論頁(yè)面的HTML代碼，通過(guò)該段代碼來(lái)介紹$.get（）方法的使用。

<p><h3>評(píng)論</h3></p>
<p>姓名:<input type="text" name="" id="name"></p>
<p>內(nèi)容:<textarea id="cont"></textarea></p>
<button>發(fā)表留言</button>
<hr>
<h3>已有評(píng)論</h3>
<div id="msg"></div>

該段代碼生成的頁(yè)面

捕獲.PNG

將姓名和內(nèi)容填寫(xiě)好后，就可以提交評(píng)論了。

確定請(qǐng)求的URl地址
$("button").click(function(){$.get("get_html.php"，data參數(shù)，回調(diào)函數(shù)})
提交之前，將姓名和內(nèi)容的值作為參數(shù)data傳遞給后臺(tái)

$("button").click(function(){$.get("get_html.php"，
   {"username":$("#name").val()，"content":$("#cont").val()}，
   回調(diào)函數(shù)）
})

如果服務(wù)器結(jié)構(gòu)到傳遞的data數(shù)據(jù)并成功返回，那么就可以通過(guò)回調(diào)函數(shù)將返回的數(shù)據(jù)顯示到頁(yè)面上
$.get()方法的回調(diào)函數(shù)只有兩個(gè)參數(shù)，

function(){
  //data：返回的內(nèi)容，可以是XML文檔，json文件，XHML片段等等
  //textStatus：請(qǐng)求狀態(tài)：success  error  notmodified timeout4種
}

data參數(shù)代表請(qǐng)求返回的內(nèi)容，textStatus參數(shù)代表請(qǐng)求狀態(tài)，而且回調(diào)含稅只有當(dāng)數(shù)據(jù)成功（success）后才能被調(diào)用

$("button").click(function(){$.get("get_html.php",{"username":$("#name").val(),"content":$("#cont").val()},function(data,textStatus,fn){
        if(textStatus=="success"){
            $(data).appendTo("#msg")
        }
    },
    "html"
    );
})

運(yùn)行結(jié)果

GIF.gif

2.2 $.post( ) 方法

它與$.get( )方法的結(jié)構(gòu)和使用方式都相同，不過(guò)之間仍然有一下區(qū)別

2.2.1get與post區(qū)別

1.post的安全性高于get；如果以get方式請(qǐng)求，請(qǐng)求參數(shù)會(huì)拼接到url后面，安全性性低，以post方式請(qǐng)求，請(qǐng)求參數(shù)會(huì)包裹在請(qǐng)求體中，安全性更高

2.數(shù)量區(qū)別：get方式傳輸?shù)臄?shù)據(jù)量小，規(guī)定不能超過(guò)2kb，post方式請(qǐng)求數(shù)據(jù)量大，沒(méi)有限制。

3.傳輸速度：get的傳輸速度高于post

因?yàn)槭褂梅椒ㄏ嗤?，因此只要改變jQuery函數(shù)，就可以將程序在GET請(qǐng)求和POST請(qǐng)求之間切換

$("button").click(function(){$.post("get_html.php",{"username":$("#name").val(),"content":$("#cont").val()},
   function(data,textStatus,fn){
        if(textStatus=="success"){
            $(data).appendTo("#msg")
        }
    },
    "html"
    );
})

運(yùn)行結(jié)果和GET一樣。

三、 $.getScript( ) 方法和$.getJson（）方法

3.1 $.getScript( )方法

有時(shí)候，在頁(yè)面出息加載時(shí)就獲取所需的全部JavaScript文件是完全沒(méi)有必要的，可以在需要的時(shí)候直接加載。jQuery提供了 $.getScript( )方法來(lái)直接加載js文件，與加載一個(gè)HTML片段一樣簡(jiǎn)單方便，并且不需要對(duì)JavaScript文件進(jìn)行處理，JavaScript文件會(huì)自動(dòng)執(zhí)行。

3.1.1結(jié)構(gòu)
$.getScript( url , fn )
url：請(qǐng)求地址
fn：回調(diào)函數(shù)

3.2.1應(yīng)用
新建一個(gè)basejs.js文件，隨機(jī)生成顏色的函數(shù)，代碼如下

function randomColor(){
    var str="0123456789abcdef";
    var color = "#";
    for (var i = 0; i < 6; i++) {
        color+=str[ Math.floor( Math.random()*str.length)];
    };
    return color;
}

當(dāng)我們點(diǎn)擊按鈕時(shí)加載js文件，給body添加顏色
jQuery代碼如下

$("button").click(function(){
    $.getScript("basejs.js",function(){
        $("body").click(function(){
            $(this).css("background-color",randomColor())
        })
    })
})

運(yùn)行結(jié)果

GIF.gif

3.2 $.getJson( )方法

$.getJson( )方法用于加載JSON文件，與$.getScript( )方法的用法相同
$.getJSON( url，回調(diào)函數(shù)})
當(dāng)點(diǎn)擊加載時(shí)，頁(yè)面上看不到任何效果，雖然函數(shù)加載了JSON文件，但是并沒(méi)有告知JavaScript對(duì)返回的數(shù)據(jù)如何處理，為此，所以在回調(diào)函數(shù)里我們可以處理返回的數(shù)據(jù)
通常我們需要遍歷我們得到的數(shù)據(jù)，雖然這里我們可以使用傳統(tǒng)的for循環(huán)，但是我們也可以通過(guò)$.each()，可以用來(lái)遍歷對(duì)象和數(shù)組，$.each()函數(shù)是以一個(gè)數(shù)組或者對(duì)象為第1個(gè)參數(shù)，以一個(gè)回調(diào)函數(shù)作為第2個(gè)參數(shù)，回調(diào)函數(shù)擁有兩個(gè)參數(shù)，第1個(gè)為對(duì)象的成員或者數(shù)組的下標(biāo)，第2個(gè)位對(duì)應(yīng)變量或內(nèi)容

$(function(){
  $("button").click(function(){
    $.getJSON( "text.json" , function( data ){
       $.each( data ， function（index，comment）{
         處理數(shù)據(jù)...
      }
    })
  })
})

四、 $.Ajax（）方法

前面用到的$.load()，$.get()，$.post()，$.getScript()，$.getJSON()這些方法，都是基于$.ajax()方法構(gòu)建的，$.ajax()是jQuery最底層的Ajax實(shí)現(xiàn)，因?yàn)榭梢杂脕?lái)代替前面的所有方法。

所以如果除了上面，還需要編寫(xiě)一下復(fù)雜的Ajax程序，那么就要用$.ajax()，$.ajax()不僅能實(shí)現(xiàn)與$.load()，$.get()，$.post()同樣的功能，而且還可以設(shè)定beforeSend（提交前回調(diào)函數(shù)）、error（請(qǐng)求失敗后處理）、success（請(qǐng)求成功后處理）、complete（請(qǐng)求完成后處理）回調(diào)函數(shù)，通過(guò)設(shè)定這些回調(diào)函數(shù)，可以給用戶更多的Ajax提示信息，另外，還有一些參數(shù)可以設(shè)置Ajax請(qǐng)求的超時(shí)時(shí)間或者頁(yè)面的“最后更改”狀態(tài)。

之前的文章里面有說(shuō)過(guò)$.Ajax（）方法。
這里不再贅述，直接引之前的例子

$.ajax({
url：請(qǐng)求地址
type:"get | post | put | delete " 默認(rèn)是get,
data:請(qǐng)求參數(shù) {"id":"123","pwd":"123456"},
dataType:請(qǐng)求數(shù)據(jù)類型"html | text | json | xml | script | jsonp ",
success:function(data,dataTextStatus,jqxhr){ },//請(qǐng)求成功時(shí)error:function(jqxhr,textStatus,error)//請(qǐng)求失敗時(shí)
})


$.ajax({
    url:"tom.php",
    type:"get",
    dataType:"text",
    success:function(data,textStatus,jqxhr){
        console.log("__成功__");
        console.log(data);
        console.log(textStatus);
        console.log(jqxhr);
        console.log("______");
    },
    error:function(jqxhr,textStatus,error){
        console.log("__失敗__");
        console.log(error);
        console.log(textStatus);
        console.log(jqxhr);
        console.log("******");  
    
    }
})

番外篇1

以下引用《鋒利的JQuery》

Ajax的優(yōu)勢(shì)

1、不需任何瀏覽器插件
不需任何瀏覽器插件，就可以被大多數(shù)瀏覽器所支持，用戶只需要允許JavaScript在瀏覽器上執(zhí)行即可。

2、優(yōu)秀的用戶體驗(yàn)。
最大的優(yōu)點(diǎn)，能在不刷新整個(gè)頁(yè)面的前提下更新數(shù)據(jù)，這使得Web應(yīng)用程序能迅速回應(yīng)用戶的操作。

3、提高Web程序的性能
與傳統(tǒng)模式相比，Ajax模式在性能上最大區(qū)別就是在于傳輸數(shù)據(jù)的方式，在傳統(tǒng)模式中，數(shù)據(jù)提交是通過(guò)表單（from）來(lái)實(shí)現(xiàn)的，而數(shù)據(jù)獲取的是靠全面刷新網(wǎng)頁(yè)來(lái)說(shuō)獲取整頁(yè)的內(nèi)容，Ajax的模式只是通過(guò)XMLHttpRequest對(duì)象來(lái)向服務(wù)器端提交需要提交的數(shù)據(jù)，即按需發(fā)送。

4、減輕服務(wù)器和寬帶的負(fù)擔(dān)
Ajax的工作的原理相當(dāng)于在用戶和服務(wù)器之間加了一個(gè)中間層，是用戶操作與服務(wù)器響應(yīng)異步化，他在客戶端創(chuàng)建Ajax引擎，把傳統(tǒng)方式下的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)移到客戶端，便于客戶端資源來(lái)處理，減輕服務(wù)器和寬帶的負(fù)擔(dān)。

Ajax的缺點(diǎn)

1、瀏覽器對(duì)XMLHttpRequest對(duì)象的支持度不足
Ajax的不足之一首先來(lái)自于瀏覽器，IE5.0及以后的版本才支持XMLHttpRequest對(duì)象（現(xiàn)階段大部分客戶端都在IE6以上），Mozilla，Netscape等瀏覽器支持XMLHttpRequest則更在其后，為了使得Ajax應(yīng)用能在各個(gè)瀏覽器中正常運(yùn)行，程序員必須花費(fèi)大量的精力編碼以兼顧各個(gè)瀏覽器之間的差別，來(lái)讓Aajx應(yīng)用能更好的兼容各個(gè)瀏覽器。

2、破壞瀏覽器前進(jìn)、后退按鈕的正常功能
在Ajax中，前進(jìn)和后退按鈕的功能都會(huì)失效，雖然可以通過(guò)一定的方法（添加錨點(diǎn)）來(lái)使用戶可以使用前進(jìn)和后退按鈕，但相對(duì)于傳統(tǒng)的方式卻麻煩了很多，對(duì)于用戶而言，他們經(jīng)常會(huì)碰到這種狀況，當(dāng)點(diǎn)擊一個(gè)按鈕觸發(fā)一個(gè)Ajax交互后又覺(jué)得不想這樣做，接著就去習(xí)慣性的單擊后退按鈕，結(jié)果發(fā)生了最不愿意看到的結(jié)果，瀏覽器后退到先前的一個(gè)頁(yè)面，通過(guò)Ajax交互得到的內(nèi)容完全消失了。

3、對(duì)搜索引擎的支持不足
通常搜索引擎都是通過(guò)爬蟲(chóng)來(lái)對(duì)互聯(lián)網(wǎng)上的數(shù)以億計(jì)的海量數(shù)據(jù)進(jìn)行搜索整理的，然而爬蟲(chóng)程序現(xiàn)在還不能理解那些奇怪的JavaScript代碼和因此引起的頁(yè)面內(nèi)容的變化，這使得應(yīng)用Ajax的站點(diǎn)在網(wǎng)絡(luò)推廣上相對(duì)于傳統(tǒng)站點(diǎn)處于劣勢(shì)。

4、開(kāi)發(fā)和調(diào)試工具的缺乏
JavaScript是Ajax的重要組成部分，在目前，由于缺少很好的JavaScript開(kāi)發(fā)和調(diào)試工具，使很多Web開(kāi)發(fā)者對(duì)于JavaScript望而生畏，這對(duì)于編寫(xiě)Ajax代碼就更加苦難了，勇士，目前許多Web開(kāi)發(fā)者已經(jīng)習(xí)慣使用可視化的工具，對(duì)于親自編寫(xiě)代碼有畏懼感，著她在一定程度上影響了大家對(duì)Ajax的應(yīng)用。

番外篇2

jQuery中的Ajax全局事件

jQuery簡(jiǎn)化Ajax操作不僅體現(xiàn)在調(diào)用Ajax方法和處理響應(yīng)方面，而且還體現(xiàn)在對(duì)調(diào)用Ajax方法過(guò)程中的HTTP請(qǐng)求的控制，通過(guò)jQuery提供的一些自定義全局函數(shù)，能夠?yàn)楦鞣N與Ajax相關(guān)的事件注冊(cè)回調(diào)函數(shù)。

例如
當(dāng)Ajax請(qǐng)求時(shí)，會(huì)觸發(fā)ajaxStart（）方法回調(diào)函數(shù)

當(dāng)Ajax請(qǐng)求結(jié)束時(shí)，會(huì)觸發(fā)ajaxStop（）方法的回調(diào)函數(shù)

這些都是全局函數(shù)，因此無(wú)論創(chuàng)建他們的代碼位于何處，只要有Ajax請(qǐng)求時(shí)，就會(huì)觸發(fā)他們。

比如，如果圖片加載速度比較慢，可以給用戶一些提示信息，常用的提示信息“加載中...”,代碼如下

<div id="loading>加載中...</div>

然后用css控制元素隱藏，當(dāng)Ajax請(qǐng)求開(kāi)始的時(shí)候，用來(lái)提示用戶正在進(jìn)行，當(dāng)Ajax請(qǐng)求結(jié)束后，將此元素隱藏。代碼如下

$("#loading").ajaxStart(function(){
    $(this).show()
});
$("#loading").ajaxStop(function(){
    $(this).hide();
})

這樣一來(lái)，在Ajax請(qǐng)求過(guò)程中，只要圖片還未加載完，就會(huì)一直顯示“加載中...”的提示信息，看似很簡(jiǎn)單的一個(gè)改進(jìn)，確極大的改善用戶的體驗(yàn)。
如果頁(yè)面中還有其他地方也是用Ajax，該提示信息仍然有效，因?yàn)樗侨值摹?br> jQuery的Ajax全局事件還有幾個(gè)方法，也可以在使用Ajax方法的過(guò)程中為其帶來(lái)方便。

捕獲.PNG
捕獲.PNG

這篇文章還真的挺耗時(shí)。伸懶腰~

累了么，講個(gè)笑話把！

給老婆發(fā)了一個(gè)520元的紅包后加發(fā)一句話：“我愛(ài)你”。
過(guò)了一會(huì)兒老婆回發(fā)了一個(gè)5.20元的紅包，也附加一句話：“我愛(ài)你，比你的還多一點(diǎn)！”

任何時(shí)候不要吝嗇你的贊美，喜歡就點(diǎn)贊咯~

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    前端進(jìn)階之旅閱讀 16,957評(píng)論 18贊 503
  • AJAX 原生js操作ajax 1.創(chuàng)建XMLHttpRequest對(duì)象 var xhr = new XMLHtt...
    碧玉含香閱讀 3,580評(píng)論 0贊 7
  • 第1章 jQuery實(shí)現(xiàn)Ajax應(yīng)用 1-1 使用load()方法異步請(qǐng)求數(shù)據(jù) 使用load()方法通過(guò)Ajax請(qǐng)...
    mo默22閱讀 1,913評(píng)論 1贊 9
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,277評(píng)論 0贊 1
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,513評(píng)論 0贊 2

友情鏈接更多精彩內(nèi)容