AJAX技术入门.ppt

北京传智播客教育,AJAX技术入门王兴魁(源码网整理：),北京传智播客教育,提纲,走进AJAXAJAX的思维方式AJAX的技术核心AJAX应用实例AJAX的优缺点AJAX开发工具,北京传智播客教育,走进AJAX,JesseJamesGarrett2005年的2月Ajax:ANewApproachtoWebApplicationsXML,AJAX,synchronous,avaScript,nd,ML,北京传智播客教育,走进AJAX,(1)使用XHTML和CSS的基于标准的表示技术(2)使用DOM进行动态显示和交互(3)使用XML和XSLT进行数据交换和处理(4)使用XMLHttpRequest进行异步数据检索(5)使用Javascript将以上技术融合在一起,老技术，新思想,北京传智播客教育,走进AJAX,北京传智播客教育,走进AJAX,GOOGLE,北京传智播客教育,走进AJAX,GOOGLE,北京传智播客教育,走进AJAX,MicrosoftYahoo！AmazoneBaidu163SinaSohu。,北京传智播客教育,走进AJAX,(1)改善表单验证方式，不再需要打开新页面，也不再需要将整个页面数据提交(2)不需刷新页面就可改变页面内容，减少用户等待时间。(3)按需获取数据，每次只从服务器端获取需要的数据。(4)读取外部数据，进行数据处理整合。(5)异步与服务器进行交互，在交互过程中用户无需等待，仍可继续操作,北京传智播客教育,提纲：,走进AJAXAJAX的思维方式AJAX的技术核心AJAX应用实例AJAX的优缺点AJAX开发工具,北京传智播客教育,AJAX思维方式：,我们就通过用户名校验这个简单的例子来看看传统Web应用和AJAX应用开发思维的不同之处。这个最简单的例子需求如下：用户在页面的文本框中输入想注册的用户名，然后点击校验按钮，如果输入的用户名为“wangxingkui”，则提示用户名已经存在，请重新输入，否则提示用户名尚未存在，可以使用此用户名进行注册。,北京传智播客教育,AJAX思维方式：,问题分析：对于校验用户名的需求，我们需要一个html页面和一个servlet程序。Html页面中包含文本框和提交按钮，他们位于一个form表单中，这个表单将请求提交给servlet程序，servlet程序判断当前的用户名是否是“wangxingkui”，并给出相应的提示，同时servlet中还生成一个链接，用于返回html页面。,北京传智播客教育,AJAX思维方式：,北京传智播客教育,AJAX思维方式：,从这个例子我们可以看到，传统Web开发思维模式的一个特点是通过form表单提交请求信息，然后转向一个新的页面处理请求，并显示服务器端返回的信息。你可以尝试运行一下这些代码，你会发现作为用户的你经历了：在浏览器中输入用户名-点击按钮提交用户名给Servlet-浏览器转向Servlet的页面-等待Servlet处理-Servlet返回响应信息-浏览器中看到Servlet页面的响应信息，当然这其中有几个过程可能时间短暂到你没有注意，但这些过程是确实存在。,北京传智播客教育,AJAX思维方式：,北京传智播客教育,AJAX思维方式：,问题分析：对于校验用户名的需求，我们需要一个html页面和一个servlet程序。Html页面中包含文本框和校验按钮，点击提交按钮以后，我需要通过javascript获取文本框中的数据，然后通过XMLHttprequest发送数据给servlet，此外还需要准备用于接收响应的javascript函数，接收到servlet的提示信息后，我需要将这些信息动态的写在页面上。servlet程序判断当前的用户名是否是“wangxingkui”，并给出相应的提示。,北京传智播客教育,AJAX思维方式：,注意，AJAX模式下问题分析的方式已经发生了变化：servlet不需要返回html页面的链接了，因为我们不需要跳转到servlet表示的页面中，我们只需要获得servlet页面产生的结果html页面中我不用表单提交数据了，我的数据通过javascript来获取，然后通过一个叫做XMLHttprequest的对象发送个servlet。而且我没有做页面跳转我需要一个接收servlet响应信息的javascript函数，我没有进入servelt代表的页面查看响应信息，而是把servlet的响应信息接收回来，再显示在我当前的页面上。,北京传智播客教育,AJAX思维方式：,当你运行上面的程序，你会发现从用户的角度来看，与传统Web应用模式的流程相比，AJAX应用模式的流程是不同的。AJAX应用的流程是：在浏览器中输入数据-点击按钮提交请求-用户可以继续做其他事情；Servlet在处理数据，并发回数据-浏览器收到响应-浏览器中的当前页面显示响应结果，这其中仍然有些过程由于时间短暂使你忽略了它的错在，但实际上这些过程都是存在的。两个流程的对比让我们看到的显而易见的差别就是AJAX应用中没有向新页面跳转，用户不需要处于无事可做的等待中。,北京传智播客教育,AJAX思维方式：,北京传智播客教育,AJAX思维方式：,北京传智播客教育,AJAX思维方式：,北京传智播客教育,AJAX参考书籍,JavaScriptProfessionalProjects,DHTML手册.chm,北京传智播客教育,AJAX参考书籍,DOM文档对象中文手册.chm,北京传智播客教育,AJAX参考书籍,CSS中文手册.chm,北京传智播客教育,AJAX参考书籍,CSS中文手册.chm,北京传智播客教育,AJAX参考书籍,ProfessionalAjax（AJAX高级程序设计）：,本书目前已有翻译版在国内销售。本书除了介绍AJAX的基本知识以外，在跨浏览器实现XML处理和Webservice处理上做了详细介绍，也有一个如何建立自己的Gmail的示例，另外还介绍了三个分别为PHP，JAVA和.NET平台服务的AJAX服务器端框架。,北京传智播客教育,AJAX参考书籍,FoundationsOfAJAX（AJAX基础教程）：,号称国内第一本AJAX的图书，在国外也很受欢迎的一本书。个人认为书中比较有用的是介绍了很多AJAX开发的辅助工具，同时有过个实用的AJAX示例。,北京传智播客教育,AJAX参考书籍,PragmaticAJAX（AJAX修炼之道-Web2.0入门）：,国内已有此书的翻译版。本书比较短小精悍，其中比较特色的是介绍了如何建立一个自己的GoogleMaps，并在AJAXUI方面做了较多描述，另外简要介绍了一些浏览器端AJAX框架，以及AJAX和PHP联合开发的问题。,北京传智播客教育,AJAX参考书籍,AJAXForDUMMIES（AJAX傻瓜教程）：,本书编排和版面设计上比较有特色。内容上即介绍了AJAX的基本知识，也介绍了AJAX的一些框架。比较有特色的部分是给出了AJAX开发的十个需要了解的问题以及一些有用的AJAX资源。,北京传智播客教育,AJAX参考书籍,AJAXInAction（AJAX实战）：,国内已有此书的翻译版本。一本将近700页的AJAX图书，和其他AJAX图书相比分量很重，介绍内容非常广泛。可以作为一本AJAX的参考书。书中最后介绍了目前几乎所有的AJAX浏览器及服务器端框架，对于大家选择AJAX框架有一定的帮助。,北京传智播客教育,AJAX参考书籍,AJAXHacks：,国外著名IT出版社OReilly的AJAX图书，国内有影印版。该书以一个个Hack条目来介绍AJAX，其中有一半的篇幅介绍了我们前面提到的几个流行的AJAX框架：DWR，RubyOnRails，Rico，script.aculo.us。同时还有一些实用的示例供大家参考。,北京传智播客教育,AJAX参考书籍,另外有两个国内高手写的AJAX入门电子书可供参考：AJAX开发简略AJAX新手快车道。AJAX新手快车道的作者文笔风格比较有趣，根据他blog上所说也会出一本AJAX方面的书，但目前还没有看到。,北京传智播客教育,AJAX参考书籍,AJAX开发简略的作者柯自聪今年出版了一本AJAX方面的书籍AJAX开发精要-概念、案例与框架，可以在书店买到。,北京传智播客教育,AJAX参考书籍,这两本书也是国外的作品。AJAXDesignPatterns这本书网上评价也很好，属于中高级的AJAX书籍。HeadRushAJAX属于HeadRush系列书中的一套，根据以前看过的HeadRushJava来看，HeadRush系列书编排非常有特色，里面有大量的插图和手写文字，内容上比较浅显易懂，作为趣味入门书是个不错的选择。,北京传智播客教育,提纲：,走进AJAXAJAX的思维方式AJAX的技术核心AJAX应用实例AJAX的优缺点AJAX开发工具,北京传智播客教育,AJAX技术核心,XMLHttpRequest对象DOM与HTMLDOM与XML面向对象的Javascript,北京传智播客教育,AJAX技术核心,AsynchronousXMLHttpRequest最早是在IE5.0中以ActiveX组件的形式出现的后来Mozilla，Safari，Opera等浏览器厂商都支持了XMLHttpRequest,由于XMLHttpRequest并不是W3C的标准，因此在各个浏览器的实现上也有所不同。IE“独树一帜”，仍然是以ActiveX组件的方式来创建XMLHttpRequest对象其他浏览器则可以直接创建javascript的XMLHttpRequest对象。,北京传智播客教育,AJAX技术核心,首先我们发现和传统Web开发模式不同，页面中没有form，submit换成了一个button，在button的定义中，我们使用了一个onclick属性。onclick属性的作用是在点击按钮时，调用该属性所指定的javascript函数。我们可以在onclick属性指定的javascript函数中使用XMLHttpReuqest对象来与服务器端程序（例如一个Servlet）进行数据传输。,北京传智播客教育,AJAX技术核心,我们还发现和传统模式相比，文本框我们定义了id属性，而不是name属性。这是因为在AJAX模式中，我们通常在javascript代码中通过DOM获得html页面中某个节点的值，因此我们一般都定义id属性，这部分的详细内容会在后面介绍。,北京传智播客教育,AJAX技术核心,另外我们建立了一个div标签，div标签应该说是AJAX模式下很重要的一个html标签。前面我们提到过的基于标准的表示技术，比较常用的一种方式就是用DIV+CSS替代talbe的方式来划分网页结构，div中放内容，css控制这些内容的展现形式。除此之外，div的另一个常用之处就是用于放置动态加入网页中的内容，先建立一个没有内容那个div，再在Javascript代码中通过DOM动态的向其中添加内容，以保证在页面不刷新的情况下动态修改页面内容。这部分的详细内容也会在后面介绍。,北京传智播客教育,AJAX技术核心,document.getElementById的作用是根据id名获得对应的节点（某一个html标签的内容），我们这里分别用这个语句来获得div和文本框的节点；.value的作用是获得文本框的value属性值，也就是文本框中的内容。,document.getElementById(result)document.getElementById(name).value,北京传智播客教育,AJAX技术核心,resultNode.innerHTML这样的用法是为了设置某个节点中的html的内容，这里resultNode代表的是div那个节点，这句话的效果是使div的内容变成了不能建立XMLHttpRequest对象，这样我们就会在页面中看到这行提示信息。,resultNode.innerHTML=不能建立XMLHttpRequest对象;,北京传智播客教育,AJAX技术核心,北京传智播客教育,AJAX技术核心,“window.XMLHttpRequest”为true时表示当前浏览器是IE7或其他浏览器，我们就可以使用newXMLHttpRequest()的方式来创建一个XMLHttpRequest对象if(xmlhttp.overrideMimetype)这个逻辑的作用是解决部分版本的Mozilla在服务器响应头信息没有XML时不能正常工作的问题。,北京传智播客教育,AJAX技术核心,“window.ActiveXObject”为true时表示当前的浏览器为IE6.0及以下的版本，要使用newActiveXObject(控件名)的方式来创建一个XMLHttpRequest对象这里需要注意的是不同版本IE中用于建立XMLHttpRequest对象的控件版本很多如果使用MSXML数组中的某一个控件名称成功建立了XMLHttpRequest对象，则跳出循环，如果建立失败会有异常抛出，被catch以后继续进行循环，尝试下一个控件名称这里的控件名称是按照从新到老的顺序排列的，这样可以保证使用较新版本IE的用户可以较早成功建立XMLHttpRequest对象。如果没有建立成功XMLHttpRequest对象，则不能继续后面与服务器端交互的工作，函数只能返回。,北京传智播客教育,AJAX技术核心,然后我们做的工作是设置一个回调函数回想前面我们说过的AJAX的模式的特点，由于我们采用异步交互的模型，不像同步模式一样可以直接接收响应内容，因此我们需要告诉AJAX引擎当响应数据回来时我要做一些工作，这些工作就是回调函数中的内容。这里需要注意的是设置回调函数时应该只给出回调函数的名称，后面不要带括号，因为带上括号就变成让XMLHttpRequest对象的onreadystatechange属性值等于回调函数的返回值了。,北京传智播客教育,AJAX技术核心,接下来要做的工作是建立对服务器的调用。这里第一个参数表示http连接的方法,一般我们使用“GET”或“POST”方式，两种方式的区别会在后面阐述。第二个参数是服务器端地址，由于使用GET方式，因此要传送给服务器端的数据也在URL中，这里我们使用了两个encodeURI，目的是为了解决URL中的中文信息在服务器端解码的问题，配合服务器端的URLDecoder.decode(old,“UTF-8”)语句可以保证中文信息在服务器端也可以正常被解出。第三个参数表示是否采用异步方式进行传输，其中true表示采用异步方式，我们在AJAX中看重的就是异步方式，因此这个参数我们通常使用true。,北京传智播客教育,AJAX技术核心,再接着就是向服务器端发送数据，这里由于已经在URL中包含了发送给服务器的数据，因此在send时就不需要参数了，后面会讲到对于POST模式，这里的使用方式会有不同。,北京传智播客教育,AJAX技术核心,最后请注意，按照我们写代码的顺序来说，“xmlhttp.onreadystatechange=callback”这句中指定的回调函数callback实际上还没有存在，因此最后我们需要定义一下我们的回调函数做的工作,北京传智播客教育,AJAX技术核心,这里readyState=4时表示服务器端的响应数据已经被全部接收，readyState还有其他状态，后面会进行详细介绍。Status=200表示http连接状态正常，如果不是200，则表示http连接有误，此时回来的数据也不是我们需要的。当响应数据全部接收并且http连接状态正确时，我们就可以接收响应的数据了，这里使用了xmlhttp.responseText用于以文本形式接收响应的数据，当然也可以用XML方式接收，后面会做详细介绍。,北京传智播客教育,AJAX技术核心,北京传智播客教育,AJAX技术核心,北京传智播客教育,AJAX技术核心,北京传智播客教育,AJAX技术核心,北京传智播客教育,AJAX技术核心,GET和POST的区别：“GET”和“POST”的一个重要区别在于，“GET”方式传递给服务器的信息一般以后缀参数方式存在于URL地址中，而URL的长度通常都有限制，这也就限制了“GET”方式传递给服务器的内容大小而“POST”方式传递给服务器的信息并不位于URL地址中，所以没有大小限制。通常我们在服务器端的Servlet中，doGet和doPost做的是一样的工作，因此由于POST传递信息没有大小限制，我们实际应用中比较多的会使用POST。,北京传智播客教育,AJAX技术核心,北京传智播客教育,AJAX技术核心,每次readyState变化时onreadystatechange属性对应的函数都会被调用。之前我们曾经说过onreadystatechange属性设置回调函数是为了在接收到响应数据后对响应数据进行处理，之所以这样说是因为我们通常只关心收到响应数据以后时的工作，也就是readyState=4时的状态，因此我们的回调函数中也用readyState=4来做判断。(源码网整理,),北京传智播客教育,AJAX技术核心,status和statusText属性：它的值是http的状态码，我们通常只在status=200时才进行响应数据处理，但也可根据具体情况在status为其他值时做一些处理。statusText属性一般用于status不为200时显示详细的http错误状态信息,北京传智播客教育,AJAX技术核心,responseText与responseXML属性：无论服务器端返回的是XML还是普通的文本内容，html内容，都可以使用responseText属性来获得服务器端的返回值。当服务器端返回的不是XML内容是，不同的浏览器在获取responseXML属性值时略有不同，IE仍然会获取到一个DOM对象，只不过内容是空的，而FireFox获取到的则是一个null,北京传智播客教育,AJAX技术核心,如果服务器端要返回普通文本内容，html内容，一般在服务器端会设置响应头信息中的Content-Type为text/html，同时为了保证中文信息不会出现乱码，还会根据需要设置Content-Type中charset。如果服务器端要返回xml，首先返回的数据一定要是一个DOM兼容的xml字串，其次需要在服务器端设置响应头信息中的“Content-Type”为text/xml。这样在浏览器端的Javascript代码中我们可以通过responseXML属性获得一个DOM兼容的XML对象，通过DOM的方式操作XML，这部分内容会在后面介绍。,北京传智播客教育,AJAX技术核心,还有一点需要说明的是虽然AJAX倡导使用传输XML数据，但是正如JesseJamesGarrett老兄在他提出AJAX概念的那篇文章中的FAQ部分说的一样并不是AJAX模式的程序一定要用XML作为传输数据XML数据的优势是不同系统之间可以交互一种统一结构的数据，这样你的服务器端程序即可以和AJAX的客户端交互，也可以方便的和其他类型客户端交互。很多时候，在AJAX模式的程序中使用纯文本内容或是自定义的数据结构进行数据传输会更方便，实际上Google几个有名的AJAX模式产品使用的都不是XML的数据。,北京传智播客教育,AJAX技术核心,总结AJAX应用的五个步骤：1.建立XMLHttpRequest对象2.设置回调函数3.使用open方法与服务器建立链接4.向服务器端发送数据5.在回调函数针对不同响应状态进行处理,北京传智播客教育,AJAX技术核心,需要注意的内容：1.不同浏览器下XMLHttpRequest对象的不同的建立方式2.设置回调函数时不要加括号3.open方法三个参数含义，此外还需要注意GET方式和POST方式服务器端地址的不同写法4.GET方式和POST方式send的参数的不同之处，以及POST方式下send之前需要设置请求头信息的工作5.如何判断正确的响应数据已经返回，此外还要注意如何获取响应数据内容。,北京传智播客教育,AJAX技术核心,XMLHttpRequest的一个特殊安全问题：IE：访问跨域页面时会给出提示，用户确认后会访问MozillaFireFox及其他：不允许访问跨域页面,北京传智播客教育,AJAX技术核心,北京传智播客教育,AJAX技术核心,如何解决跨域问题？,北京传智播客教育,AJAX技术核心,在浏览器端的代码中，我们需要在调用open方法之前判断一下要连接的地址是不是以http开头的，如果是则认为要访问的是跨域的资源，首先将当前url中的”?”变成”,北京传智播客教育,AJAX技术核心,本节最后我们再花一点时间讨论一下Javascript中的“继承”。前面我们说了，prototype方式定义的常量和方法保存在原型对象中，这个原型对象所属于的类创建出来的对象都“继承”了原型对象中定义的内容。回想一下我们熟悉的Java，Java中我们也有继承，一个子类继承一个父类，子类的对象可以使用父类所有的共有和保护的成员变量和方法。对比一下，虽然两种语言中我们都以“继承”这个字眼来描述这个父子关系，但是我们需要注意，两种语言的“继承”差别还是很大的。,北京传智播客教育,AJAX技术核心,Java中父类可以有子类，子类可以再有自己的子类，继承关系可以很深。而在Javascript中，所谓的“继承”仅仅是一个类（实际上是函数）的所有对象可以继承原型对象的属性内容，不存在多层次继承的情况。另一方面，Java中子类继承了父类的成员变量，那么每一个子类对象在是用这个成员变量时都是独立互不影响的，而在Javascript中，由于这个继承是对象之间的继承，且一个类的多个对象同时继承了这个类的一个原型对象，因此，当原型对象中的属性发生变化时，所有的普通对象在获取这个属性时也都会发生变化。最后，Java中从父类继承的成员变量是可读可写的，而Javascript中，则是只读的，当你象写这个属性时，实际上并没有真正修改原型对象中的那个属性值，而是给当前对象新建了一个属性，如我们前面的例子所示。,北京传智播客教育,AJAX技术核心,到目前为止我们在类中定义的属性和方法都是公有的，也就是说对象都可以直接访问到它们。我们知道在面向对象中我们经常需要封装一些数据，在Java中我们使用private关键字把它们变成私有的内容。在Javacript中我们同样会有这样的需求，那么如何在Javascript的类中定义私有的属性和方法呢？,北京传智播客教育,AJAX技术核心,Javascript中并没有Java那样的关键字来控制属性方法的访问权限，因此我们只有采用曲线救国的方式来解决这个问题。我们知道所谓私有的内容就是在类之外是不可见的。Javascript中我们的类就是一个方法，那么什么内容在方法之外不可见呢？没错，就是方法中的局部变量。那么如果我们在方法中定义一个局部变量，那它就是我们Javascript类中的私有成员变量了。,北京传智播客教育,AJAX技术核心,问题还没有结束，我们需要有公有的方法让用户可以访问到私有的变量，好，按照我们上一节的思路，成员方法用prototype方式定义，那我们就这么定义两个方法来设置私有变量吧。我们还是在Book这个类的基础上修改，代码如下：,北京传智播客教育,AJAX技术核心,试着运行一下这段代码，你会发现没有达到你的预期，输出内容为undefine。我们那里错了呢？对了，privateValue不是对象的属性，他只是私有的局部变量，用this是找不到的，那我们修改一下去掉this如何：,北京传智播客教育,AJAX技术核心,再次运行，我们发现还是undefine。，错在那里了呢？我们对局部变量的理解还是有点偏差，既然privateValue是局部变量，那么在它所在的方法之外，它都不可见，当然原型对象中的方法就无法访问到这个变量了。看来想要访问这个私有变量，我们只能放弃通过prototype来定义我们的方法了，回到效率不好的“构造函数”方式来定义我们的方法。代码如下：,北京传智播客教育,AJAX技术核心,北京传智播客教育,AJAX技术核心,现在我们再来运行这段代码，我们发现终于出现我们想要的结果999了。同样的，如果你想定义私有方法，也可以采用类似的方式，代码如下：,北京传智播客教育,AJAX技术核心,北京传智播客教育,AJAX技术核心,上面这段代码，我们定义了外部可见的公有方法getPrivateValue以及私有内部可见的setPrivateValue方法，这样对于私有属性privateVale，别人在使用的时候就只能获取它的值而不能给它赋值了。我们来总结一下，当你需要定义Javascript中的私有变量和方法的时候，可以在“构造函数”中通过局部变量的方式来定义，注意提供给别人操作这些私有变量和方法的方法只能在“构造函数”中定义成公有，而不能在原型对象中定义，因为只有构造函数中才可以看到这些私有变量。,北京传智播客教育,AJAX技术核心,我们在回到Java，想想Java的类中还有什么特性。对了。静态属性和静态方法。Java中的静态属性和静态方法都有一个static的关键字。对于静态属性和静态方法，我们说它是属于类，而不是属于类的对象的。静态的内容我们在使用的时候不需要建立一个对象，直接通过类名点静态属性或方法名即可。,北京传智播客教育,AJAX技术核心,那么，Javascript中我们是否也可以有静态属性和方法呢？很明显，从Javascript语言级的角度来说，它并没有Java那样的static关键字，也就不可能有语言级的静态属性和方法了，但是我们也可以让我们在Javascript中的类有静态的属性和方法。Javascript中的类是一个函数，对于我们前面看到了每个函数都有一个prototype的属性表示它的原型对象。这说明函数是可以有属性的，既然可以有属性就可以动态的增加属性。所以当我们需要定义Javascript中的类的静态属性和方法时，就可以给表示类的变量增加属性内容。仍然以Book类为例，示例代码如下：,北京传智播客教育,AJAX技术核心,如上所示，我们定义的“静态”属性和方法与Java中的使用方式一样，当然定义方式略有不同，Java中的都定义在类里面了，而javascript中我们一般定义在类构造函数的外面。这里仍然有一个建议，就是类的“静态”属性名使用大写字母，这和前面说道的prprotype定义的常量一样，为的是让别人一目了然。这种类“静态”属性和prorotype定义的常量还是有一些差别的，一个类的所有对象看到的prototype定义的常量值是一样的，读变量的时候可以通过对象名点上变量名，但是不能写，而且可能存在对象中定义的属性覆盖了prototype中定义的这个常量。而类的“静态”属性在整个程序中看到的结果都是一样的，读写变量的时候都是类名点上变量名。,北京传智播客教育,AJAX技术核心,在Javascript中应该在何时定义类的“静态”属性和方法。总的来说和Java中是一样的。当类的某个值与对象无关期望所有位置看到的结果是一样的时候，就可以定义为类静态属性。如果类的一个方法做的是和具体对象无关的操作，而是做一些工作操作的时候，就可以将这个方法定义为静态的类方法。,北京传智播客教育,AJAX技术核心,我们已经学习了如何在Javascript中面向对象的编写程序，接下来我们想做的就是把前面讲过的XMLHttpRequest的使用面向对象化，自己来做一个XMLHttpRequest对象的封装。我们为什么需要做封装呢？大家是否还记得本章第一节中我们学习使用XMLHttpRequest的那五个步骤，当我们每次使用XMLHttpRequest对象时，都要经历这五个步骤的洗礼，是不是很麻烦，很烦琐？,北京传智播客教育,AJAX技术核心,还有，这五个步骤中还有很多问题需要注意，浏览器建立XMLHttpRequest对象的差异，GET方式和POST方式的差异，获取服务器返回值所需要做的判断工作，浏览器的缓存问题，跨域调用问题等等。很多问题都需要注意，如果那个问题没有处理好就会使我们的AJAX之旅变得不再畅通。通常情况下我们做AJAX的应用，不想关心XMLHttpReuqest对象使用过程中的那一串事情，我们只希望把数据给XMLHttpRequest对象，让它帮我们异步的发出去，当数据回来的时候可以让我期望处理响应数据的方法工作就行了。问题摆在眼前了，怎么解决呢？,北京传智播客教育,AJAX技术核心,北京传智播客教育,AJAX技术核心,这段封装代码把之前我们提到的使用XMLHttpRequest需要注意的问题，以及像跨域，缓存这样的问题统统都封装了起来。这段代码中唯一需要说明的，也是和之前的未封装的代码有差别的就是设置回调函数的时候我们使用了匿名方法来直接定义回调函数，然后我们会在回调函数中根据响应情况调用用户提供的用于处理成功情况和用于处理失败情况的方法。,北京传智播客教育,AJAX技术核心,这里有一个技巧，你可能注意到我们在send方法中定义了一个局部变量tempxmlhttp，让它等于了当前对象的xmlhttp属性，为什么要这么做呢？还是为了满足我们的那个匿名回调方法。回想Java的AWT/SWING的图形界面程序中，我们经常会在一个方法内的通过在建立匿名对象的方式来设置事件，当我们建立匿名对象的时候，需要写一些匿名对象中必须有的方法，这个时候在匿名对象的方法中，我们可以访问到匿名对象所在方法的局部常量（final修饰的），但是我们无法访问当前对象的属性或方法，因为但我们使用this关键字的时候，它表示的不是我们期望的对象，而是被建立的匿名对象。在Javascript中，匿名方法存在同样的问题，我们可以访问匿名方法所在的方法中的局部变量，但是不能访问当前对象的属性，因此我们定义了一个局部变量，以便于匿名回调方法可以取到xmlhttp的内容。,北京传智播客教育,AJAX技术核心,当我们使用这个封装的XMLHttpRequest时，你会发现原来我们写的那个校验用户名的例子，变得好写了很多，如下所示：,北京传智播客教育,AJAX技术核心,北京传智播客教育,AJAX的优缺点,北京传智播客教育,AJAX的优缺点,北京传智播客教育,AJAX的优缺点,北京传智播客教育,AJAX的优缺点,北京传智播客教育,综合实例-学生信息管理系统：,submitButton.setAttribute(disabled,true);submitNode.removeAttribute(disabled);submitButton.onclick=function()submitStudent(uniqueID);oralData.unshift(),北京传智播客教育,综合实例-学生信息管理系统：,id:id,name:oralName,number:oralNumber,classname:oralClassNameoralData.splice(index,1);,北京传智播客教育,综合实例-动态股市信息：,setTimeout(code,delay)clearTimeout();setInterval(code,interval)clearInterval(),北京传智播客教育,综合实例-提示框：,onmouseover=show(this,event)onmouseout=clearinfo()“if(!env)myEvent=window.event;elsemyEvent=env;,北京传智播客教育,综合实例-提示框：,mouseX=myEvent.clientX;mouseY=myEvent.clientY;divNode.style.leftdivNode.style.top“px”,北京传智播客教育,综合实例-简易的googlesuggest：,onkeyup=completeText(event)“keyCode=myEvent.keyCode;keyCode表48-90838，4013,北京传智播客教育,综合实例-简易的googlesuggest：,varleft=textNode.offsetLeft;vartmp=textNode.offsetParent;while(tmp)left+=tmp.offsetLeft;tmp=tmp.offsetParent;tipNode.style.left=left+px;,北京传智播客教育,综合实例-简易的googlesuggest：,使用对象直接量传递数据vartipArray=eval(responseText);,北京传智播客教育,综合实例-简易的googlesuggest：,tdNode.onmousemove=function()this.style.backgroundColor=red;tdNode.onmouseout=function()this.style.backgroun