— 高级软件人才实作培训专家 ! 北京传智播客教育 ajax 讲师：韩顺平 qq: 2403931377.

Presentation on theme: "— 高级软件人才实作培训专家 ! 北京传智播客教育 ajax 讲师：韩顺平 qq: 2403931377."— Presentation transcript:

1 — 高级软件人才实作培训专家 ! 北京传智播客教育 www.itcast.cn ajax 讲师：韩顺平 email:hanshunping@tsinghua.org.cn qq: 2403931377

2 — 高级软件人才实作培训专家 ! 主讲 韩顺平 ( 一 ) ajax 的基本原理和优点 1.ajax 简介 w(what)w(why)h(how) 2. 为什么使用 ( 优点 ) 3.ajax 的基本原理 ( 二 ) 谁在使用 ajax ( 三 ) ajax 可以解决怎样的问题 ( 四 ) ajax 几个经典案例 1. 无刷新验证用户名 2. 省市联动菜单 3. 天气最新报告 ( 广泛用于各大网站 )

3 — 高级软件人才实作培训专家 ! ajax 介绍 ajax 是 2005 年提出的，在 2006 ， 2007 年迅速的发展，目前很 多网站都使用了 ajax 技术，在招聘软件工程师时， ajax 技术 是必须要求掌握的。 AJAX 即 “Asynchronous JavaScript and XML” ajax 技术包含了几种技术 :javascript 、 xml 、 css 、 xstl 、 dom 、 xhtml 和 XMLHttpRequest 七种技术，所以 ajax 就像是粘合 剂把七种技术整合到一起，从而发挥各个技术的优势，威力 惊人。 [ 新瓶装旧酒 ] 螳螂拳虎拳蛇拳猴拳猪拳 五形八卦拳 主讲 韩顺平

4 — 高级软件人才实作培训专家 ! ajax 的基本原理和优点 为什么 ajax 会如此流行，必然有它的道理。 ajax 技术解 决了很多其它技术解决不了的问题，比如 : (1) 页面无刷新的动态数据交换 (2) 局部刷新页面【验证用户名唯一】 (3) 界面的美观 【增强用户体验】 (4) 对数据库的操作 (5) 可以返回简单的文本格式，也可以返回 xml 文件格 式, json 数据格式 主讲 韩顺平

5 — 高级软件人才实作培训专家 ! ajax 的基本原理和优点 应用服务器 数据库 静态页面 应用服务器 数据库 http 请 求 xml/text 格式数据 用户界面 ajax 引擎 异步（不同步） 主讲 韩顺平

6 — 高级软件人才实作培训专家 ! 谁在使用 ajax ajax 技术被广泛的使用比如： 1 google mail 【 google 邮件】 2 google map 【 google 地图】 3 google calender 【 google 日历】 4 各大银行网站的股票、基金、黄金实时更新 5 各大门户网站【新浪 / 搜狐 / 网易 / 淘宝... 】数据动态更新 主讲 韩顺平

7 — 高级软件人才实作培训专家 ! 谁在使用 ajax 主讲 韩顺平

8 — 高级软件人才实作培训专家 ! 谁在使用 ajax 主讲 韩顺平

9 — 高级软件人才实作培训专家 ! 谁在使用 ajax 主讲 韩顺平

10 — 高级软件人才实作培训专家 ! ajax 可以解决怎样的问题 ■ ajax 典型的应用场景 1 动态加载数据，按需取得数据。【树形菜单、联动菜单... 】 2 改善用户体验。【输入内容前提示、带进度条文件上传... 】 3 电子商务应用。【购物车、邮件订阅... 】 4 访问第三方服务。【访问搜索服务、 rss 阅读器】 主讲 韩顺平

11 — 高级软件人才实作培训专家 ! ajax 几个经典案例 ■ ajax 经典案例 — 无刷新验证用户名 在用户注册时： 1 传统的方法是把用户填写的所有信息都提交到服务器，如果 用户名重复，就会出异常。 2 如果使用 ajax 我们可以只提交用户名，确认用户名是否存在 ，再让用户点击注册 3 这是我们第一个案例，大家注意 ajax 开发的几个关键点 let’s go ! 主讲 韩顺平

12 — 高级软件人才实作培训专家 ! ajax 几个经典案例 ■ ajax 经典案例 — 无刷新验证用户名 (get) 1. 创建 XMLHttpRequest 对象 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的. 我们使用 js 的 try..catch.. 主讲 韩顺平 function getXmlHttp() {var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest();} catch (e){ // Internet Explorer try{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");} catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");} catch (e){ alert(" 您的浏览器不支持 AJAX ！ "); return false;}} }}

13 — 高级软件人才实作培训专家 ! ajax 几个经典案例 ■ ajax 经典案例 — 无刷新验证用户名 (get) php 模板 echo "ok"; 主讲 韩顺平 ajax 模板代码 var http_request; function sendHttpRequest(){ if(window.ActiveXObject){ http_request=new ActiveXObject(“Microsoft.XMLHTTP”); } else{http_request=new XMLHttpRequest();} if(http_request){var url=“ 发送请求给 php”; http_request.open(“GET”,url,true); // 如果 设为 false 表示同步，这样可以直接在 if 使用 http_request.responseText http_request.onreadystatechange=chuli; http_request.send(); } function chuli(){ if(http_request.readyState==4){ if(http_request.status==200){var res=http_request.responseText; // 返回的是文本 根据返回的文本做相应的处理即可 } }}

14 — 高级软件人才实作培训专家 ! ajax 几个经典案例 主讲 韩顺平 ■ ajax 经典案例 — 无刷新验证用户名 (post) php 模板 echo "ok"; ajax 模板代码 var http_request; function sendHttpRequest(){ if(window.ActiveXObject){ http_request=new ActiveXObject(“Microsoft.XMLHTTP”); } else{http_request=new XMLHttpRequest();} if(http_request){var url=“ 发送请求给 servlet 或 action”; http_request.open(“POST",url,true); http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”); http_request.onreadystatechange=chuli; http_request.send(“name=hsp&email=kk@sohu.com”); } function chuli(){ if(http_request.readyState==4){ if(http_request.status==200){var res=http_request.responseText; // 返回的是文本 根据返回的文本做相应的处理即可 } }}

15 — 高级软件人才实作培训专家 ! ajax 几个经典案例 主讲 韩顺平 ■ 返回数据格式 AJAX 可以在 php 项目,java ee 项目,.net 项目使用。在服务器端 的业务逻辑层使用何种服务器端语言都可以。 从服务器端接收数据的时候，那些数据必须以浏览器能够理解 的格式来发送。服务器端的编程语言一般以如下 3 种格式返回数 据： Text( 又称 Html 格式 ) XML JSON

16 — 高级软件人才实作培训专家 ! ajax 几个经典案例 ■ 返回 Html 格式 HTML 由一些普通文本组成。如果服务器通过 XMLHttpRequest 发送 HTML ， 文本将存储在 responseText 属性中。 不必从 responseText 属性中读取数据。它已经是希望的格 式，可以直接将它插入到页面中。 插入 HTML 代码最简单的方法是更新这个元素的 innerHTML 属性。 主讲 韩顺平

17 — 高级软件人才实作培训专家 ! ajax 几个经典案例 ■ 返回 Html 格式 优点： 从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析。 HTML 的可读性好。 HTML 代码块与 innerHTML 属性搭配，效率高。 缺点： 若需要通过 AJAX 更新一篇文档的多个部分， HTML 不合 适 innerHTML 并非 DOM 标准。 主讲 韩顺平

18 — 高级软件人才实作培训专家 ! ajax 几个经典案例 ■ 返回 xml 格式 前面的案例，我们使用 html( 文本 ) 格式返回了结果，现在我们演示 一下使用 xml 格式来返回结果. 提示 : 返回 xml 格式 : 用户存在或是，不存在 主讲 韩顺平 // 这里两句话很重要, 第一讲话告诉浏览器返回的数据是 xml 格式 header("Content-Type: text/xml;charset=utf-8"); // 告诉浏览器不要缓存数据 header("Cache-Control: no-cache");

19 — 高级软件人才实作培训专家 ! ajax 几个经典案例 ■ 返回 xml 格式 优点： XML 是一种通用的数据格式。 不必把数据强加到已定义好的格式中，而是要为数据自定义 合适的标记。 利用 DOM 可以完全掌控文档。 缺点： 如果文档来自于服务器，就必须得保证文档含有正确的首部 信息。若文档类型不正确，那么 responseXML 的值将是空的 。 当浏览器接收到长的 XML 文件后， DOM 解析可能会很复杂 主讲 韩顺平

20 — 高级软件人才实作培训专家 ! ajax 几个经典案例 ■ json 格式快速入门案例 提示 : 返回 json 格式 : JSON 只是一种文本字符串。它被存储在 responseText 属性中 为了读取存储在 responseText 属性中的 JSON 数据，需要根据 JavaScript 的 eval 语句。函数 eval 会把一个字符串当作它的参数。 然后这个字符串会被当作 JavaScript 代码来执行。因为 JSON 的字 符串就是由 JavaScript 代码构成的，所以它本身是可执行的 代码实例： 主讲 韩顺平 header("Content-Type: text/html;charset=utf-8"); header("Cache-Control: no-cache"); {“mes”:” 用户存在或是不存在 ”}

21 — 高级软件人才实作培训专家 ! ajax 几个经典案例 ■ json 格式细节 1 JSON （ JavaScript Object Notation ）一种简单的数据格式，比 xml 更轻巧。 JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任 何特殊的 API 或工具包。 JSON 的规则很简单：对象是一个无序的 “‘ 名称 / 值 ’ 对 ” 集合。一个对象以 “{” （ 左括号）开始， “}” （右括号）结束。每个 “ 名称 ” 后跟一个 “:” （冒号）； “‘ 名称 / 值 ’ 对 ” 之间使用 “,” （逗号）分隔。 规则如下 : 1 ）映射用冒号（ “ ： ” ）表示。名称 : 值 2 ）并列的数据之间用逗号（ “ ， ” ）分隔。名称 1: 值 1, 名称 2: 值 2 3 ） 映射的集合（对象）用大括号（ “{}” ）表示。 { 名称 1: 值 1, 名称 2: 值 2} 4 ） 并列数据的集合（数组）用方括号 (“[]”) 表示。 [ { 名称 1: 值, 名称 2: 值 2}, { 名称 1: 值, 名称 2: 值 2} ] 5 元素值可具有的类型： string, number, object, array, true, false, null 主讲 韩顺平

22 — 高级软件人才实作培训专家 ! ajax 几个经典案例 ■ json 格式细节说明 2 JSON 用冒号 ( 而不是等号 ) 来赋值。每一条赋值语句用逗号分开。整个对象用 大括号封装起来。可用大括号分级嵌套数据。 对象描述中存储的数据可以是字符串，数字或者布尔值。对象描述也可存储函 数，那就是对象的方法。 主讲 韩顺平

23 — 高级软件人才实作培训专家 ! ajax 几个经典案例 ■ json 格式其它解析案例 例子一 : var people ={"firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }; alert(people.firstName); alert(people.lastName); alert(people.email); var people =[ {"firstName": "Brett","email": "brett@newInstance.com" }, {"firstName": "Mary","email": "mary@newInstance.com" } ]; alert(people[0].firstName); alert(people[0].email); alert(people[1].firstName); alert(people[1].email); 主讲 韩顺平

24 — 高级软件人才实作培训专家 ! ajax 几个经典案例 ■ json 格式其它解析案例 例子三 : var people ={ "programmers": [ {"firstName": "Brett", "email": "brett@newInstance.com" }, {"firstName": "Jason", "email": "jason@servlets.com" } ] }; window.alert(people.programmers[0].firstName); window.alert(people.programmers[1].email); 主讲 韩顺平

25 — 高级软件人才实作培训专家 ! ajax 几个经典案例 ■ json 格式其它解析案例 例子四 : var people ={ "programmers": [ { "firstName": "Brett", "email": "brett@newInstance.com" }, { "firstName": "Jason", "email": "jason@servlets.com" }, { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" } ], "authors": [ { "firstName": "Isaac", "genre": "science fiction" }, { "firstName": "Tad", "genre": "fantasy" }, { "firstName": "Frank", "genre": "christian fiction" } ], "musicians": [ { "firstName": "Eric", "instrument": "guitar" }, { "firstName": "Sergei", "instrument": "piano" } ]}; window.alert(people.programmers[1].firstName); window.alert(people.musicians[1].instrument); 主讲 韩顺平

26 — 高级软件人才实作培训专家 ! ajax 几个经典案例 ■ json 格式其它解析案例 例子五 var people ={ "username":"mary", "age":"20", "info":{"tel":"1234566","celltelphone":788666}, "address":[ {"city":"beijing","code":"1000022"}, {"city":"shanghai","code":"2210444"} ] }; window.alert(people.username); window.alert(people.info.tel); window.alert(people.address[0].city); 主讲 韩顺平

27 — 高级软件人才实作培训专家 ! ajax 几个经典案例 ■ json 格式小结 优点： 作为一种数据传输格式， JSON 与 XML 很相似，但是 它更加灵巧。 JSON 不需要从服务器端发送含有特定内容类型的首 部信息。 缺点： 语法过于严谨 代码不易读 eval 函数存在风险 主讲 韩顺平

28 — 高级软件人才实作培训专家 ! ajax 几个经典案例 ■ html vs xml vs json 比较 若应用程序不需要与其他应用程序共享数据的时候, 使用 HTML 片段 来返回数据时最简单的 如果数据需要重用, JSON 文件是个不错的选择, 其在性能和文件大小 方面有优势 当远程应用程序未知时, XML 文档是首选, 因为 XML 是 web 服务领 域的 “ 世界语 ” 主讲 韩顺平

29 — 高级软件人才实作培训专家 ! ajax 几个经典案例 ■ ajax 经典案例 — 省市联动 ajax 一个最重要的用途就是，动态的从服务器取需要的 数据，并在页面无刷新的显示，我们来看一个经典的用 法 : 省市联动菜单 : 1 传统的 b/s 中，显示省市联动菜单是一次性把数据全部 取出，并在客户端显示，这样做数据传输量大，不灵活。 2 使用 ajax 技术，可以根据用户需求从服务器取数据， 当用户点击某个按钮时，才从服务器取数据并显示，灵 活。 3. 让学生从数据库取出数据，县城级别联动做出. 主讲 韩顺平

30 — 高级软件人才实作培训专家 ! ajax 几个经典案例 ■ ajax 经典案例 — 天气实时报告 ajax 一个最重要的用途就是，及时的从服务器取需要的数据 ，并在页面实现局部刷新显示，让用户使用更加方便，我们 来看另一个经典的用法，黄金市场报告： 1 传统的 b/s 中，页面是整体刷新，页面显示有明显延时，影 响用户的浏览。 2 使用 ajax 技术，可以及时的从服务器取出最新的黄金价格 ，并实现局部刷新，页面显示没有延时和刷新的感觉。 主讲 韩顺平

31 — 高级软件人才实作培训专家 ! ajax 几个经典案例 主讲 韩顺平 聊天室（多人聊天，带离线留言功能）

32 — 高级软件人才实作培训专家 !