ajax技术点简介

—高级软件人才实作培训专家!北京传智播客教育讲师：韩顺平email:[e-mail]: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即“AsynchronousJavaScriptandXML”ajax技术包含了几种技术:javascript、xml、css、xstl、dom、xhtml和XMLHttpRequest七种技术，所以ajax就像是粘合剂把七种技术整合到一起，从而发挥各个技术的优势，威力惊人。[新瓶装旧酒]螳螂拳虎拳蛇拳猴拳猪拳五形八卦拳主讲韩顺平—高级软件人才实作培训专家!ajax的基本原理和优点为什么ajax会如此流行，必然有它的道理。ajax技术解决了很多其它技术解决不了的问题，比如:(1)页面无刷新的动态数据交换(2)局部刷新页面【验证用户名唯一】(3)界面的美观【增强用户体验】(4)对数据库的操作(5)可以返回简单的文本格式，也可以返回xml文件格式,json数据格式主讲韩顺平—高级软件人才实作培训专家!ajax的基本原理和优点应用服务器数据库静态页面应用服务器数据库http请求xml/text格式数据用户界面用户界面ajax引擎异步（不同步）主讲韩顺平—高级软件人才实作培训专家!谁在使用ajaxajax技术被广泛的使用比如：1googlemail【google邮件】2googlemap【google地图】3googlecalender【google日历】4各大银行网站的股票、基金、黄金实时更新5各大门户网站【新浪/搜狐/网易/淘宝...】数据动态更新主讲韩顺平—高级软件人才实作培训专家!谁在使用ajax主讲韩顺平—高级软件人才实作培训专家!谁在使用ajax主讲韩顺平—高级软件人才实作培训专家!谁在使用ajax主讲韩顺平—高级软件人才实作培训专家!ajax可以解决怎样的问题■ajax典型的应用场景1动态加载数据，按需取得数据。【树形菜单、联动菜单...】2改善用户体验。【输入内容前提示、带进度条文件上传...】3电子商务应用。【购物车、邮件订阅...】4访问第三方服务。【访问搜索服务、rss阅读器】主讲韩顺平—高级软件人才实作培训专家!ajax几个经典案例■ajax经典案例—无刷新验证用户名在用户注册时：1传统的方法是把用户填写的所有信息都提交到服务器，如果用户名重复，就会出异常。2如果使用ajax我们可以只提交用户名，确认用户名是否存在，再让用户点击注册3这是我们第一个案例，大家注意ajax开发的几个关键点let’sgo!主讲韩顺平—高级软件人才实作培训专家!ajax几个经典案例■ajax经典案例—无刷新验证用户名(get)1.创建XMLHttpRequest对象不同的浏览器创建XMLHttpRequest对象的方法是有差异的.我们使用js的try..catch..主讲韩顺平functiongetXmlHttp(){varxmlHttp;try{//Firefox,Opera8.0+,SafarixmlHttp=newXMLHttpRequest();}catch(e){//InternetExplorertry{xmlHttp=newActiveXObject(Msxml2.XMLHTTP);}catch(e){try{xmlHttp=newActiveXObject(Microsoft.XMLHTTP);}catch(e){alert(您的浏览器不支持AJAX！);returnfalse;}}}}—高级软件人才实作培训专家!ajax几个经典案例■ajax经典案例—无刷新验证用户名(get)php模板echook;主讲韩顺平ajax模板代码varhttp_request;functionsendHttpRequest(){if(window.ActiveXObject){http_request=newActiveXObject(“Microsoft.XMLHTTP”);}else{http_request=newXMLHttpRequest();}if(http_request){varurl=“发送请求给php”;http_request.open(“GET”,url,true);//如果设为false表示同步，这样可以直接在if使用http_request.responseTexthttp_request.onreadystatechange=chuli;http_request.send();}}functionchuli(){if(http_request.readyState==4){if(http_request.status==200){varres=http_request.responseText;//返回的是文本根据返回的文本做相应的处理即可}}}—高级软件人才实作培训专家!ajax几个经典案例主讲韩顺平■ajax经典案例—无刷新验证用户名(post)php模板echook;ajax模板代码varhttp_request;functionsendHttpRequest(){if(window.ActiveXObject){http_request=newActiveXObject(“Microsoft.XMLHTTP”);}else{http_request=newXMLHttpRequest();}if(http_request){varurl=“发送请求给servlet或action”;http_request.open(“POST,url,true);http_request.setRequestHeader(“Content-Type”,”application/x-”);http_request.onreadystatechange=chuli;http_request.send(“name=hsp&email=[e-mail]”);}}functionchuli(){if(http_request.readyState==4){if(http_request.status==200){varres=http_request.responseText;//返回的是文本根据返回的文本做相应的处理即可}}}—高级软件人才实作培训专家!ajax几个经典案例主讲韩顺平■返回数据格式AJAX可以在php项目,javaee项目,.net项目使用。在服务器端的业务逻辑层使用何种服务器端语言都可以。从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言一般以如下3种格式返回数据：•Text(又称Html格式)•XML•JSON—高级软件人才实作培训专家!ajax几个经典案例■返回Html格式HTML由一些普通文本组成。如果服务器通过XMLHttpRequest发送HTML，文本将存储在responseText属性中。不必从responseText属性中读取数据。它已经是希望的格式，可以直接将它插入到页面中。插入HTML代码最简单的方法是更新这个元素的innerHTML属性。主讲韩顺平—高级软件人才实作培训专家!ajax几个经典案例■返回Html格式优点：•从服务器端发送的HTML代码在浏览器端不需要用JavaScript进行解析。•HTML的可读性好。•HTML代码块与innerHTML属性搭配，效率高。缺点：•若需要通过AJAX更新一篇文档的多个部分，HTML不合适•innerHTML并非DOM标准。主讲韩顺平—高级软件人才实作培训专家!ajax几个经典案例■返回xml格式前面的案例，我们使用html(文本)格式返回了结果，现在我们演示一下使用xml格式来返回结果.提示:返回xml格式:resultmes用户存在或是，不存在/mes/result主讲韩顺平//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式header(Content-Type:text/xml;charset=utf-8);//告诉浏览器不要缓存数据header(Cache-Control:no-cache);—高级软件人才实作培训专家!ajax几个经典案例■返回xml格式优点：•XML是一种通用的数据格式。•不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。•利用DOM可以完全掌控文档。缺点：•如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么responseXML的值将是空的。•当浏览器接收到长的XML文件后，DOM解析可能会很复杂主讲韩顺平—高级软件人才实作培训专家!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”:”用户存在或是不存在”}—高级软件人才实作培训专家!ajax几个经典案例■json格式细节1JSON（JavaScriptObjectNotation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。规则如下:1）映射用冒号（“：”）表示。名称:值2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值23）映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}4）并列数据的集合（数组）用方括号(“[]”)表示。[{名称1:值,名称2:值2},{名称1:值,名称2:值2}]5元素值可具有的类型：string,number,object,array,true,false,null主讲韩顺平—高级软件人才实作培训专家!ajax几个经典案例■json格式细节说明2JSON用冒号(而不是等号)来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。可用大括号分级嵌套数据。对象描述中存储的数据可以是字符串，数字或者布尔值。对象描述也可存储函数，那就是对象的方法。主讲韩顺平—高级软件人才实作培训专家!ajax几个经典案例■json格式其它解析案例例子一:scriptlanguage=JavaScriptvarpeople={firstName:Brett,lastName:McLaughlin,email:[e-mail]};alert(people.firstName);alert(people.lastName);alert(people.email);/sc