ajax技术-传智播客韩顺平.ppt

1、北京传智播客教育 ,ajax,讲师：韩顺平 email: qq: 2403931377,主讲 韩顺平,(一) ajax的基本原理和优点 1.ajax简介 w(what)w(why)h(how) 2.为什么使用(优点) 3.ajax的基本原理 (二) 谁在使用ajax (三) ajax可以解决怎样的问题 (四) ajax几个经典案例 1.无刷新验证用户名 2.省市联动菜单 3.天气最新报告(广泛用于各大网站),ajax介绍,ajax是2005年提出的，在2006，2007年迅速的发展，目前很 多网站都使用了ajax技术，在招聘软件工程师时，ajax技术 是必须要求掌握的。 AJAX即“Async

2、hronous JavaScript and XML” ajax技术包含了几种技术:javascript、xml、css、xstl、dom 、xhtml和XMLHttpRequest七种技术，所以ajax就像是粘合 剂把七种技术整合到一起，从而发挥各个技术的优势，威力 惊人。新瓶装旧酒,螳螂拳,虎拳,蛇拳,猴拳,猪拳,五形八卦拳,主讲 韩顺平,ajax的基本原理和优点,为什么ajax会如此流行，必然有它的道理。ajax技术解 决了很多其它技术解决不了的问题，比如: (1)页面无刷新的动态数据交换 (2)局部刷新页面【验证用户名唯一】 (3)界面的美观 【增强用户体验】 (4)对数据库的操作 (

3、5)可以返回简单的文本格式，也可以返回 xml文件格式, json数据格式,主讲 韩顺平,ajax的基本原理和优点,ajax原理示意图,传统web应用,应用服务器,数据库,静态页面,应用服务器,数据库,http请求,xml/text 格式数据,用户界面,客户端(浏览器),web服务器,web服务器,用户界面,ajax引擎,客户端(浏览器),峰哥,韩老师,韩老师,绝味,绝味,1,2,1,2,3,4,异步（不同步）,主讲 韩顺平,谁在使用ajax,ajax技术被广泛的使用比如： 1 google mail 【google 邮件】 2 google map 【google 地图】 3 google

4、calender【google 日历】 4 各大银行网站的股票、基金、黄金实时更新 5 各大门户网站【新浪/搜狐/网易/淘宝.】数据动态更新,主讲 韩顺平,谁在使用ajax,主讲 韩顺平,谁在使用ajax,主讲 韩顺平,谁在使用ajax,主讲 韩顺平,ajax可以解决怎样的问题, ajax典型的应用场景 1 动态加载数据，按需取得数据。【树形菜单、联动菜单.】 2 改善用户体验。【输入内容前提示、带进度条文件上传.】 3 电子商务应用。【购物车、邮件订阅.】 4 访问第三方服务。【访问搜索服务、rss阅读器】,主讲 韩顺平,ajax几个经典案例, ajax经典案例无刷新验证用户名 在用户注册时

5、： 1 传统的方法是把用户填写的所有信息都提交到服务器，如果 用户名重复，就会出异常。 2 如果使用ajax我们可以只提交用户名，确认用户名是否存在 ，再让用户点击注册 3 这是我们第一个案例，大家注意ajax开发的几个关键点 lets go !,参考ajax原理图,主讲 韩顺平,ajax几个经典案例, ajax经典案例无刷新验证用户名(get),1. 创建XMLHttpRequest对象 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的.我们使用js 的try.catch.,主讲 韩顺平,function getXmlHttp() var xmlHttp; try / F

6、irefox, 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; ,ajax几个经典案例, ajax经典案例无刷新验证用户名(get),php 模板 echo ok;,主讲 韩顺平,aj

7、ax 模板代码 var http_request; function sendHttpRequest() if(window.ActiveXObject) http_request=new ActiveXObject(“Microsoft.XMLHTTP”); elsehttp_request=new XMLHttpRequest(); if(http_request)var url=“发送请求给php”; http_request.open(“GET”,url,true); /如果 设为false表示同步，这样可以直接在if使用 http_request.responseText http_

8、request.onreadystatechange=chuli; http_request.send(); function chuli() if(http_request.readyState=4) if(http_request.status=200)var res=http_request.responseText; /返回的是文本 根据返回的文本做相应的处理即可 ,ajax几个经典案例,主讲 韩顺平, ajax经典案例无刷新验证用户名(post),php 模板 echo ok;,ajax 模板代码 var http_request; function sendHttpRequest(

9、) if(window.ActiveXObject) http_request=new ActiveXObject(“Microsoft.XMLHTTP”); elsehttp_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.onr

10、eadystatechange=chuli; http_request.send(“name=hsp /返回的是文本 根据返回的文本做相应的处理即可 ,ajax几个经典案例,主讲 韩顺平, 返回数据格式,AJAX 可以在php项目,java ee项目,.net项目使用。在服务器端的业务逻辑层使用何种服务器端语言都可以。 从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言一般以如下 3 种格式返回数据： Text(又称Html格式) XML JSON,ajax几个经典案例, 返回Html格式,HTML 由一些普通文本组成。如果服务器通过 XMLHttpRequ

11、est 发送 HTML， 文本将存储在 responseText 属性中。 不必从 responseText 属性中读取数据。它已经是希望的格式，可以直接将它插入到页面中。 插入 HTML 代码最简单的方法是更新这个元素的 innerHTML 属性。,主讲 韩顺平,ajax几个经典案例, 返回Html格式,优点： 从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析。 HTML 的可读性好。 HTML 代码块与 innerHTML 属性搭配，效率高。 缺点： 若需要通过 AJAX 更新一篇文档的多个部分，HTML 不合适 innerHTML 并非 DOM 标准。,

12、主讲 韩顺平,ajax几个经典案例, 返回xml格式,前面的案例，我们使用html(文本)格式返回了结果，现在我们演示 一下使用xml格式来返回结果.,提示: 返回xml 格式: 用户存在或是，不存在,主讲 韩顺平,/这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式 header(Content-Type: text/xml;charset=utf-8); /告诉浏览器不要缓存数据 header(Cache-Control: no-cache);,ajax几个经典案例, 返回xml格式,优点： XML 是一种通用的数据格式。 不必把数据强加到已定义好的格式中，而是要为数据自定义合适的

13、标记。 利用 DOM 可以完全掌控文档。 缺点： 如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么 responseXML 的值将是空的。 当浏览器接收到长的 XML 文件后， DOM 解析可能会很复杂,主讲 韩顺平,ajax几个经典案例, json格式快速入门案例,提示: 返回json格式:,JSON 只是一种文本字符串。它被存储在 responseText 属性中 为了读取存储在 responseText 属性中的 JSON 数据，需要根据 JavaScript 的 eval 语句。函数 eval 会把一个字符串当作它的参数。然后这个字符串会被当作 Java

14、Script 代码来执行。因为 JSON 的字符串就是由 JavaScript 代码构成的，所以它本身是可执行的 代码实例：,主讲 韩顺平,header(Content-Type: text/html;charset=utf-8); header(Cache-Control: no-cache); “mes”:”用户存在或是不存在”,ajax几个经典案例, json格式细节1,JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。

15、 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,

16、 null,主讲 韩顺平,ajax几个经典案例, json格式细节说明2,JSON 用冒号(而不是等号)来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。可用大括号分级嵌套数据。 对象描述中存储的数据可以是字符串，数字或者布尔值。对象描述也可存储函数，那就是对象的方法。,主讲 韩顺平,ajax几个经典案例, json格式其它解析案例,例子一: var people =firstName: Brett, lastName:McLaughlin, email: brettnewI ; alert(people.firstName); alert(people.lastName); ale

17、rt(people.email); , var people = firstName: Brett,email: brettnewI , firstName: Mary,email: marynewI ; alert(people0.firstName); alert(people0.email); alert(people1.firstName); alert(people1.email); ,主讲 韩顺平,ajax几个经典案例, json格式其它解析案例,例子三: var people = programmers: firstName: Brett, email: brettnewI ,

18、firstName: Jason, email: ; window.alert(grammers0.firstName); window.alert(grammers1.email); ,主讲 韩顺平,ajax几个经典案例, json格式其它解析案例,例子四: var people = programmers: firstName: Brett, email: brettnewI , firstName: Jason, email: , firstName: Elliotte, lastName:Harold, email: , authors: fir

19、stName: Isaac, genre: science fiction , firstName: Tad, genre: fantasy , firstName: Frank, genre: christian fiction , musicians: firstName: Eric, instrument: guitar , firstName: Sergei, instrument: piano ; window.alert(grammers1.firstName); window.alert(people.musicians1.instrument); ,主讲 韩

20、顺平,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(.tel); window.alert(people.address0.city); ,主讲 韩顺平,ajax几个经典案例, json格式小结,优点： 作为一种数据传输格式，JSON 与 XML 很相似，但是它更加灵巧。 JSON 不需要从服务器端发送含有特定内容类型的首部信息。