第五章 jQuery AJAX详解.docx

1、第五章 jQuery AJAX详解目录目录 1更新记录 21 jQuery AJAX简介 21.1 jQuery AJAX 实例 21.2什么是 AJAX？ 21.3关于 jQuery 与 AJAX 32 jQuery - AJAX load() 方法 32.1 jQuery load() 方法 33 jQuery Get/Post 63.1 jQuery $.get() 方法 63.2 jQuery $.post() 方法 73.3 GET 对比 POST 93.4 jQuery Ajax 操作函数 114 jQuery.ajax() 方法 114.1 参数 134.2 回调函数 174.3

2、 数据类型 174.4 发送数据到服务器 184.5高级选项 185 四种常见的 POST 提交数据方式 195.1 application/x-www-form-urlencoded 195.2 multipart/form-data 205.3 application/json 215.4 text/xml 21更新记录日期作者更新内容06.03丛洪英设计文档1 jQuery AJAX简介AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。1.1 jQuery AJAX 实例$(document).ready(function() $(#btn1).cl

3、ick(function() $(#test).load(/example/jquery/demo_test.txt); )请点击下面的按钮，通过 jQuery AJAX 改变这段文本。获得外部的内容1.2什么是 AJAX？AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。您可以在我们的AJAX 教程中学到更多有关 AJAX 的知识。1.3关于 jQuery 与 AJA

4、XjQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。提示：如果没有 jQuery，AJAX 编程还是有些难度的。编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。2 jQuery - AJAX load() 方法2.1 jQ

5、uery load() 方法jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。语法：$(selector).load(URL,data,callback);必需的URL参数规定您希望加载的 URL。可选的data参数规定与请求一同发送的查询字符串键/值对集合。可选的callback参数是 load() 方法完成后所执行的函数名称。这是示例文件（demo_test.txt）的内容：jQuery and AJAX is FUN!This is some text in a paragraph.下面的例子会把文件 dem

6、o_test.txt 的内容加载到指定的 元素中：示例$(#div1).load(demo_test.txt);实例：$(document).ready(function() $(#btn1).click(function() $(#test).load(/example/jquery/demo_test.txt); )请点击下面的按钮，通过 jQuery AJAX 改变这段文本。获得外部的内容也可以把 jQuery 选择器添加到 URL 参数。下面的例子把 demo_test.txt 文件中 id=p1 的元素的内容，加载到指定的 元素中：实例$(#div1).load(demo_test.

7、txt #p1);$(document).ready(function() $(button).click(function() $(#div1).load(/example/jquery/demo_test.txt #p1); ););使用 jQuery AJAX 来改变文本获得外部内容可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数： responseTxt- 包含调用成功时的结果内容 statusTXT- 包含调用的状态 xhr- 包含 XMLHttpRequest 对象下面的例子会在 load() 方法完成后显示一个提示框。如

8、果 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); ););实例$(document).ready(function() $(button).click(functio

9、n() $(#div1).load(/example/jquery/demo_test.txt,function(responseTxt,statusTxt,xhr) if(statusTxt=success) alert(外部内容加载成功！); if(statusTxt=error) alert(Error: +xhr.status+: +xhr.statusText); ); ););使用 jQuery AJAX 来改变文本获得外部内容3 jQuery Get/PostjQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。HTTP

10、请求：GET vs. POST两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。 GET- 从指定的资源请求数据 POST- 向指定的资源提交要处理的数据GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。3.1 jQuery $.get() 方法$.get() 方法通过 HTTP GET 请求从服务器上请求数据。语法：$.get(URL,callback);必需的URL参数规定您希望请求的 URL。可选的callback参数是请求成功后所执行

11、的函数名。下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：实例$(button).click(function() $.get(demo_test.asp,function(data,status) alert(Data: + data + nStatus: + status); ););实例$(document).ready(function() $(button).click(function() $.get(/example/jquery/demo_test.asp,function(data,status) alert(数据： + data + n状态： + sta

12、tus); ); ););向页面发送 HTTP GET 请求，然后获得返回的结果$.get() 的第一个参数是我们希望请求的 URL（demo_test.asp）。第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。提示：这个 ASP 文件 (demo_test.asp) 类似这样：3.2 jQuery $.post() 方法$.post() 方法通过 HTTP POST 请求从服务器上请求数据。语法：$.post(URL,data,callback);必需的URL参数规定您希望请求的 URL。可选的data参数规定连同请求发送的数据。可选的callback

13、参数是请求成功后所执行的函数名。下面的例子使用 $.post() 连同请求一起发送数据：实例$(button).click(function() $.post(demo_test_post.asp, name:Donald Duck, city:Duckburg , function(data,status) alert(Data: + data + nStatus: + status); ););实例$(document).ready(function() $(button).click(function() $.post(/example/jquery/demo_test_post.asp

14、, name:Donald Duck, city:Duckburg , function(data,status) alert(数据： + data + n状态： + status); ); ););向页面发送 HTTP POST 请求，并获得返回的结果$.post() 的第一个参数是我们希望请求的 URL (demo_test_post.asp)。然后我们连同请求（name 和 city）一起发送数据。demo_test_post.asp 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。提示：

15、这个 ASP 文件 (demo_test_post.asp) 类似这样：3.3 GET 对比 POST两种最常用的 HTTP 方法是：GET 和 POST。什么是 HTTP？超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通信。HTTP 的工作方式是客户机与服务器之间的请求-应答协议。web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。两种 HTTP 请求方法：GET 和 POST在客户机和服务器之间进行请求-响应时，两种最常被用到的方法

16、是：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

17、/test/demo_form.asp HTTP/1.1Host: name1=value1&name2=value2有关 POST 请求的其他一些注释： POST 请求不会被缓存 POST 请求不会保留在浏览器历史记录中 POST 不能被收藏为书签 POST 请求对数据长度没有要求比较 GET 与 POST下面的表格比较了两种 HTTP 方法：GET 和 POST。GETPOST后退按钮/刷新无害数据会被重新提交（浏览器应该告知用户数据会被重新提交）。书签可收藏为书签不可收藏为书签缓存能被缓存不能缓存编码类型application/x-www-form-urlencodedapplicati

18、on/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。历史参数保留在浏览器历史中。参数不会保存在浏览器历史中。对数据长度的限制是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。无限制。对数据类型的限制只允许 ASCII 字符。没有限制。也允许二进制数据。安全性与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服

19、务器日志中。可见性数据在 URL 中对所有人都是可见的。数据不会显示在 URL 中。其他 HTTP 请求方法下面的表格列出了其他一些 HTTP 请求方法：方法描述HEAD与 GET 相同，但只返回 HTTP 报头，不返回文档主体。PUT上传指定的 URI 表示。DELETE删除指定资源。OPTIONS返回服务器支持的 HTTP 方法。CONNECT把请求连接转换到透明的 TCP/IP 通道。3.4 jQuery Ajax 操作函数jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。函数描述jQuery.ajax()执行异步 HTTP

20、(Ajax) 请求。.ajaxComplete()当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。.ajaxError()当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。.ajaxSend()在 Ajax 请求发送之前显示一条消息。jQuery.ajaxSetup()设置将来的 Ajax 请求的默认值。.ajaxStart()当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。.ajaxStop()当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。.ajaxSuccess()当 Aj

21、ax 请求成功完成时显示一条消息。jQuery.get()使用 HTTP GET 请求从服务器加载数据。jQuery.getJSON()使用 HTTP GET 请求从服务器加载 JSON 编码数据。jQuery.getScript()使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。.load()从服务器加载数据，然后把返回到 HTML 放入匹配元素。jQuery.param()创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。jQuery.post()使用 HTTP POST 请求从服务器加载数据。.serialize()将表

22、单内容序列化为字符串。.serializeArray()序列化表单元素，返回 JSON 数据结构数据。4 jQuery.ajax() 方法实例通过 AJAX 加载一段文本：jQuery 代码：$(document).ready(function() $(#b01).click(function() htmlobj=$.ajax(url:/jquery/test1.txt,async:false); $(#myDiv).html(htmlobj.responseText); ););HTML 代码：Let AJAX change this textChange Content实例$(docume

23、nt).ready(function() $(#b01).click(function() htmlobj=$.ajax(url:/jquery/test1.txt,async:false); $(#myDiv).html(htmlobj.responseText); ););通过 AJAX 改变文本改变内容定义和用法ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项

24、，以获得更多的灵活性。最简单的情况下，$.ajax() 可以不带任何参数直接使用。注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。语法jQuery.ajax(settings)参数描述settings可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值。4.1 参数options类型：Object可选。AJAX 请求设置。所有选项都是可选的。async类型：Boolean默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。beforeSend(XHR)类型：Function发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Aja