PHP-Web程序设计与Ajax技术之jQueryAjax基础

PHPWeb程序设计与Ajax技术唐四薪主编

清华大学出版社 ISBN：9787302344735 2014年1月第9章基于jQuery的Ajax技术浏览器发送HTTP请求的三种方式输入网址(请求载入页面)提交表单(发送数据并载入页面)用XMLHttpRequest对象发送异步HTTP请求〔页面不会刷新〕浏览器Web效劳器HTTP请求HTTP响应(完整的页面)页面会刷新HTTP响应(HTML片段或字符串等)Ajax概述Ajax：异步JavaScript和XML〔AsynchronousJavaScriptandXML〕本质：异步刷新页面的局部区域10-17.html10-9-2.htmlAjax：客户端编程和效劳器端编程的综合运用客户端编程：HTML、CSS、JavaScript效劳器端编程：如ASP传统的Web应用程序传统的Web应用程序：发送请求给效劳器→效劳器对请求进行处理〔此时客户端需等待〕→处理完成后效劳器发送回全新的页面客户端服务器时间用户操作用户操作用户操作服务器处理服务器处理等待等待传统Web应用程序的缺乏一个HTTP请求对应一个页面加载页面时用户必须等待Ajax技术〔可以解决这两个问题〕异步：煮饭的过程中我们可以继续做菜浏览器与效劳器交互的过程中，用户仍然可以在浏览器上进行其他一些操作。基于Ajax的Web应用程序Ajax程序：在与Web效劳器交互的过程中只传输页面上需要做更改的区域，而不传输整个页面；同时，在与Web效劳器交互的过程中，客户端仍然可以在当前页面继续操作，而不必等待效劳器的响应。浏览器Web效劳器HTTP请求HTTP响应(HTML片段或字符串等)基于Ajax的Web应用程序客户端服务器时间用户操作服务器处理服务器处理Ajax引擎客户端处理9.1.2载入页面的方法比较<iframe>标记远程脚本技术Ajax技术9.1.3用原始的Ajax技术载入文档Ajax技术的核心：XMLHttpRequest对象

XMLHttpRequest对象可以在不重新加载页面的情况下更新页面的局部windowXMLHttpRequestlocationdocument……XMLHttpRequest对象的工作过程自动售水机①投硬币②准备容器接水③出水XMLHttpRequest对象的工作过程与自动售货机售货过程的比照自动售水机①投币②准备接水④接水用户③出水浏览器Web效劳器〇初始化XMLHttpRequest对象①发送异步请求③返回响应④用容器元素载入响应的内容②监听效劳器响应

XMLHttpRequest对象的工作过程创立XMLHttpRequest对象的实例使用open()方法指定载入文档请求使用send()方法发送请求——投硬币使用onreadystatechange事件监听效劳器——准备接水使用DOM元素载入效劳器返回的内容——接水①创立XMLHttpRequest对象的实例创立XMLHttpRequest对象的实例varxmlHttpReq; if(window.ActiveXObject){ xmlHttpReq=newActiveXObject("Microsoft.XMLHTTP"); } elseif(window.XMLHttpRequest){ xmlHttpReq=newXMLHttpRequest(); }针对IE6

针对除IE6以外的浏览器

②使用open()方法指定载入文档请求使用XMLHttpRequest对象的open()方法指定载入文档的HTTP请求类型、文件名以及是否为异步方式

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

请求的方式请求的URL是否为异步方式③使用send()方法发送请求使用open()方法指定了请求后，还要用send()方法将请求发送出去xmlHttpReq.send(null);如果不写null，那么在Firefox中无法运行④使用onreadystatechange事件监听效劳器用send()方法发送了一个载入文档的请求后，还要准备接收效劳器端返回的文档或内容。这时需要用事件监听机制来捕获请求的状态，onreadystatechange事件实现这一功能。xmlHttpReq.onreadystatechange=RequestCallBack; functionRequestCallBack(){ if(xmlHttpReq.readyState==4&&xmlHttpReq.status==200){

document.getElementById("target").innerHTML=xmlHttpReq.responseText; } }出来的水说明①onreadystatechange事件中的事件处理函数只有在readyState属性发生改变时才会触发，readyState的值表示效劳器对当前请求的处理状态，可以根据这个值来进行不同的处理。readyState有五种可取值〔0：尚未初始化；1：正在加载；2：加载完毕；3：正在处理；4：处理完毕〕status属性说明请求是否已经成功，如果status属性值为200说明一切正常，效劳器已成功接收了客户端的请求说明②效劳器在收到客户端的请求后，根据请求返回相应的内容。

文本形式:存储在responseText中，

XML格式:存储在responseXML中。它们都是只读属性，只有当readyState属性值为4的时候，才能通过它们获取完整的响应信息。如果设置效劳器端响应内容类型为Response.ContentType="text/xml"，responseXML才会有值并被解析成一个XML文档。说明运行之前必须将这两个文件都保存为utf-8编码方式。因为XMLHttpRequest对象传输数据采用的默认编码方式是utf-8。IE浏览器的Ajax缓存问题在Ajax应用中，当用户访问一次后，再进行访问时而且XMLHttpRequest请求中的URL不变时，在IE中就会发生这样的现象，那就是取URL中的网页不会到效劳器端取，而是直接从IE的缓存中取。解决方法：①加随机数

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

xmlHttpReq.open("get","9-2.html?t="+newDate().getTime())载入PHP文档用Ajax技术可以载入任何网页文档，如果载入的是动态网页〔如PHP〕，那么效劳器端会先执行动态网页，再将生成的静态HTML代码发送给客户端，因此客户端网页加载的是动态网页执行后的静态HTML代码Ajax程序与传统PHP程序的区别在获取并显示效劳器端数据时，页面并没有刷新由于页面没有刷新，浏览器不知道效劳器什么时候完成了对请求的处理，所以需要onreadystatechange进行监听传统的Web编程与Ajax编程的区别客户端发送请求的方式不同效劳器生成的响应不同客户端加载响应的方式不同XMLHttpRequest与效劳器端通信的步骤①创立XMLHttpRequest对象；②使用open()方法设置XMLHttpRequest对象请求的URL、发送HTTP请求的方式以及是否为异步模式等；③使用send()方法发送HTTP请求；④使用onreadystatechange事件监听效劳器端的反响，根据readyState属性来判断效劳器是否已经对请求处理完成，一旦完成那么接收效劳器端传回的数据XMLHttpRequest对象与效劳器通信的过程初始化发送请求等待效劳器响应获取响应用回调函数监控XMLHttpRequest对象的状态，当readyState为4时获取效劳器响应对XMLHttpRequest对象的反思①XMLHttpRequest对象虽然名称中含有XML，但它并不限于和XML文档一起使用，它可以接收任何形式的文本文档，如HTML文档、JSON文档、XML文档等。②XMLHttpRequest对象与ASP中的Request对象的功能也完全不同，Request对象是效劳器端的对象，它的作用是获取从客户端发送来的数据；而XMLHttpRequest对象是位于客户端浏览器中的对象，它的作用是发送数据给效劳器后再从效劳器获取传回来的数据发送数据给效劳器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])载入远程HTML文件代码并插入至DOM元素中$.get(url,[data],[callback],[type])通过远程HTTPGET请求载入信息$.post(url,[data],[callback],[type])通过远程HTTPPOST请求载入信息$.ajax(options)通过HTTP请求加载远程数据，jQuery的底层Ajax实现。使用load方法载入HTML文档Ajax的本质特征就是刷新页面的局部，这主要是通过将远程的文档载入到页面的局部元素中实现的load()方法能载入远程HTML文档并将其插入到指定的DOM元素中。它的语法为

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

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

}用load方法载入9-3.php到#target元素中load()方法的参数参数名称类型说明urlString请求HTML文档的URL地址data（可选）Object发送至服务器的key:value数据（Json类型数据）callback（可选）Function请求完成时的回调函数，无论请求成功或失败2.载入HTML文档中的指定元素functionAjax(){ $(“#target”).load(“9-5.html.title”); //URL和选择器之间必须有一个空格

}

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

<divid="target"></div>本章所有程序的HTML代码3.用load方法发送数据给效劳器functionAjax(){

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

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

}以GET方式发送以POST方式发送load()方法的局限性①load方法用于直接返回HTML的Ajax接口，不能返回其他格式的文档；②load是一个jQuery对象的方法,需要在jQuery对象上调用，并且会将返回的HTML加载到这个对象内，即使设置了回调函数也还是会加载，因此不方便对返回的HTML代码先进行处理后再加载4.关于Ajax程序的编码问题〔1〕将效劳器端程序和客户端页面的编码方式都设置为utf-8。〔2〕对于中文网页来说，默认的字符编码是gb2312。如果不想修改页面的编码类型，也是可以的，只要在效劳器端程序的首行添加一句Response.Charset="gb2312"就可以了，客户端页面和效劳器端程序都使用默认的gb2312编码方式即可9.2.2JSON概述JSON：JavaScriptObjectNotation的缩写，意思是JavaScript对象表示法JSON可用来创立JSON对象或JSON数组JSON对象

var

user

={"username":"andy","age":20,"sex":"male"};JSON数组

[{"city":"beijing","postcode":"222333"},{"city":"newyork","postcode":"555666"}]一个复杂的JSON对象user

var

user

={"username":"andy","age":20,"info":{"tel":"123456","cellphone":"98765"},"address":[{"city":"beijing","postcode":"222333"},{"city":"newyork","postcode":"555666"}]}该JSON对象中有几个元素？JSON对象和JSON字符串的转换将JSON字符串str1转换成JSON对象：

varobj=eval('('+str1+')');JSON对象转换为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中的内容是一个JSON数组获取JSON文档中的所有数据使用普通循环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>");

} }); }回调函数

获取JSON文档中的所有数据〔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数组

json对象

说明①回调函数function(data)中的data参数可以将效劳器端输出的数据转换成客户端的数据，是Ajax技术中效劳器与浏览器之间传递数据的桥梁。②遍历数组可采用循环的方法，也可采用$.each方法，程序中将每个数组元素中的对象属性取出后，将其放置在不同的HTML标记中，使它们以不同的表现形式显示出来。可见，JSON格式数据由于具有标准的格式，使JSON文档中的任何数据都可以按需取出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文档是一个DOM元素$(data)是一个jQuery对象加载并显示XML文档中的所有数据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.制作天气预报程序获取RSS文档中指定元素的内容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各种数据格式的优缺点分析①在不需要与其他应用程序共享数据的时候，使用HTML片段来提供返回数据一般来说是最简单的；②如果数据需要重用，那么JSON文件是不错的选择，它在性能和文件大小方面具有明显的优势。③当远程应用程序未知时，XML文档是明智的选择，因为它是Web效劳领域的“通用语言”。加载不同文档后回调函数data中的内容加载HTML文档后，回调函数的参数data中保存的是一个字符串加载JSON文档后，回调函数的参数data中保存的是一个数组或对象加载XML文档后，回调函数的参数data中保存的是一个XML元素〔XML文档的根元素〕6.3发送数据给效劳器9.3.1使用$.get()方法执行GET请求如果使用$.get()方法的data参数，该方法就还能发送数据给远程页面$.get(URL[,data][,callback][,type])参数名称类型说明URLString请求的远程文件的URL地址dataObject发送给服务器的key:value数据callback（可选）Function回调函数，载入成功后会执行该函数中的代码type（可选）String服务器端返回内容的格式，可以是html、json、xml、script、jsonp、text等1.发送表单中的数据给效劳器functionAjax(){$.get(“9-11.php”,

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

function(data){ $("#target").append(data); });}表单中的数据data参数遵循JSON对象形式补充：获取各种表单元素的数据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字符串形式发送数据给效劳器$.get方法也可以使用传统的url字符串方式发送数据给效劳器。$.get("9-11.asp?user="+$('#user').val()+

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

function(data){…});效劳器端程序可以用Request集合获取数据

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

comment=request.QueryString("comment")

response.Write"<h3>评论人"&user&"</h3>“

%>对表单中数据进行编码和解码问题：如果输入的是中文字符，那么效劳器接收到的信息将会是乱码解决方法：{user:escape($("#user").val()),comment:escape($("#comment").val())},效劳器获取数据后再进行解码。user=unescape(request.QueryString("user"))

comment=unescape(request.QueryString("comment"))说明①escape方法会将参数中的字符串编码成Unicode格式的字符串，使它们能在所有计算机上可读，而unescape方法又会将Unicode格式的字符串转换回原来的字符串。②在Ajax中，虽然GET方式发送数据仍然是将数据作为URL地址的参数发送，但由于页面不会刷新，所以URL地址栏中并不会显示这些参数。这是GET在Ajax中作为异步请求方式与常规的GET方法的明显区别3.接收JSON格式的数据response.Write("{user:'"&user&"',comment:'"&comment&"'}")functionAjax(){

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

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

function(data){

varhtml="<h3>评论人："+data.user+"</h3>

<p>内容："+datament+"</p>";

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

},"json"); }data是一个JSON对象将Json字符串转换成Json对象$.get()方法各个参数的功能示意图$.get("9-11.asp",{key1:val1,key2:val2,…}, function(data){ $("#target").append(data); });请求文件的URL发送给效劳器的数据效劳器返回的数据对效劳器返回数据进行处理的代码9.3.2使用$.post()方法执行POST请求$.post()方法的结构如下：

$.post(URL[,data][,callback][,type])$.post方法的参数、选项及使用方法与$.get方法完全相同，只是$.post方法在发送数据时是以POST方式发送的GETVS.POST①GET请求会将参数跟在URL后进行传递，而POST请求那么是作为HTTP消息的实体内容发送给Web效劳器。当然，在Ajax请求中，用户看不到这种区别②GET方式对传输的数据有大小限制，通常不能超过2KB，而使用POST方式传递的数据量要比GET方式大得多，理论上没有限制。③GET方式请求的数据会被浏览器缓存起来，而POST方式请求的数据不会被浏览器缓存④通过GET方式和POST方式传递给效劳器端的数据，效劳器端需要采用不同的方式获取，$.post()方法例如$.post("9-11.asp", {user:$("#user").val(),comment:$("#comment").val()},

function(data){ $("#target").append(data); });效劳器端程序可以用Request集合获取数据<%user=request.Form("user")

comment=request.Form("comment")

response.Write"<h3>评论人"&user&"</h3>“

%>9.3.3使用$.ajax()方法设置Ajax的细节$.ajax()方法是jQuery中最底层的Ajax实现，load()、$.get()、$.post()、$.getScript()和$.getJSON()这些方法，都是基于$.ajax()方法构造的，它的语法为：$.ajax(options)例如：$.ajax({

type:“GET”, //设置请求方式

url:“9-8.js”, //设置请求的URL

dataType:“script” //设置返回数据的类型

})$.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){ //请求成功时 $("#target").html(data); } }); }$.ajax()方法中可以用到的回调函数beforeSend：发送请求之前调用的回调函数，该函数接受一个惟一的参数，即XMLHttpRequest对象作为参数。success：在请求成功时调用的回调函数，该函数接受两个参数，第一个参数为效劳器返回的数据data，第2个参数为效劳器的状态textStatus。error请求失败时调用的回调函数。complete请求完成时调用的回调函数〔无论请求是成功还是失败〕，如果同时设置了success或error，那么在它们执行完之后才执行complete中的回调函数。6.3.4全局设定Ajax当一个页面中有多个地方都需要利用Ajax方法进行异步通信时，可以利用$.ajaxSetup(options)方法统一设定所有Ajax方法中的参数

$.ajaxSetup({

type:"GET",

url:"10-13.asp“

});说明①$.ajax()方法中的data数据一般不能用$.ajaxSetup(options)方法统一设定，因为传送给效劳器的数据是用户在表单中输入的，每次都不同，而$.ajaxSetup(options)方法只会在页面初始化时运行一次，此时用户还没有输入数据，因此会获取不到。②$.ajaxSetup(options)方法不能设置load()方法的相关操作，如果设置请求类型type为"GET"，也不会改变$.post()方法采用POST方式。6.4表单的序列化方法在表单中输入框较少的情况下，可以通过

“键:值”对参数向效劳器端发送数据functionAjax(){

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

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

说明①serialize()方法通常用来获取某个form元素内所有表单元素的name/value属性值，因此必须添加一对<form>标记将需要序序列化的表单元素包含起来。并且该元素必须是<form>，如果将上述代码中的<form>改成<div>等其他元素就不行了。②serialize()方法必须通过元素的name属性才能获取到元素的value值，因此应设置表单中每个表单元素的name属性。说明serialize()方法可作用于任何jQuery对象，所以不光只有form元素能使用它，其他选择器选取的元素也能使用它，例如

$(":checkbox,:radio").serialize());serialize()方法会对表单中的内容采用encodeURIComponent()方法进行编码,如果当前页面是gb2312格式编码，解决方法：2.serializeArray()方法serializeArray()方法将一组表单元素编码为一个名称和值的JSON对象数组〔形如[{key1:val1,key2:val2},{key1:val3,key2:val4}]〕$("#form1").serializeArray();3.$.param()方法$.param()方法是实现serialize()方法的核心，它用来对一个数组或对象按照key/value进行序列化。比方将一个json对象序列化

$(function(){ varobj={a:1,b:2,c:3};//obj是一个json对象 vark=$.param(obj); alert(k);//输出a=1&b=2&c=3})6.5使用JSONP发送跨域Ajax请求XMLHttpRequest对象出于平安性考虑，不能发送跨域的请求。但是，利用<script>标记是可以载入跨域的js文档的，因为该标记的src属性中的URL可以是绝对URL。JSONP是JSONwithPadding的缩写，它是一个非官方的协议，允许在效劳器端集成<script>标记返回至客户端，通过JavaScriptcallback的形式实现跨域访问加载外部网站js脚本<script> functioncallback(data){ alert(data.message); }</script><scriptsrc="://"></script>-----清单://-------callback({message:"success"});加载外部js将JSON格式的数据作为函数的参数JSON对象动态发送跨域请求可能不希望在页面载入时就调用外部js文档〔即发送跨域请求〕，而是希望在某些事件触发〔如单击按钮〕时才发送跨域请求。为此，可以通过动态创立<script>标记来加载外部js文档。$(document.createElement('script')).attr('src','://outer/test.js').appendTo('head');JSONP的格式由于JSON代码也是JavaScript代码，因此也可以用该方法加载外部JSON文档。但是，这需要对效劳器端输出的JSON代码稍加修改〔JSONP〕JSONP格式是把标准的JSON代码包含在一对圆括号内，并在圆括号前放置了一个任意字符串。例如：callback({message:"success