基于AJAX 和WebService的Web开发第03章AJAX基本原理

,AJAX基本原理,基于Ajax和WebService的Web2.0开发第三章,本章目标,了解HTTP协议了解Ajax了解异步和同步了解XmlHttpRequest对象掌握简单的Ajax编程,AJAX在GoogleSuggest中的应用（智能提示）,初上手时并没有感觉GMail和其他的WebMail有什么不同，但只要点击一个链接，差异就出来了：邮件内容或者选项菜单仿佛是一瞬间弹出来的。,IGoogle中可以拖放的区域,AJAX在GoogleMaps中的应用（图像显示几乎没有延迟）,AJAX,Web2.0的“特洛伊战士”,AJAX，中文译作艾亚斯，荷马史诗里著名的特洛伊战争中的古希腊战斗英雄，以骁勇善战之名传世。如今，一种称为AJAX的新的网页交互技术仿佛一夜之间在Web2.0的战场上攻城夺地，占尽风头。AJAX战斗力何在？让我们来近距离地看看这位今天的Web2.0名将。,Ajax所牵涉到的技术,HTML负责页面的结构以及一些简单的布局CSS负责页面的样式和大部分的布局XML统一数据的格式所需的数据DOM提供对文档结构的统一访问XmlHttpRequestAjax的核心对象，提供对服务器的异步调用Javascript以上技术依靠JavaScript脚本进行整合,协调,Ajax以前的Web,远古,请求HTML页面,返回HTML代码,近代,请求资源,ASP.NET引擎,返回请求的资源,同步和异步,输入URL,请求资源,生成HTML返回,填写表单，提交,验证错误，修正,修正完毕,提交,验证错误，修正,修正完毕,提交,输入URL,请求资源,生成HTML返回,填写表单,验证字段1,错误1,验证字段2,错误2,更正，成功,使用XmlHttpRequest,AJAX是：JavaScript、CSS、DOM、XmlHttpRequest四种技术的集合体，主要应用于异步获取后台数据和局部刷新。,XmlHttpRequest,JavaScript,CSS,DOM,服务器,客户端部分,通过该对象，对数据进行异步的传送处理,使用XmlHttpRequest,创建XmlHttpRequestIE实现为ActiveX组件ActiveXObject(“Microsoft.XMLHTTP”);IE的XMLHTTP的版本Microsoft.XMLHTTPMSXML2.XMLHTTPMSXML2.XMLHTTP2.0MSXML2.XMLHTTP3.0MSXML2.XMLHTTP4.0MSXML2.XMLHTTP5.0其他浏览器实现为本地的JavaScript对象XMLHttpRequest演示:创建XmlHttpRequest,使用XmlHttpRequest,/创建XMLHTTP对象functionGetXmlHTTP()XmlHttp=newActiveXObject(Microsoft.XMLHTTP)returnXmlHttp;XmlHttp.open(POST,SearchPageName,true)XmlHttp.setRequestHeader(Content-Type,text/xml)XmlHttp.send(XmlSend)varobjDoc=XmlHttp.responseXML.documentElement;,使用XmlHttpRequest,发送请求Open方法:建立对服务器的某个资源的调用参数一:调用方法(GET,POST)参数二:调用资源的URL参数三:true代表异步；false代表同步Send方法:向服务器发出请求参数一:DOM对象,输入流，串等.作为请求体的一部分发送Onreadystatechange属性:这相当于一个事件,它指向一个方法。每当XmlHttpRequest对象的状态改变时，触发该事件，调用事件处理方法/,使用XmlHttpRequest,发送请求(续)readyState:XmlHttpRequest的请求状态0:请求没有初始化1:正在加载2:已经加载3:交互中4:完成Status:Http的状态码(HTTP状态码.txt)200-服务器成功返回网页404-请求的网页不存在503-服务器超时演示:简单的示例,使用XmlHttpRequest,交互图片,Ajax客户端,服务器,触发事件,创建XmlHttpRequest,发出请求,服务器资源,执行回调方法,发送请求和处理响应,看看两个属性responseText:将响应作为一个文本responseXML:将响应作为一个Xml对象将响应的内容处理成HtmlinnerHTML属性:将文本中的html字符串作为HTML解析显示演示:将响应处理成HTML将响应解析为XML当传送一些复杂的数据类型时(例如对象),使用Xml是一种比较好的方式能以DOM对响应的Xml进行解析演示:解析XML,发送请求和处理响应,在ASP.NET中使用Ajax.ashx介绍相当于Java中的Servlet验证用户名是否存在演示:用户名是否存在,发送请求和处理响应,/用户注册的用户名检测functionRegister(id)if(id=)document.getElementById(lblMessage).innerHTML=用户名不能为空！;document.getElementById(lblMessage).style.color=red;elseVerifyUsername(id);,发送请求和处理响应,/1.创建XMLHttpRequest组件if(window.ActiveXObject)xmlHttpRequest=newActiveXObject(Microsoft.XMLHTTP);elseif(window.XMLHttpRequest)xmlHttpRequest=newXMLHttpRequest();/2.设置回调函数xmlHttpRequest.onreadystatechange=IsUsernameExist_callback;/3.初始化XMLHttpRequest组件xmlHttpRequest.open(GET,Handler.ashx?customerid=+id,true);/4.发送请求xmlHttpRequest.send();/获取返回值varmessage=xmlHttpRequest.responseText;,发送请求和处理响应,以POST发送请求根据HTTP协议,POST的请求参数是在协议体中发送的，意味着下面的代码不成立:,总结,Ajax的原理什么是异步Ajax的核心对象XmlHttpRequest在不同浏览器上创建XmHttpRequest的方式使用XmlHttpRequest发送请求OpenSendonreadystatechange使用XmlHttpRequest处理响应responseTextresponseXMLGET和POST请求的异同,习题,一、关于AJAX，下列说法错误的是：A.AJAX使用javascript调用B.用到了XML、HTML技术C.AJAX是一门编程语言D.AJAX是新的网页交互技术,习题,二、创建XMLHttpRequest对象的代码：A.xRequest=newActiveXObject(Microsoft.XML);B.xRequest=newActiveXObject(Microsoft.XMLHTTP);C.xRequest=newActiveXObject(Microsoft.XMLRequest);D.xRequest=newActiveXObject(Microsoft.HTTPRequest);,习题,三、创建XMLHttpRequest对象发送请求的方法名是：A.Send();B.SendXml();C.SendHttp();D.SendRequest();,习题,四、XMLHttpRequest处理响应的方法名是：