ajax基本原理(必读).doc

第16讲一 认识AjaxAjax(Asynchronous JavaScript and XML,即JavaScript和XML)是一个相对较新的名字.1. Ajax的基本概念用户在浏览网页的时候,无论是打开一段新的评论,还是填写一张调查问卷,都需要反复与服务器进行交互,但是传统的Web应用采用同步交互形式,即用户向服务器发送一个请求,然后Web服务器根据用户的请求执行相应的任务,并返回结果.这是一种十分不连贯的运行模式,常常需要长时间按的等待以及整个页面的刷新,即通常所说的”白屏”现象,而且是整个页面的刷新,这就增加了用户等待时间,数据重复传递也浪费了大量的资源和网络带宽,而Ajax采用的是异步处理,可以更新局部的内容.优点:(1) 减轻服务器的负担,加快浏览速度.(2) 带来更好的用户体验,传统是白屏现象很不友好,后者采用的局部刷新,使用户感觉是在使用桌面应用程序一样(3) 基于标准化,并被广泛的支持的技术,不需要下载插件(flash)或小程序.（RIA）(4) 进一步呈现与数据分离,Ajax获取服务器可以完全利用单独的模块进行操作,从而使得技术人员和美工人员能够更好的分工与配合2. Ajax的组成部分Ajax不是单一的技术,而是4种技术的集合,跟灵活地运用Ajax必须深入了解这些不同的技术技术名称说明JavaScriptJavaScript是通用脚本语言,用来嵌入在某种应用中,Ajax应用程序是使用JavaScript编写的CSSAjax用户界面的样式可以要通过CSS独立修改DOM通过JavaScript修改DOM,AJAX用用程序可以在运行时改变用户界面,或局部更新页面的某个节点XMLHttpRequestXMLHttpRequest对象允许WEB程序员从WEB服务器以后台的方式获取数据,数据的格式通常是XML或者是文本XSLT(可扩展语言和转换)一种为客户端提供XML信息转换显示的模板技术经验:使用Ajax制作网页,同样要求主流浏览器之间显示的效果基本一致,通常做法是编写Ajax,JavaScript代码,一边在两个不同的浏览器上进行预览,并及时地调整细节,二 Ajax成功案例下拉菜单是表三 Ajax异步交互1. XMLHttpRequest对象XMLHttpRequest是Ajax技术的核心。在IE5.5中，该对象以ActiveX对象的方式引入，被称为XMLHTTP。后来，其他主流浏览器都提供了XMLHttpRequest类。以ActiveX对象方式出现的XMLHTTP与正统的XMLHttpRequest类创建的方式并不一样，但创建之后所生成的对象的使用方式却是一样的XMLHttpRequest对象的方法方法描述abort()停止当前请求getAllResponseHeaders()把HTTP请求的所有响应首部作为键/值对返回getAllResponseHeaders(head_name)返回指定首部的串值open(method,url，asynch)建立对服务器的调用。Method参数可以是get或者post。url参数可以是相对url或绝对url。asnych参数是一个布尔值，true为异步方式，false为同步方式。send(string)向服务器发送请求setRequestHeader(head_name,value)把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。PostXMLHttpRequest对象的属性属性描述onreadystatechange每个状态改变时都会触发这个事件处理器，通常会调用一个javascrpt函数readyState请示的状态。有5个可取的值：未初始化：正在加载：已加载：交互中：完成responseText服务器的响应，表示为一个字符串responseXML服务器的响应，表示为XML。这个对象可以解析为一个DOM对象status服务器的HTTP状态码。200对应OK404对应Not FoundstatusTextHTTP状态码的相应文本2. 异步对象连接服务器在Web中异步访问是通过XMLHttpRequest对象实现的.这个对象在IE5.5中被作为ActiveX控件引入,随着各个浏览器都纷纷开始支持异步对象,要使用该对象必须创建对象,(1)创建对象 var xmlHttp; function createXMLHttpReques() if(window.ActiveXObject) /判断是否是IE浏览器 xmlHttp=new ActiveXObject(Microsoft.XMLHTTP); else if (window.XMLHttpRequest) xmlHttp=new XMLHttpRequest(); else alert(该浏览器不支持AJAX,请更换浏览器); (2)创建请求function startRequest() createXMLHttpReques(); xmlHttp.open(GET,first.aspx,true); xmlHttp.onreadystatechange=function() if(xmlHttp.readyState=4 & xmlHttp.status=200) alert(服务器返回:+xmlHttp.responseText); xmlHttp.send(null); 案例见课堂案例1.html(3)解决IE浏览器自动缓存异步通信的结果解决方案:使每次异步请求的url地址不相同在真是访问地址的末尾加一个与时间毫秒数相关的参数,就可以做到url地址不同xmlHttp.open(GET,first.aspx?time=+new Date().getTime(),true);3. GET和Post模式在上面的事例中除了请求异步服务以外,并没有向服务器发送而外的数据,通常HTML请求中有GET和POST两种模式,这两种模式都可以作为异步请求发送数据的方式.如果是GET请求,则直接将数据放入到异步请求的URL地址中,而send方法不发送任何的数据而POST是需要在send的时候发送那个数据我们通过一个例子来演示一下两者的用法见案例POST要多出一句xmlHttp.setRequestHeader(Content-Type,application/x-www-form-urlencoded)说明:通常情况下当数据量不多的情况下采用GET方式,而数据量稍大的时候用POST可能会出现的问题:传入的值为中文的时候乱码解决方案:可以对取值内容用escape()编码和unescape()解码也可以使用encodeURL()和decodeURL(),但这里要要进行两次encodeURL()4. 服务器返回XMLif(xmlHttp.readyState=4 & xmlHttp.status=200) var objs=xmlHttp.responseXML.getElementsByTagName(student); DrawTble(objs); 5. ASP.NET如何创建返回一个XML文件Response.Clear(); Response.ContentType = text/xml; Response.Charset = utf-8; XmlStr = XmlStr + ; XmlStr = XmlStr + ; if (HongTaiSoft.Common.PageValidate.IsNumber(tag) & HongTaiSoft.Common.PageValidate.IsNumber(id) switch (tag) case 0: if(id=0) sql = select * from T_Country where Id240 and id887 or id=888; XmlStr = XmlStr + Getcountry(sql); else if (id = 241) sql = select * from T_Country where Id=241; XmlStr = XmlStr + Getcountry(sql); else if (id = 888) sql = select * from T_Country; XmlStr = XmlStr + Getcountry(sql); break; case 1: if (id = 241) sql = select * from T_Province; XmlStr = XmlStr + Getprovince(sql); break; case 2: sql = select * from T_City where Province= + id; XmlStr = XmlStr + Getcity(sql); break; case 3: sql = select * from T_County_seat where City= + id; XmlStr = XmlStr + Getcounty_seat(sql); break; case 4: sql = select * from Cailiao_FirstLb where CateID= + id; XmlStr = XmlStr + GetCailiao_FirstLb(sql); break; case 5: sql = select * from Cailiao_SecondLb where CategoryID= + id; XmlStr = XmlStr + GetCailiao_SecondLb(sql); break; XmlStr = XmlStr + ; Response.Write(XmlStr); Response.End();6. JSON*JSON定义* JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，易于阅读和编写，同时也易于机器解析和生成。它基于ECMA262语言规范（1999-12第三版）中JavaScript编程语言的一个子集。 JSON采用与编程语言无关的文本格式，但是也使用了类C语言（包括C， C+， C#， Java， JavaScript， Perl， Python等）的习惯，这些特性使JSON成为理想的数据交换格式。 JSON的结构基于下面两点 1. 名称/值对的集合 不同语言中，它被理解为对象(object)，记录(record)，结构(struct)，字典(dictionary)，哈希表(hash table)，键列表(keyed list)等 2. 值的有序列表 多数语言中被理解为数组(array) JSON使用： JSON以一种特定的字符串形式来表示 JavaScript 对象。如果将具有这样一种形式的字符串赋给任意一个 JavaScript 变量，那么该变量会变成一个对象引用，而这个对象就是字符串所构建出来的，好像有点拗口，我们还是用实例来说明。 这里假设我们需要创建一个User对象，并具有以下属性 用户ID 用户名 用户Email 您可以使用以下JSON形式来表示User对象：UserID:11, Name:tht, Email:18039010;然后如果把这一字符串赋予一个JavaScript变量，那么就可以直接使用对象的任一属性了。完整代码:var User = UserID:11, Name:tht, Email:18039010;alert(User.Name);实际使用时可能更复杂一点，比如我们为Name定义更详细的结构，使它具有FirstName和LastName：UserID:11, Name:FirstName:tht,LastName:Tang, Email:18039010完整代码:var User = UserID:11, Name:FirstName:tht,LastName:Tang, Email:18039010;alert(User.Name.FirstName);现在我们增加一个新的需求，我们某个页面需要一个用户列表，而不仅仅是一个单一的用户信息，那么这里就需要创建一个用户列表数组。 下面代码演示了使用JSON形式定义这个用户列表： UserID:11, Name:FirstName:tht,LastName:Tang, Email:18039010,UserID:12, Name:FirstName:aa,LastName:bb, Email:,UserID:13, Name:FirstName:cc,LastName:dd, Email:完整代码: var UserList = UserID:11, Name:FirstName:tht,LastName:Tang, Email:18039010,UserID:12, Name:FirstName:aa,LastName:bb, Email:,UserID:13, Name:FirstName:cc,LastName:dd, Email:;alert(UserList0.Name.FirstName);事实上除了使用.引用属性外，我们还可以使用下面语句：alert(UserList0NameFirstName); 或者 alert(UserList0.NameFirstName); 现在读者应该对JSON的使用有