PowerPoint 演示文稿

Size: px

Start display at page:

Download "PowerPoint 演示文稿"

较石
6 years ago
Views:

1 AJAX 在 jquery 中的应用管理科学与工程学科耿方方

2 主要内容加载异步数据请求服务器数据 $.ajax() 方法 AJAX 中的全局事件 AJAX 重构 AJAX 开发注意事项

3 加载异步数据传统的 JavaScript 方法为了加快整体页面的打开的速度, 对于某局部的数据采用异步读取的方法获取, 这一个方法的应用, 极大地优化了用户的体验, 优化了页面的执行传统的 JavaScript 方法使用传统的 JavaScript 方法, 基于 XMLHttpRequest 对象, 也可以将数据加载到页面中

4 加载异步数据传统的 JavaScript 方法案例 1:P160

5 加载异步数据 jquery 中的 load 方法在传统的 JavaScript 中, 使用 XMLHttpRequest 对象异步加载数据 ; 而在 jquery 中, 使用 load() 方法可以轻松实现获取异步数据的功能其调用的语法格式如下 : load( url [, data ] [, complete ] )

6 加载异步数据 jquery 中的 load 方法案例 2:

7 加载异步数据 jquery 中的 getjson 虽然使用 load() 方法可以很快地加载数据到页面中, 但有时需要对获取的数据进行处理, 如果将用 load() 方法获取的内容进行遍历, 也可以进行数据的处理, 但这样获取的内容必须先插入页面中, 然后才能进行, 因此, 执行的效率不高为了解决这个问题, 我们采用将要获取的数据另外一种轻量级的数据交换格式, 即 JSON 文件格式专门有一个全局函数 getjson(), 用于调用 JSON 格式的数据, 语法如下 : $.getjson(url,[data],[callback]) 参数 url 表示请求的地址, 可选项 [data] 参数表示发送到服务器的数据, 其格式为 key/value 另外一个可选项 [callback] 参数表示加载成功时执行的回调函数

8 加载异步数据 jquery 中的 getjson 案例 3 <script type="text/javascript"> $(function() { $("#Button1").click(function() { // 按钮单击事件 // 打开文件, 并通过回调函数处理获取的数据 $.getjson("json/userinfo.json", function(data) { $("#divtip").empty(); // 先清空标记中的内容 var strhtml = ""; // 初始化保存内容变量 $.each(data, function(infoindex, Info) { // 遍历获取的数据 strhtml += " 姓名 :" + Info["name"] + "<br>"; strhtml += " 性别 :" + Info["sex"] + "<br>"; strhtml += " 邮箱 :" + Info[" "] + "<hr>"; }) $("#divtip").html(strhtml); // 显示处理后的数据 }) }) }) </script>

9 加载异步数据 jquery 中的 getscript() 在 jquery 中, 还可以通过一个全局函数 getscript() 获取.js 文件的内容这样不仅可以像加载网页片段一样轻松地注入脚本, 而且所注入的脚本自动执行, 大大提高了页面的执行效率语法如下 : $.getscript(url,[callback])

10 加载异步数据 jquery 中的 getscript() 案例 4 <script type="text/javascript"> $(function() { $("#Button1").click(function() { // 按钮单击事件 // 打开已获取返回数据的文件 $.getscript("userinfo.js"); }) }) </script>

11 加载异步数据 jquery 中异步加载 XML 文档在日常的网页开发中, 有时也会遇到 XML 文档保存数据的情况, 对于这种格式的数据,jQuery 中使用全局函数 $.get() 进行访问, 其语法格式如下 : $.get(url[,data][,callback][,type])

12 加载异步数据 jquery 中异步加载 XML 文档案例 5 <script type="text/javascript"> $(function() { $("#Button1").click(function() { // 按钮单击事件 // 打开文件, 并通过回调函数处理获取的数据 $.get("xml/userinfo.xml", function(data) { $("#divtip").empty(); // 先清空标记中的内容 var strhtml = ""; // 初始化保存内容变量 $(data).find("user").each(function() { // 遍历获取的数据 var $struser = $(this); strhtml += " 姓名 :" + $struser.find("name").text() + "<br>"; strhtml += " 性别 :" + $struser.find("sex").text() + "<br>"; strhtml += " 邮箱 :" + $struser.find(" ").text() + "<hr>"; }); $("#divtip").html(strhtml); // 显示处理后的数据 }); }); }); </script>

13 请求服务器数据 $.get() 请求数据前面介绍的是如何从服务器取得静态的数据, 但页面的应用远不仅局限于此,Ajax 技术最终体现在与服务器的动态数据实现人机交互中, 即客户端传递带有参数的请求, 服务器接收后, 分析所传递来的请求, 并做出相应的相应, 发送对应数据至客户端, 客户端接收请求返回数据, 从而实现了数据的双向传递 $.get() 请求数据 $.get() 使用 GET 方法进行异步请求它的结构为 : $.get(url[,data][,callback][,type])

14 请求服务器数据 $.get() 请求数据使用参数确定请求页面的 URL 地址数据格式服务器返回的数据格式可以有很多中, 但都可以完成同样的任务, 下面是集中返回数据格式的对比应用 HTML 片段由于服务器端放回的数据格式是 HTML 片段, 因此并需要经过处理就可以将新的 HTML 数据插入到主页面中 XML 文档由于服务器端返回的数据格式是 XML 文档, 因此需要对返回的数据进行处理,JQuery 对 DOM 有强大的处理能力, 处理 XML 文档可以与处理 HTML 文档一样, 也可以使用常规的 attr(),find(),filter() 及其它方法

15 请求服务器数据 $.get() 请求数据 JSON 文件出现 JSON 文件很大程度上是因为 XML 文档体积大和难以解析,JSON 文件和 XML 文档一样, 很方便被重用 JSON 文件非常简洁, 并且很容易阅读服务器端返回的数据格式是 JSON 文件, 需要对返回的数据处理后才可以将新的 HTML 数据添加到主页面 text 返回纯文本字符串

16 请求服务器数据 $.get() 请求数据案例 6

17 请求服务器数据 $.post() 请求数据 $.post() 也是带参数向服务器发出数据请求全局函数 $.post() 与 $.get() 在本质上没有太大的区别, 所不同的是,GET 方式不适合传输数据量较大的数据, 同时, 其请求的历史信息会保存在浏览器的缓存中, 由一定的安全风险而以 POST 方式向服务器发送数据请求, 则不存在这两个方面的不足 GET 请求会将参数跟在 URL 后进行传递,POST 请求则是作为 HTTP 消息的实体内容发送给 Web 服务器在 AJAX 请求中, 这种区别对于用户不可见 GET 方式对传输的数据大小有限制 ( 通常不能大于 2KB), 而使用 POST 方式传递的数据量要比 GET 大 ( 理论上不受限制 ) $.post(url[,data][,callback][,type])

18 请求服务器数据 $.post() 请求数据案例 7

19 $.ajax() 方法使用上述的 load() $.get() $.post() 方法可以完成一些常规的 AJAX 程序, 如果还需要编写一些复杂的 AJAX 程序, 那么就要用到 JQuery 中的 $.ajax() 方法 $.ajax() 方法不仅能实现与 load() $.get() $.post() 方法同样的功能, 还可以设定 beforesend( 提交前回调函数 ) error( 请求失败后处理 ) success( 请求成功后处理 ) 以及 complete( 请求完成后处理 ) 回调函数, 通过这些回调函数, 可以给用户更多的 AJAx 提示信息还有些参数可以设置 AJAX 请求的超时时间或者页面的最后更改状态等

20 $.ajax() 方法 $.ajax() 的基本概念 $.ajax() 方法是 JQuery 最底层的 AJAX 实现它的结构为 : $.ajax(options) 其中可选项参数 [options] 为 $.ajax() 方法中的请求设置, 其格式为 key/value, 既包含发送请求的参数, 也含有服务器响应后回调的函数, 其全部名称如表 :

21 $.ajax() 方法 $.ajax() 的基本概念

22 $.ajax() 方法 $.ajax() 的基本概念

23 $.ajax() 方法 $.ajax() 的基本概念案例 8:

24 $.ajax() 方法 $.ajaxsetup() 设置全局 Ajax 在使用 ajax() 方法时, 有时需要调用多个 $.ajax() 方法, 如果每个方法都设置其中的请求细节, 将是一件十分麻烦的事为了简化这种工作, 在 jquery 中, 可以使用 $.ajaxsetup() 方法设置全局性的 Ajax 默认选项, 一次设置, 全局有效, 这样大大简化了 $.ajax() 方法中细节的编写, 该方法的调用格式为 : $.ajaxsetup([options]) 其中的可选项参数 [options] 是一个对象, 通过该对象可以设置 $.ajax() 方法中的参数

25 $.ajax() 方法 $.ajaxsetup() 设置全局 Ajax 案例 9

26 Ajax 中的全局事件在 jquery 中, 除了全局性的函数外, 还有 6 个全局性的 Ajax 事件由于在使用 $.ajax() 方法时, 其中的选项参数 global 的值默认情况下为 true, 这也就以为着, 所有在执行的 Ajax 的数据请求, 都绑定了全局事件

27 Ajax 中的全局事件 ajaxstart 与 ajaxstop 全局事件在 jquery 中, 使用 Ajax 获取异步数据时,ajaxStart 与 ajaxstop 这两个全局事件的使用频率非常高前者是当请求开始执行时触发, 往往用于编写一些准备性的工作, 如提示正在获取数据... 字样 ; 后者是当请求结束时触发, 在这一事件中, 常常与前者配合, 说明请求的最后进展状态, 如将显示中的正在获取数据字样改为已成功获取数据! 后渐渐消失

28 Ajax 中的全局事件 ajaxstart 与 ajaxstop 全局事件案例 10

1 1 大概思路创建 WebAPI 创建 CrossMainController 并编写 Nuget 安装 microsoft.aspnet.webapi.cors 跨域设置路由编写 Jquery EasyUI 界面运行效果 2 创建 WebAPI 创建 WebAPI, 新建 -> 项目 ->

1 1 大概思路创建 WebAPI 创建 CrossMainController 并编写 Nuget 安装 microsoft.aspnet.webapi.cors 跨域设置路由编写 Jquery EasyUI 界面运行效果 2 创建 WebAPI 创建 WebAPI, 新建 -> 项目 -> 目录 1 大概思路... 1 2 创建 WebAPI... 1 3 创建 CrossMainController 并编写... 1 4 Nuget 安装 microsoft.aspnet.webapi.cors... 4 5 跨域设置路由... 4 6 编写 Jquery EasyUI 界面... 5 7 运行效果... 7 8 总结... 7 1 1 大概思路创建 WebAPI 创建 CrossMainController