资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,课程介绍,目的：,内容：,重点：,难点：,*,章标题,一级节标题,*,一级标题,二级标题,正文内容,*,二级标题,正文条目,正文内容,*,范例：,*,范例效果,应用知识点,知识点,1,单元小结,小结内容,*,思考与练习,一、选择题,1,、,*,AJAX,基本原理,基于,Ajax,和,Web Service,的,Web2.0,开发,第,三,章,本章目标,了解,HTTP,协议,了解,Ajax,了解异步和同步,了解,XmlHttpRequest,对象,掌握简单的,Ajax,编程,AJAX,在,Google Suggest,中的应用（智能提示）,初上手时并没有感觉,GMail,和其他的,WebMail,有什么不同，但只要点击一个链接，差异就出来了：邮件内容或者选项菜单仿佛是一瞬间弹出来的。,IGoogle,中可以拖放的区域,AJAX,在,GoogleMaps,中的应用（图像显示几乎没有延迟）,AJAX,Web2.0,的“特洛伊战士”,AJAX,，中文译作艾亚斯，,荷马史诗,里著名的特洛伊战争中的古希腊战斗英雄，以骁勇善战之名传世。,如今，一种称为,AJAX,的新的网页交互技术仿佛一夜之间在,Web 2.0,的战场上攻城夺地，占尽风头。,AJAX,战斗力何在？让我们来近距离地看看这位今天的,Web2.0,名将。,Ajax,所牵涉到的技术,HTML,负责页面的结构以及一些简单的布局,CSS,负责页面的样式和大部分的布局,XML,统一数据的格式,所需的数据,DOM,提供对文档结构的统一访问,XmlHttpRequest,Ajax,的核心对象，提供对服务器的异步调用,Javascript,以上技术依靠,JavaScript,脚本进行整合,协调,Ajax,以前的,Web,远古,请求,HTML,页面,返回,HTML,代码,近代,请求资源,ASP.NET,引擎,返回请求的资源,同步和异步,输入,URL,请求资源,生成,HTML,返回,填写表单，提交,验证错误，修正,修正完毕,提交,验证错误，修正,修正完毕,提交,输入,URL,请求资源,生成,HTML,返回,填,写,表,单,验证字段,1,错误,1,验证字段,2,错误,2,更正，成功,使用,XmlHttpRequest,AJAX,是,：,JavaScript,、,CSS,、,DOM,、,X,mlHttpRequest,四种技术的集合体，主要应用于异步获取后台数据和局部刷新,。,XmlHttpRequest,JavaScript,CSS,DOM,服务器,客户端部分,通过该对象，对数据进行异步的传送处理,使用,XmlHttpRequest,创建,XmlHttpRequest,IE,实现为,ActiveX,组件,ActiveXObject(“Microsoft.XMLHTTP”);,IE,的,XMLHTTP,的版本,Microsoft.XMLHTTP,MSXML2.XMLHTTP,MSXML2.XMLHTTP2.0,MSXML2.XMLHTTP3.0,MSXML2.XMLHTTP4.0,MSXML2.XMLHTTP5.0,其他浏览器实现为本地的,JavaScript,对象,XMLHttpRequest,演示,:,创建,XmlHttpRequest,使用,XmlHttpRequest,/,创建,XMLHTTP,对象,function,GetXmlHTTP(),XmlHttp,= new,ActiveXObject,(Microsoft.XMLHTTP),return,XmlHttp;,XmlHttp.open(POST,SearchPageName,true),XmlHttp.setRequestHeader(Content-Type,text/xml),XmlHttp.send(XmlSend),var objDoc=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,对象,将响应的内容处理成,Html,innerHTML,属性,:,将文本中的,html,字符串作为,HTML,解析显示,演示,:,将响应处理成,HTML,将响应解析为,XML,当传送一些复杂的数据类型时,(,例如对象,),使用,Xml,是一种比较好的方式,能以,DOM,对响应的,Xml,进行解析,演示,:,解析,XML,发送请求和处理响应,在,ASP.NET,中使用,Ajax,.ashx,介绍,相当于,Java,中的,Servlet,验证用户名是否存在,演示,:,用户名是否存在,发送请求和处理响应,/,用户注册的用户名检测,function Register(id),if(id=),document.getElementById,(lblMessage).innerHTML = ,用户名不能为空！,;,document.getElementById,(lblMessage).style.color = red;,else ,VerifyUsername(id);,发送请求和处理响应,/ 1.,创建,XMLHttpRequest,组件,if(window.ActiveXObject),xmlHttpRequest= new ActiveXObject(Microsoft.XMLHTTP);,else if(window.XMLHttpRequest),xmlHttpRequest= new XMLHttpRequest();,/ 2.,设置回调函数,xmlHttpRequest.onreadystatechange = IsUsernameExist_callback;,/ 3.,初始化,XMLHttpRequest,组件,xmlHttpRequest.open(GET, Handler.ashx?customerid=+id,true);,/ 4.,发送请求,xmlHttpRequest.send();,/,获取返回值,var message = xmlHttpRequest.responseText;,发送请求和处理响应,以,POST,发送请求,根据,HTTP,协议,POST,的请求参数是在协议体中发送的，意味着下面的代码不成立,:, AJAX,是新的网页交互技术,习题,二、创建,XMLHttpRequest,对象的代码：,A. xRequest=new ActiveXObject(Microsoft.XML);,B. xRequest=new ActiveXObject(Microsoft.XMLHTTP);,C. xRequest=new ActiveXObject(Microsoft.XMLRequest);,D. xRequest=new ActiveXObject(Microsoft.HTTPRequest);,习题,三、创建,XMLHttpRequest,对象发送请求的方法名是：,A. Send();,B. SendXml();,C. SendHttp();,D. SendRequest();,习题,四、,XMLHttpRequest,处理响应的方法名是：,A. responseText,和,response;,B. responseText,和,responseXML;,C. response,和,responseXML;,D. response,和,Request;,习题,五、什么时候使用,AJAX,，下列说法错误的是：,A.,基于表单的交互,;,B.,深层树状导航,;,C.,实时用户对用户通讯,;,D. DropDownList,数据源控件绑定,;,
展开阅读全文