PHP-Web程序設(shè)計(jì)與Ajax技術(shù)之jQueryAjax基礎(chǔ)

PHPWeb程序設(shè)計(jì)與Ajax技術(shù)唐四薪主編

清華大學(xué)出版社 ISBN：9787302344735 2014年1月第9章基于jQuery的Ajax技術(shù)瀏覽器發(fā)送HTTP請(qǐng)求的三種方式輸入網(wǎng)址(請(qǐng)求載入頁面)提交表單(發(fā)送數(shù)據(jù)并載入頁面)用XMLHttpRequest對(duì)象發(fā)送異步HTTP請(qǐng)求〔頁面不會(huì)刷新〕瀏覽器Web效勞器HTTP請(qǐng)求HTTP響應(yīng)(完整的頁面)頁面會(huì)刷新HTTP響應(yīng)(HTML片段或字符串等)Ajax概述Ajax：異步JavaScript和XML〔AsynchronousJavaScriptandXML〕本質(zhì)：異步刷新頁面的局部區(qū)域10-17.html10-9-2.htmlAjax：客戶端編程和效勞器端編程的綜合運(yùn)用客戶端編程：HTML、CSS、JavaScript效勞器端編程：如ASP傳統(tǒng)的Web應(yīng)用程序傳統(tǒng)的Web應(yīng)用程序：發(fā)送請(qǐng)求給效勞器→效勞器對(duì)請(qǐng)求進(jìn)行處理〔此時(shí)客戶端需等待〕→處理完成后效勞器發(fā)送回全新的頁面客戶端服務(wù)器時(shí)間用戶操作用戶操作用戶操作服務(wù)器處理服務(wù)器處理等待等待傳統(tǒng)Web應(yīng)用程序的缺乏一個(gè)HTTP請(qǐng)求對(duì)應(yīng)一個(gè)頁面加載頁面時(shí)用戶必須等待Ajax技術(shù)〔可以解決這兩個(gè)問題〕異步：煮飯的過程中我們可以繼續(xù)做菜瀏覽器與效勞器交互的過程中，用戶仍然可以在瀏覽器上進(jìn)行其他一些操作?；贏jax的Web應(yīng)用程序Ajax程序：在與Web效勞器交互的過程中只傳輸頁面上需要做更改的區(qū)域，而不傳輸整個(gè)頁面；同時(shí)，在與Web效勞器交互的過程中，客戶端仍然可以在當(dāng)前頁面繼續(xù)操作，而不必等待效勞器的響應(yīng)。瀏覽器Web效勞器HTTP請(qǐng)求HTTP響應(yīng)(HTML片段或字符串等)基于Ajax的Web應(yīng)用程序客戶端服務(wù)器時(shí)間用戶操作服務(wù)器處理服務(wù)器處理Ajax引擎客戶端處理9.1.2載入頁面的方法比較<iframe>標(biāo)記遠(yuǎn)程腳本技術(shù)Ajax技術(shù)9.1.3用原始的Ajax技術(shù)載入文檔Ajax技術(shù)的核心：XMLHttpRequest對(duì)象

XMLHttpRequest對(duì)象可以在不重新加載頁面的情況下更新頁面的局部windowXMLHttpRequestlocationdocument……XMLHttpRequest對(duì)象的工作過程自動(dòng)售水機(jī)①投硬幣②準(zhǔn)備容器接水③出水XMLHttpRequest對(duì)象的工作過程與自動(dòng)售貨機(jī)售貨過程的比照自動(dòng)售水機(jī)①投幣②準(zhǔn)備接水④接水用戶③出水瀏覽器Web效勞器〇初始化XMLHttpRequest對(duì)象①發(fā)送異步請(qǐng)求③返回響應(yīng)④用容器元素載入響應(yīng)的內(nèi)容②監(jiān)聽效勞器響應(yīng)

XMLHttpRequest對(duì)象的工作過程創(chuàng)立XMLHttpRequest對(duì)象的實(shí)例使用open()方法指定載入文檔請(qǐng)求使用send()方法發(fā)送請(qǐng)求——投硬幣使用onreadystatechange事件監(jiān)聽效勞器——準(zhǔn)備接水使用DOM元素載入效勞器返回的內(nèi)容——接水①創(chuàng)立XMLHttpRequest對(duì)象的實(shí)例創(chuàng)立XMLHttpRequest對(duì)象的實(shí)例varxmlHttpReq; if(window.ActiveXObject){ xmlHttpReq=newActiveXObject("Microsoft.XMLHTTP"); } elseif(window.XMLHttpRequest){ xmlHttpReq=newXMLHttpRequest(); }針對(duì)IE6

針對(duì)除IE6以外的瀏覽器

②使用open()方法指定載入文檔請(qǐng)求使用XMLHttpRequest對(duì)象的open()方法指定載入文檔的HTTP請(qǐng)求類型、文件名以及是否為異步方式

xmlHttpReq.open("GET","9-2.html",True);

請(qǐng)求的方式請(qǐng)求的URL是否為異步方式③使用send()方法發(fā)送請(qǐng)求使用open()方法指定了請(qǐng)求后，還要用send()方法將請(qǐng)求發(fā)送出去xmlHttpReq.send(null);如果不寫null，那么在Firefox中無法運(yùn)行④使用onreadystatechange事件監(jiān)聽效勞器用send()方法發(fā)送了一個(gè)載入文檔的請(qǐng)求后，還要準(zhǔn)備接收效勞器端返回的文檔或內(nèi)容。這時(shí)需要用事件監(jiān)聽機(jī)制來捕獲請(qǐng)求的狀態(tài)，onreadystatechange事件實(shí)現(xiàn)這一功能。xmlHttpReq.onreadystatechange=RequestCallBack; functionRequestCallBack(){ if(xmlHttpReq.readyState==4&&xmlHttpReq.status==200){

document.getElementById("target").innerHTML=xmlHttpReq.responseText; } }出來的水說明①onreadystatechange事件中的事件處理函數(shù)只有在readyState屬性發(fā)生改變時(shí)才會(huì)觸發(fā)，readyState的值表示效勞器對(duì)當(dāng)前請(qǐng)求的處理狀態(tài)，可以根據(jù)這個(gè)值來進(jìn)行不同的處理。readyState有五種可取值〔0：尚未初始化；1：正在加載；2：加載完畢；3：正在處理；4：處理完畢〕status屬性說明請(qǐng)求是否已經(jīng)成功，如果status屬性值為200說明一切正常，效勞器已成功接收了客戶端的請(qǐng)求說明②效勞器在收到客戶端的請(qǐng)求后，根據(jù)請(qǐng)求返回相應(yīng)的內(nèi)容。

文本形式:存儲(chǔ)在responseText中，

XML格式:存儲(chǔ)在responseXML中。它們都是只讀屬性，只有當(dāng)readyState屬性值為4的時(shí)候，才能通過它們獲取完整的響應(yīng)信息。如果設(shè)置效勞器端響應(yīng)內(nèi)容類型為Response.ContentType="text/xml"，responseXML才會(huì)有值并被解析成一個(gè)XML文檔。說明運(yùn)行之前必須將這兩個(gè)文件都保存為utf-8編碼方式。因?yàn)閄MLHttpRequest對(duì)象傳輸數(shù)據(jù)采用的默認(rèn)編碼方式是utf-8。IE瀏覽器的Ajax緩存問題在Ajax應(yīng)用中，當(dāng)用戶訪問一次后，再進(jìn)行訪問時(shí)而且XMLHttpRequest請(qǐng)求中的URL不變時(shí)，在IE中就會(huì)發(fā)生這樣的現(xiàn)象，那就是取URL中的網(wǎng)頁不會(huì)到效勞器端取，而是直接從IE的緩存中取。解決方法：①加隨機(jī)數(shù)

xmlHttpReq.open("get","9-2.html?t="+Math.random());②加時(shí)間戳方法

xmlHttpReq.open("get","9-2.html?t="+newDate().getTime())載入PHP文檔用Ajax技術(shù)可以載入任何網(wǎng)頁文檔，如果載入的是動(dòng)態(tài)網(wǎng)頁〔如PHP〕，那么效勞器端會(huì)先執(zhí)行動(dòng)態(tài)網(wǎng)頁，再將生成的靜態(tài)HTML代碼發(fā)送給客戶端，因此客戶端網(wǎng)頁加載的是動(dòng)態(tài)網(wǎng)頁執(zhí)行后的靜態(tài)HTML代碼Ajax程序與傳統(tǒng)PHP程序的區(qū)別在獲取并顯示效勞器端數(shù)據(jù)時(shí)，頁面并沒有刷新由于頁面沒有刷新，瀏覽器不知道效勞器什么時(shí)候完成了對(duì)請(qǐng)求的處理，所以需要onreadystatechange進(jìn)行監(jiān)聽傳統(tǒng)的Web編程與Ajax編程的區(qū)別客戶端發(fā)送請(qǐng)求的方式不同效勞器生成的響應(yīng)不同客戶端加載響應(yīng)的方式不同XMLHttpRequest與效勞器端通信的步驟①創(chuàng)立XMLHttpRequest對(duì)象；②使用open()方法設(shè)置XMLHttpRequest對(duì)象請(qǐng)求的URL、發(fā)送HTTP請(qǐng)求的方式以及是否為異步模式等；③使用send()方法發(fā)送HTTP請(qǐng)求；④使用onreadystatechange事件監(jiān)聽效勞器端的反響，根據(jù)readyState屬性來判斷效勞器是否已經(jīng)對(duì)請(qǐng)求處理完成，一旦完成那么接收效勞器端傳回的數(shù)據(jù)XMLHttpRequest對(duì)象與效勞器通信的過程初始化發(fā)送請(qǐng)求等待效勞器響應(yīng)獲取響應(yīng)用回調(diào)函數(shù)監(jiān)控XMLHttpRequest對(duì)象的狀態(tài)，當(dāng)readyState為4時(shí)獲取效勞器響應(yīng)對(duì)XMLHttpRequest對(duì)象的反思①XMLHttpRequest對(duì)象雖然名稱中含有XML，但它并不限于和XML文檔一起使用，它可以接收任何形式的文本文檔，如HTML文檔、JSON文檔、XML文檔等。②XMLHttpRequest對(duì)象與ASP中的Request對(duì)象的功能也完全不同，Request對(duì)象是效勞器端的對(duì)象，它的作用是獲取從客戶端發(fā)送來的數(shù)據(jù)；而XMLHttpRequest對(duì)象是位于客戶端瀏覽器中的對(duì)象，它的作用是發(fā)送數(shù)據(jù)給效勞器后再從效勞器獲取傳回來的數(shù)據(jù)發(fā)送數(shù)據(jù)給效勞器Get方式xml.open("get","9-3.php?user=tang&n="+Math.random());Post方式xml.open("post","9-3.php");xml.setRequestHeader('Content-type','application/x-www-form-urlencoded');xml.send("username="+user+"&n="+Math.random());9.2用jQueryAjax方法載入文檔jQuery中常用的Ajax方法方法功能load(url,[data],[callback])載入遠(yuǎn)程HTML文件代碼并插入至DOM元素中$.get(url,[data],[callback],[type])通過遠(yuǎn)程HTTPGET請(qǐng)求載入信息$.post(url,[data],[callback],[type])通過遠(yuǎn)程HTTPPOST請(qǐng)求載入信息$.ajax(options)通過HTTP請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)，jQuery的底層Ajax實(shí)現(xiàn)。使用load方法載入HTML文檔Ajax的本質(zhì)特征就是刷新頁面的局部，這主要是通過將遠(yuǎn)程的文檔載入到頁面的局部元素中實(shí)現(xiàn)的load()方法能載入遠(yuǎn)程HTML文檔并將其插入到指定的DOM元素中。它的語法為

load(url[,data][,callback])functionAjax(){

$("#target").load("9-3.php");

}用load方法載入9-3.php到#target元素中l(wèi)oad()方法的參數(shù)參數(shù)名稱類型說明urlString請(qǐng)求HTML文檔的URL地址data（可選）Object發(fā)送至服務(wù)器的key:value數(shù)據(jù)（Json類型數(shù)據(jù)）callback（可選）Function請(qǐng)求完成時(shí)的回調(diào)函數(shù)，無論請(qǐng)求成功或失敗2.載入HTML文檔中的指定元素functionAjax(){ $(“#target”).load(“9-5.html.title”); //URL和選擇器之間必須有一個(gè)空格

}

<inputtype="button"value="Ajax載入"onclick="Ajax();"/>

<divid="target"></div>本章所有程序的HTML代碼3.用load方法發(fā)送數(shù)據(jù)給效勞器functionAjax(){

$("#target").load("9-6.php?user=張三&comment=很好",

{nick:"rain",age:22})

}以GET方式發(fā)送以POST方式發(fā)送load()方法的局限性①load方法用于直接返回HTML的Ajax接口，不能返回其他格式的文檔；②load是一個(gè)jQuery對(duì)象的方法,需要在jQuery對(duì)象上調(diào)用，并且會(huì)將返回的HTML加載到這個(gè)對(duì)象內(nèi)，即使設(shè)置了回調(diào)函數(shù)也還是會(huì)加載，因此不方便對(duì)返回的HTML代碼先進(jìn)行處理后再加載4.關(guān)于Ajax程序的編碼問題〔1〕將效勞器端程序和客戶端頁面的編碼方式都設(shè)置為utf-8?！?〕對(duì)于中文網(wǎng)頁來說，默認(rèn)的字符編碼是gb2312。如果不想修改頁面的編碼類型，也是可以的，只要在效勞器端程序的首行添加一句Response.Charset="gb2312"就可以了，客戶端頁面和效勞器端程序都使用默認(rèn)的gb2312編碼方式即可9.2.2JSON概述JSON：JavaScriptObjectNotation的縮寫，意思是JavaScript對(duì)象表示法JSON可用來創(chuàng)立JSON對(duì)象或JSON數(shù)組JSON對(duì)象

var

user

={"username":"andy","age":20,"sex":"male"};JSON數(shù)組

[{"city":"beijing","postcode":"222333"},{"city":"newyork","postcode":"555666"}]一個(gè)復(fù)雜的JSON對(duì)象user

var

user

={"username":"andy","age":20,"info":{"tel":"123456","cellphone":"98765"},"address":[{"city":"beijing","postcode":"222333"},{"city":"newyork","postcode":"555666"}]}該JSON對(duì)象中有幾個(gè)元素？JSON對(duì)象和JSON字符串的轉(zhuǎn)換將JSON字符串str1轉(zhuǎn)換成JSON對(duì)象：

varobj=eval('('+str1+')');JSON對(duì)象轉(zhuǎn)換為JSON字符串

使用“json.js”中提供的方法，例如：

varlast=obj.toJSONString();

varlast=JSON.stringify(obj); 6.2.3使用$.getJSON方法載入JSON文檔functionAjax(){

$.getJSON("9-7.json");

}functionAjax(){

$.getJSON("9-7.json",function(data){

$("#target").html(data[1].username);

}); }載入的JSON文檔并不能直接顯示在頁面上9-7.json中的內(nèi)容是一個(gè)JSON數(shù)組獲取JSON文檔中的所有數(shù)據(jù)使用普通循環(huán)functionAjax(){

$.getJSON("9-7.json",function(data){

for(i=0;i<data.length;i++){ $("#target").append("<h3>"+data[i].username+"</h3>");

$("#target").append("<p>"+data[i].content+"</p>");

} }); }回調(diào)函數(shù)

獲取JSON文檔中的所有數(shù)據(jù)〔2〕使用$.each()方法functionAjax(){ $.getJSON("9-7.json",function(data){

$.each(data,function(i,item){

$("#target").append("<h3>"+item.username+"</h3>");

$("#target").append("<p>"+item.content+"</p>"); }); }); }json數(shù)組

json對(duì)象

說明①回調(diào)函數(shù)function(data)中的data參數(shù)可以將效勞器端輸出的數(shù)據(jù)轉(zhuǎn)換成客戶端的數(shù)據(jù)，是Ajax技術(shù)中效勞器與瀏覽器之間傳遞數(shù)據(jù)的橋梁。②遍歷數(shù)組可采用循環(huán)的方法，也可采用$.each方法，程序中將每個(gè)數(shù)組元素中的對(duì)象屬性取出后，將其放置在不同的HTML標(biāo)記中，使它們以不同的表現(xiàn)形式顯示出來。可見，JSON格式數(shù)據(jù)由于具有標(biāo)準(zhǔn)的格式，使JSON文檔中的任何數(shù)據(jù)都可以按需取出9.2.4載入JavaScript文檔functionAjax(){

$.getScript('9-8.js');

}functionAjax(){

$.getScript('9-8.js',function(data){

varhtml="<tableborder='1'cellpadding='2'>";

$.each(comments,function(Index,comment){

html+='<tr><td>'+comment['username']+':</td><td>'+comment['content']+'</td></tr>'; })

html+="</table>";

$("#target").html(html);

}); }9.2.5使用$.get()方法載入XML文檔functionAjax(){

$.get("9-9.xml");

}functionAjax(){

$.get("9-9.xml",function(data){ $("#target").html($(data).find("name").eq(0)

.text()); $("#target").append($(data).find("student")

.attr("email")); }); }XML文檔是一個(gè)DOM元素$(data)是一個(gè)jQuery對(duì)象加載并顯示XML文檔中的所有數(shù)據(jù)functionAjax(){ $.get("9-9.xml",function(data){ $("#target").html("<table/>"); $(data).find("student").each(function(){ vartr=

"<tr><td>"+$(this).find("name").text()+"</td>" tr+="<td>"+$(this).attr("email")+"</td>" tr+="<td>"+$(this).find("comment").text()+"</td></tr>" $("table").attr({"border":1,"cellpadding":4}).append(tr); }) }); }3.加載用PHP生成的XML文檔<? header('Content-type:text/xml');echo"<?xmlversion='1.0'encoding='GB2312'?>";echo'<comments>';include('../chapter10/conn.php');$result=$conn->query("Select*Fromlyblimit4");while($row=$result->fetch_assoc()){?> <commentid="<?=$row['ID']?>"> </comment><?}$result->close();?></comments>……9-10.php3.加載用ASP生成的XML文檔加載9-10.php的文件9-10.html的代碼如下。functionAjax(){

$.get("9-10.asp",function(data){$("#target").html("<table/>");$("table").attr({"border":1,"cellpadding":4});$(data).find("comment").each(function(){vartr="<tr><td>"+$(this).find("title").text()+"</td>"tr+="<td>"+$(this).find("author").text()+"</td>"tr+="<td>"+$(this).find("content").text()+"</td></tr>"$("table").append(tr); }); }); }4.制作天氣預(yù)報(bào)程序獲取RSS文檔中指定元素的內(nèi)容functionAjax(){ $.get("://weather.raychou/?/detail/"+$("#sel").val()+"/rss", function(data){ $("#date").html($(data).find("item").eq(0).find("title").text()); $("#weather").html($(data).find("item").eq(0).find("description").text()); $("#city").html($(data).find("channel").children("title").text()); }); }9.2.6各種數(shù)據(jù)格式的優(yōu)缺點(diǎn)分析①在不需要與其他應(yīng)用程序共享數(shù)據(jù)的時(shí)候，使用HTML片段來提供返回?cái)?shù)據(jù)一般來說是最簡單的；②如果數(shù)據(jù)需要重用，那么JSON文件是不錯(cuò)的選擇，它在性能和文件大小方面具有明顯的優(yōu)勢。③當(dāng)遠(yuǎn)程應(yīng)用程序未知時(shí)，XML文檔是明智的選擇，因?yàn)樗荳eb效勞領(lǐng)域的“通用語言”。加載不同文檔后回調(diào)函數(shù)data中的內(nèi)容加載HTML文檔后，回調(diào)函數(shù)的參數(shù)data中保存的是一個(gè)字符串加載JSON文檔后，回調(diào)函數(shù)的參數(shù)data中保存的是一個(gè)數(shù)組或?qū)ο蠹虞dXML文檔后，回調(diào)函數(shù)的參數(shù)data中保存的是一個(gè)XML元素〔XML文檔的根元素〕6.3發(fā)送數(shù)據(jù)給效勞器9.3.1使用$.get()方法執(zhí)行GET請(qǐng)求如果使用$.get()方法的data參數(shù)，該方法就還能發(fā)送數(shù)據(jù)給遠(yuǎn)程頁面$.get(URL[,data][,callback][,type])參數(shù)名稱類型說明URLString請(qǐng)求的遠(yuǎn)程文件的URL地址dataObject發(fā)送給服務(wù)器的key:value數(shù)據(jù)callback（可選）Function回調(diào)函數(shù)，載入成功后會(huì)執(zhí)行該函數(shù)中的代碼type（可選）String服務(wù)器端返回內(nèi)容的格式，可以是html、json、xml、script、jsonp、text等1.發(fā)送表單中的數(shù)據(jù)給效勞器functionAjax(){$.get(“9-11.php”,

{user:$(“#user”).val(),comment:$(“#comment”).val()},

function(data){ $("#target").append(data); });}表單中的數(shù)據(jù)data參數(shù)遵循JSON對(duì)象形式補(bǔ)充：獲取各種表單元素的數(shù)據(jù)varsingleValues=$("#single").val();varmultipleValues=$("#multiple").val()||[];varcheckboxValues=[];$("input:checkbox:checked").each(function(){checkboxValues[checkboxValues.length]=$(this).val(); });varradioValue=$("input:radio[name=r]:checked").val();一般用val()獲取如果沒有值，將空值賦給變量以URL字符串形式發(fā)送數(shù)據(jù)給效勞器$.get方法也可以使用傳統(tǒng)的url字符串方式發(fā)送數(shù)據(jù)給效勞器。$.get("9-11.asp?user="+$('#user').val()+

"&comment="+$('#comment').val(),

function(data){…});效勞器端程序可以用Request集合獲取數(shù)據(jù)

<%user=request.QueryString("user")

comment=request.QueryString("comment")

response.Write"<h3>評(píng)論人"&user&"</h3>“

%>對(duì)表單中數(shù)據(jù)進(jìn)行編碼和解碼問題：如果輸入的是中文字符，那么效勞器接收到的信息將會(huì)是亂碼解決方法：{user:escape($("#user").val()),comment:escape($("#comment").val())},效勞器獲取數(shù)據(jù)后再進(jìn)行解碼。user=unescape(request.QueryString("user"))

comment=unescape(request.QueryString("comment"))說明①escape方法會(huì)將參數(shù)中的字符串編碼成Unicode格式的字符串，使它們能在所有計(jì)算機(jī)上可讀，而unescape方法又會(huì)將Unicode格式的字符串轉(zhuǎn)換回原來的字符串。②在Ajax中，雖然GET方式發(fā)送數(shù)據(jù)仍然是將數(shù)據(jù)作為URL地址的參數(shù)發(fā)送，但由于頁面不會(huì)刷新，所以URL地址欄中并不會(huì)顯示這些參數(shù)。這是GET在Ajax中作為異步請(qǐng)求方式與常規(guī)的GET方法的明顯區(qū)別3.接收J(rèn)SON格式的數(shù)據(jù)response.Write("{user:'"&user&"',comment:'"&comment&"'}")functionAjax(){

$.get("9-11.asp",{user:escape($("#user").val()),

comment:escape($("#comment").val())},

function(data){

varhtml="<h3>評(píng)論人："+data.user+"</h3>

<p>內(nèi)容："+datament+"</p>";

$("#target").append(html);

},"json"); }data是一個(gè)JSON對(duì)象將Json字符串轉(zhuǎn)換成Json對(duì)象$.get()方法各個(gè)參數(shù)的功能示意圖$.get("9-11.asp",{key1:val1,key2:val2,…}, function(data){ $("#target").append(data); });請(qǐng)求文件的URL發(fā)送給效勞器的數(shù)據(jù)效勞器返回的數(shù)據(jù)對(duì)效勞器返回?cái)?shù)據(jù)進(jìn)行處理的代碼9.3.2使用$.post()方法執(zhí)行POST請(qǐng)求$.post()方法的結(jié)構(gòu)如下：

$.post(URL[,data][,callback][,type])$.post方法的參數(shù)、選項(xiàng)及使用方法與$.get方法完全相同，只是$.post方法在發(fā)送數(shù)據(jù)時(shí)是以POST方式發(fā)送的GETVS.POST①GET請(qǐng)求會(huì)將參數(shù)跟在URL后進(jìn)行傳遞，而POST請(qǐng)求那么是作為HTTP消息的實(shí)體內(nèi)容發(fā)送給Web效勞器。當(dāng)然，在Ajax請(qǐng)求中，用戶看不到這種區(qū)別②GET方式對(duì)傳輸?shù)臄?shù)據(jù)有大小限制，通常不能超過2KB，而使用POST方式傳遞的數(shù)據(jù)量要比GET方式大得多，理論上沒有限制。③GET方式請(qǐng)求的數(shù)據(jù)會(huì)被瀏覽器緩存起來，而POST方式請(qǐng)求的數(shù)據(jù)不會(huì)被瀏覽器緩存④通過GET方式和POST方式傳遞給效勞器端的數(shù)據(jù)，效勞器端需要采用不同的方式獲取，$.post()方法例如$.post("9-11.asp", {user:$("#user").val(),comment:$("#comment").val()},

function(data){ $("#target").append(data); });效勞器端程序可以用Request集合獲取數(shù)據(jù)<%user=request.Form("user")

comment=request.Form("comment")

response.Write"<h3>評(píng)論人"&user&"</h3>“

%>9.3.3使用$.ajax()方法設(shè)置Ajax的細(xì)節(jié)$.ajax()方法是jQuery中最底層的Ajax實(shí)現(xiàn)，load()、$.get()、$.post()、$.getScript()和$.getJSON()這些方法，都是基于$.ajax()方法構(gòu)造的，它的語法為：$.ajax(options)例如：$.ajax({

type:“GET”, //設(shè)置請(qǐng)求方式

url:“9-8.js”, //設(shè)置請(qǐng)求的URL

dataType:“script” //設(shè)置返回?cái)?shù)據(jù)的類型

})$.ajax()方法用法舉例functionAjax(){ $.ajax({ type:"GET", url:"9-14.asp", data:"user="+escape($("#user").val())+

"&comment="+escape($("#comment").val()),beforeSend:function(){ $("#target").html("<imgsrc='loading.gif'/><br>正在載入…");},error:function(){$("#target").html("<p>載入失敗</p>");},success:function(data){ //請(qǐng)求成功時(shí) $("#target").html(data); } }); }$.ajax()方法中可以用到的回調(diào)函數(shù)beforeSend：發(fā)送請(qǐng)求之前調(diào)用的回調(diào)函數(shù)，該函數(shù)接受一個(gè)惟一的參數(shù)，即XMLHttpRequest對(duì)象作為參數(shù)。success：在請(qǐng)求成功時(shí)調(diào)用的回調(diào)函數(shù)，該函數(shù)接受兩個(gè)參數(shù)，第一個(gè)參數(shù)為效勞器返回的數(shù)據(jù)data，第2個(gè)參數(shù)為效勞器的狀態(tài)textStatus。error請(qǐng)求失敗時(shí)調(diào)用的回調(diào)函數(shù)。complete請(qǐng)求完成時(shí)調(diào)用的回調(diào)函數(shù)〔無論請(qǐng)求是成功還是失敗〕，如果同時(shí)設(shè)置了success或error，那么在它們執(zhí)行完之后才執(zhí)行complete中的回調(diào)函數(shù)。6.3.4全局設(shè)定Ajax當(dāng)一個(gè)頁面中有多個(gè)地方都需要利用Ajax方法進(jìn)行異步通信時(shí)，可以利用$.ajaxSetup(options)方法統(tǒng)一設(shè)定所有Ajax方法中的參數(shù)

$.ajaxSetup({

type:"GET",

url:"10-13.asp“

});說明①$.ajax()方法中的data數(shù)據(jù)一般不能用$.ajaxSetup(options)方法統(tǒng)一設(shè)定，因?yàn)閭魉徒o效勞器的數(shù)據(jù)是用戶在表單中輸入的，每次都不同，而$.ajaxSetup(options)方法只會(huì)在頁面初始化時(shí)運(yùn)行一次，此時(shí)用戶還沒有輸入數(shù)據(jù)，因此會(huì)獲取不到。②$.ajaxSetup(options)方法不能設(shè)置load()方法的相關(guān)操作，如果設(shè)置請(qǐng)求類型type為"GET"，也不會(huì)改變$.post()方法采用POST方式。6.4表單的序列化方法在表單中輸入框較少的情況下，可以通過

“鍵:值”對(duì)參數(shù)向效勞器端發(fā)送數(shù)據(jù)functionAjax(){

$.get("9-11.asp", {user:$("#user").val(),comment:$("#comment").val()},

function(data){ $("#target").append(data); }); }在輸入框很多的情況下$("#form1").serialize(),

說明①serialize()方法通常用來獲取某個(gè)form元素內(nèi)所有表單元素的name/value屬性值，因此必須添加一對(duì)<form>標(biāo)記將需要序序列化的表單元素包含起來。并且該元素必須是<form>，如果將上述代碼中的<form>改成<div>等其他元素就不行了。②serialize()方法必須通過元素的name屬性才能獲取到元素的value值，因此應(yīng)設(shè)置表單中每個(gè)表單元素的name屬性。說明serialize()方法可作用于任何jQuery對(duì)象，所以不光只有form元素能使用它，其他選擇器選取的元素也能使用它，例如

$(":checkbox,:radio").serialize());serialize()方法會(huì)對(duì)表單中的內(nèi)容采用encodeURIComponent()方法進(jìn)行編碼,如果當(dāng)前頁面是gb2312格式編碼，解決方法：2.serializeArray()方法serializeArray()方法將一組表單元素編碼為一個(gè)名稱和值的JSON對(duì)象數(shù)組〔形如[{key1:val1,key2:val2},{key1:val3,key2:val4}]〕$("#form1").serializeArray();3.$.param()方法$.param()方法是實(shí)現(xiàn)serialize()方法的核心，它用來對(duì)一個(gè)數(shù)組或?qū)ο蟀凑誯ey/value進(jìn)行序列化。比方將一個(gè)json對(duì)象序列化

$(function(){ varobj={a:1,b:2,c:3};//obj是一個(gè)json對(duì)象 vark=$.param(obj); alert(k);//輸出a=1&b=2&c=3})6.5使用JSONP發(fā)送跨域Ajax請(qǐng)求XMLHttpRequest對(duì)象出于平安性考慮，不能發(fā)送跨域的請(qǐng)求。但是，利用<script>標(biāo)記是可以載入跨域的js文檔的，因?yàn)樵摌?biāo)記的src屬性中的URL可以是絕對(duì)URL。JSONP是JSONwithPadding的縮寫，它是一個(gè)非官方的協(xié)議，允許在效勞器端集成<script>標(biāo)記返回至客戶端，通過JavaScriptcallback的形式實(shí)現(xiàn)跨域訪問加載外部網(wǎng)站js腳本<script> functioncallback(data){ alert(data.message); }</script><scriptsrc="://"></script>-----清單://-------callback({message:"success"});加載外部js將JSON格式的數(shù)據(jù)作為函數(shù)的參數(shù)JSON對(duì)象動(dòng)態(tài)發(fā)送跨域請(qǐng)求可能不希望在頁面載入時(shí)就調(diào)用外部js文檔〔即發(fā)送跨域請(qǐng)求〕，而是希望在某些事件觸發(fā)〔如單擊按鈕〕時(shí)才發(fā)送跨域請(qǐng)求。為此，可以通過動(dòng)態(tài)創(chuàng)立<script>標(biāo)記來加載外部js文檔。$(document.createElement('script')).attr('src','://outer/test.js').appendTo('head');JSONP的格式由于JSON代碼也是JavaScript代碼，因此也可以用該方法加載外部JSON文檔。但是，這需要對(duì)效勞器端輸出的JSON代碼稍加修改〔JSONP〕JSONP格式是把標(biāo)準(zhǔn)的JSON代碼包含在一對(duì)圓括號(hào)內(nèi)，并在圓括號(hào)前放置了一個(gè)任意字符串。例如：callback({message:"success