第五章 jQuery AJAX详解.docx
《第五章 jQuery AJAX详解.docx》由会员分享，可在线阅读，更多相关《第五章 jQuery AJAX详解.docx（25页珍藏版）》请在冰豆网上搜索。
第五章jQueryAJAX详解
目录
目录1
更新记录2
1jQueryAJAX简介2
1.1jQueryAJAX实例2
1.2什么是AJAX？
2
1.3关于jQuery与AJAX3
2jQuery-AJAXload（）方法3
2.1jQueryload（）方法3
3jQueryGet/Post6
3.1jQuery$.get（）方法6
3.2jQuery$.post（）方法7
3.3GET对比POST9
3.4jQueryAjax操作函数11
4jQuery.ajax（）方法11
4.1参数13
4.2回调函数17
4.3数据类型17
4.4发送数据到服务器18
4.5高级选项18
5四种常见的POST提交数据方式19
5.1application/x-www-form-urlencoded19
5.2multipart/form-data20
5.3application/json21
5.4text/xml21
更新记录
日期
作者
更新内容
06.03
丛洪英
设计文档
1jQueryAJAX简介
AJAX是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
1.1jQueryAJAX实例
DOCTYPEhtml>
请点击下面的按钮，通过jQueryAJAX改变这段文本。
获得外部的内容
1.2什么是AJAX？
AJAX=异步JavaScript和XML（AsynchronousJavaScriptandXML）。
简短地说，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。
使用AJAX的应用程序案例：
谷歌地图、腾讯微博、优酷视频、人人网等等。
您可以在我们的 AJAX教程中学到更多有关AJAX的知识。
1.3关于jQuery与AJAX
jQuery提供多个与AJAX有关的方法。
通过jQueryAJAX方法，您能够使用HTTPGet和HTTPPost从远程服务器上请求文本、HTML、XML或JSON-同时您能够把这些外部数据直接载入网页的被选元素中。
提示：
如果没有jQuery，AJAX编程还是有些难度的。
编写常规的AJAX代码并不容易，因为不同的浏览器对AJAX的实现并不相同。
这意味着您必须编写额外的代码对浏览器进行测试。
不过，jQuery团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现AJAX功能。
2jQuery-AJAXload（）方法
2.1jQueryload（）方法
jQueryload（）方法是简单但强大的AJAX方法。
load（）方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：
$（selector）.load（URL,data,callback）;
必需的 URL 参数规定您希望加载的URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是load（）方法完成后所执行的函数名称。
这是示例文件（"demo_test.txt"）的内容：
jQueryandAJAXisFUN!
!
!
Thisissometextinaparagraph.
下面的例子会把文件"demo_test.txt"的内容加载到指定的
元素中：
示例
$（"#div1"）.load（"demo_test.txt"）;
实例：
DOCTYPEhtml>
请点击下面的按钮，通过jQueryAJAX改变这段文本。
获得外部的内容
也可以把jQuery选择器添加到URL参数。
下面的例子把"demo_test.txt"文件中id="p1"的元素的内容，加载到指定的
元素中：
实例
$（"#div1"）.load（"demo_test.txt#p1"）;
DOCTYPEhtml>
使用jQueryAJAX来改变文本
可选的callback参数规定当load（）方法完成后所要允许的回调函数。
回调函数可以设置不同的参数：
∙responseTxt -包含调用成功时的结果内容
∙statusTXT -包含调用的状态
∙xhr -包含XMLHttpRequest对象
下面的例子会在load（）方法完成后显示一个提示框。
如果load（）方法已成功，则显示“外部内容加载成功！
”，而如果失败，则显示错误消息：
实例
$（"button"）.click（function（）{
$（"#div1"）.load（"demo_test.txt",function（responseTxt,statusTxt,xhr）{
if（statusTxt=="success"）
alert（"外部内容加载成功！
"）;
if（statusTxt=="error"）
alert（"Error:
"+xhr.status+":
"+xhr.statusText）;
}）;
}）;
实例
DOCTYPEhtml>
使用jQueryAJAX来改变文本
3jQueryGet/Post
jQueryget（）和post（）方法用于通过HTTPGET或POST请求从服务器请求数据。
HTTP请求：
GETvs.POST
两种在客户端和服务器端进行请求-响应的常用方法是：
GET和POST。
∙GET -从指定的资源请求数据
∙POST -向指定的资源提交要处理的数据
GET基本上用于从服务器获得（取回）数据。
注释：
GET方法可能返回缓存数据。
POST也可用于从服务器获取数据。
不过，POST方法不会缓存数据，并且常用于连同请求一起发送数据。
3.1jQuery$.get（）方法
$.get（）方法通过HTTPGET请求从服务器上请求数据。
语法：
$.get（URL,callback）;
必需的 URL 参数规定您希望请求的URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用$.get（）方法从服务器上的一个文件中取回数据：
实例
$（"button"）.click（function（）{
$.get（"demo_test.asp",function（data,status）{
alert（"Data:
"+data+"\nStatus:
"+status）;
}）;
}）;
实例
DOCTYPEhtml>
$.get（）的第一个参数是我们希望请求的URL（"demo_test.asp"）。
第二个参数是回调函数。
第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
提示：
这个ASP文件（"demo_test.asp"）类似这样：
<%
response.write（"ThisissometextfromanexternalASPfile."）
%>
3.2jQuery$.post（）方法
$.post（）方法通过HTTPPOST请求从服务器上请求数据。
语法：
$.post（URL,data,callback）;
必需的 URL 参数规定您希望请求的URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用$.post（）连同请求一起发送数据：
实例
$（"button"）.click（function（）{
$.post（"demo_test_post.asp",
{
name:
"DonaldDuck",
city:
"Duckburg"
},
function（data,status）{
alert（"Data:
"+data+"\nStatus:
"+status）;
}）;
}）;
实例
$.post（）的第一个参数是我们希望请求的URL（"demo_test_post.asp"）。
然后我们连同请求（name和city）一起发送数据。
"demo_test_post.asp"中的ASP脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。
第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
提示：
这个ASP文件（"demo_test_post.asp"）类似这样：
<%
dimfname,city
fname=Request.Form（"name"）
city=Request.Form（"city"）
Response.Write（"Dear"&fname&"."）
Response.Write（"Hopeyoulivewellin"&city&"."）
%>
3.3GET对比POST
两种最常用的HTTP方法是：
GET和POST。
什么是HTTP？
超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通信。
HTTP的工作方式是客户机与服务器之间的请求-应答协议。
web浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。
举例：
客户端（浏览器）向服务器提交HTTP请求；服务器向客户端返回响应。
响应包含关于请求的状态信息以及可能被请求的内容。
两种HTTP请求方法：
GET和POST
在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：
GET和POST。
∙GET -从指定的资源请求数据。
∙POST -向指定的资源提交要被处理的数据
GET方法
请注意，查询字符串（名称/值对）是在GET请求的URL中发送的：
/test/demo_form.asp?
name1=value1&name2=value2
有关GET请求的其他一些注释：
∙GET请求可被缓存
∙GET请求保留在浏览器历史记录中
∙GET请求可被收藏为书签
∙GET请求不应在处理敏感数据时使用
∙GET请求有长度限制
∙GET请求只应当用于取回数据
POST方法
请注意，查询字符串（名称/值对）是在POST请求的HTTP消息主体中发送的：
POST/test/demo_form.aspHTTP/1.1
Host:
name1=value1&name2=value2
有关POST请求的其他一些注释：
∙POST请求不会被缓存
∙POST请求不会保留在浏览器历史记录中
∙POST不能被收藏为书签
∙POST请求对数据长度没有要求
比较GET与POST
下面的表格比较了两种HTTP方法：
GET和POST。
GET
POST
后退按钮/刷新
无害
数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签
可收藏为书签
不可收藏为书签
缓存
能被缓存
不能缓存
编码类型
application/x-www-form-urlencoded
application/x-www-form-urlencoded或multipart/form-data。
为二进制数据使用多重编码。
历史
参数保留在浏览器历史中。
参数不会保存在浏览器历史中。
对数据长度的限制
是的。
当发送数据时，GET方法向URL添加数据；URL的长度是受限制的（URL的最大长度是2048个字符）。
无限制。
对数据类型的限制
只允许ASCII字符。
没有限制。
也允许二进制数据。
安全性
与POST相比，GET的安全性较差，因为所发送的数据是URL的一部分。
在发送密码或其他敏感信息时绝不要使用GET！
POST比GET更安全，因为参数不会被保存在浏览器历史或web服务器日志中。
可见性
数据在URL中对所有人都是可见的。
数据不会显示在URL中。
其他HTTP请求方法
下面的表格列出了其他一些HTTP请求方法：
方法
描述
HEAD
与GET相同，但只返回HTTP报头，不返回文档主体。
PUT
上传指定的URI表示。
DELETE
删除指定资源。
OPTIONS
返回服务器支持的HTTP方法。
CONNECT
把请求连接转换到透明的TCP/IP通道。
3.4jQueryAjax操作函数
jQuery库拥有完整的Ajax兼容套件。
其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。
函数
描述
jQuery.ajax（）
执行异步HTTP（Ajax）请求。
.ajaxComplete（）
当Ajax请求完成时注册要调用的处理程序。
这是一个Ajax事件。
.ajaxError（）
当Ajax请求完成且出现错误时注册要调用的处理程序。
这是一个Ajax事件。
.ajaxSend（）
在Ajax请求发送之前显示一条消息。
jQuery.ajaxSetup（）
设置将来的Ajax请求的默认值。
.ajaxStart（）
当首个Ajax请求完成开始时注册要调用的处理程序。
这是一个Ajax事件。
.ajaxStop（）
当所有Ajax请求完成时注册要调用的处理程序。
这是一个Ajax事件。
.ajaxSuccess（）
当Ajax请求成功完成时显示一条消息。
jQuery.get（）
使用HTTPGET请求从服务器加载数据。
jQuery.getJSON（）
使用HTTPGET请求从服务器加载JSON编码数据。
jQuery.getScript（）
使用HTTPGET请求从服务器加载JavaScript文件，然后执行该文件。
.load（）
从服务器加载数据，然后把返回到HTML放入匹配元素。
jQuery.param（）
创建数组或对象的序列化表示，适合在URL查询字符串或Ajax请求中使用。
jQuery.post（）
使用HTTPPOST请求从服务器加载数据。
.serialize（）
将表单内容序列化为字符串。
.serializeArray（）
序列化表单元素，返回JSON数据结构数据。
4jQuery.ajax（）方法
实例
通过AJAX加载一段文本：
jQuery代码：
$（document）.ready（function（）{
$（"#b01"）.click（function（）{
htmlobj=$.ajax（{url:
"/jquery/test1.txt",async:
false}）;
$（"#myDiv"）.html（htmlobj.responseText）;
}）;
}）;
HTML代码：
LetAJAXchangethistext
升级会员 