AJAX 技术入门王兴魁

AJAX技术入门王兴魁 北京传智播客教育 www.itcast.cn

走进AJAX AJAX的思维方式 AJAX的技术核心 AJAX应用实例 AJAX的优缺点 AJAX开发工具提纲北京传智播客教育 www.itcast.cn

走进AJAX • Jesse James Garrett 2005年的2月《Ajax: A New Approach to Web Applications XML》 A J A X synchronous avaScript nd ML 北京传智播客教育 www.itcast.cn

走进AJAX (1)使用XHTML和CSS的基于标准的表示技术 (2)使用DOM进行动态显示和交互 (3)使用XML和XSLT进行数据交换和处理 (4)使用XMLHttpRequest进行异步数据检索 (5)使用Javascript将以上技术融合在一起老技术，新思想北京传智播客教育 www.itcast.cn

走进AJAX 北京传智播客教育 www.itcast.cn

走进AJAX • GOOGLE 北京传智播客教育 www.itcast.cn

走进AJAX • Microsoft • Yahoo！ • Amazone • Baidu • 163 • Sina • Sohu • 。。。。。。北京传智播客教育 www.itcast.cn

走进AJAX (1)改善表单验证方式，不再需要打开新页面，也不再需要将整个页面数据提交 (2)不需刷新页面就可改变页面内容，减少用户等待时间。 (3)按需获取数据，每次只从服务器端获取需要的数据。 (4)读取外部数据，进行数据处理整合。 (5)异步与服务器进行交互，在交互过程中用户无需等待，仍可继续操作北京传智播客教育 www.itcast.cn

提纲： • 走进AJAX • AJAX的思维方式 • AJAX的技术核心 • AJAX应用实例 • AJAX的优缺点 • AJAX开发工具北京传智播客教育 www.itcast.cn

AJAX思维方式： • 我们就通过用户名校验这个简单的例子来看看传统Web应用和AJAX应用开发思维的不同之处。 • 这个最简单的例子需求如下：用户在页面的文本框中输入想注册的用户名，然后点击校验按钮，如果输入的用户名为“wangxingkui”，则提示用户名已经存在，请重新输入，否则提示用户名尚未存在，可以使用此用户名进行注册。北京传智播客教育 www.itcast.cn

AJAX思维方式： • 问题分析：对于校验用户名的需求，我们需要一个html页面和一个servlet程序。Html页面中包含文本框和提交按钮，他们位于一个form表单中，这个表单将请求提交给servlet程序，servlet程序判断当前的用户名是否是“wangxingkui”，并给出相应的提示，同时servlet中还生成一个链接，用于返回html页面。北京传智播客教育 www.itcast.cn

AJAX思维方式： 北京传智播客教育 www.itcast.cn

AJAX思维方式： • 从这个例子我们可以看到，传统Web开发思维模式的一个特点是通过form表单提交请求信息，然后转向一个新的页面处理请求，并显示服务器端返回的信息。 • 你可以尝试运行一下这些代码，你会发现作为用户的你经历了：在浏览器中输入用户名->点击按钮提交用户名给Servlet->浏览器转向Servlet的页面->等待Servlet处理->Servlet返回响应信息->浏览器中看到Servlet页面的响应信息，当然这其中有几个过程可能时间短暂到你没有注意，但这些过程是确实存在。北京传智播客教育 www.itcast.cn

AJAX思维方式： • 问题分析： • 对于校验用户名的需求，我们需要一个html页面和一个servlet程序。 • Html页面中包含文本框和校验按钮，点击提交按钮以后，我需要通过javascript获取文本框中的数据，然后通过XMLHttprequest发送数据给servlet，此外还需要准备用于接收响应的javascript函数，接收到servlet的提示信息后，我需要将这些信息动态的写在页面上。servlet程序判断当前的用户名是否是“wangxingkui”，并给出相应的提示。北京传智播客教育 www.itcast.cn

AJAX思维方式： • 注意，AJAX模式下问题分析的方式已经发生了变化： • servlet不需要返回html页面的链接了，因为我们不需要跳转到servlet表示的页面中，我们只需要获得servlet页面产生的结果 • html页面中我不用表单提交数据了，我的数据通过javascript来获取，然后通过一个叫做XMLHttprequest的对象发送个servlet。而且我没有做页面跳转 • 我需要一个接收servlet响应信息的javascript函数，我没有进入servelt代表的页面查看响应信息，而是把servlet的响应信息接收回来，再显示在我当前的页面上。北京传智播客教育 www.itcast.cn

AJAX思维方式： • 当你运行上面的程序，你会发现从用户的角度来看，与传统Web应用模式的流程相比，AJAX应用模式的流程是不同的。 • AJAX应用的流程是：在浏览器中输入数据->点击按钮提交请求->用户可以继续做其他事情；Servlet在处理数据，并发回数据->浏览器收到响应->浏览器中的当前页面显示响应结果，这其中仍然有些过程由于时间短暂使你忽略了它的错在，但实际上这些过程都是存在的。 • 两个流程的对比让我们看到的显而易见的差别就是AJAX应用中没有向新页面跳转，用户不需要处于无事可做的等待中。北京传智播客教育 www.itcast.cn

AJAX参考书籍 JavaScript Professional Projects DHTML手册.chm 北京传智播客教育 www.itcast.cn

AJAX参考书籍 DOM文档对象中文手册.chm 北京传智播客教育 www.itcast.cn

AJAX参考书籍 CSS中文手册.chm 北京传智播客教育 www.itcast.cn

AJAX参考书籍 • Professional Ajax（AJAX高级程序设计）：本书目前已有翻译版在国内销售。本书除了介绍AJAX的基本知识以外，在跨浏览器实现XML处理和Webservice处理上做了详细介绍，也有一个如何建立自己的Gmail的示例，另外还介绍了三个分别为PHP，JAVA和.NET平台服务的AJAX服务器端框架。北京传智播客教育 www.itcast.cn

AJAX参考书籍 • Foundations Of AJAX（AJAX基础教程）：号称国内第一本AJAX的图书，在国外也很受欢迎的一本书。个人认为书中比较有用的是介绍了很多AJAX开发的辅助工具，同时有过个实用的AJAX示例。北京传智播客教育 www.itcast.cn

AJAX参考书籍 • Pragmatic AJAX（AJAX修炼之道-Web2.0入门）：国内已有此书的翻译版。本书比较短小精悍，其中比较特色的是介绍了如何建立一个自己的Google Maps，并在AJAX UI方面做了较多描述，另外简要介绍了一些浏览器端AJAX框架，以及AJAX和PHP联合开发的问题。北京传智播客教育 www.itcast.cn

AJAX参考书籍 • AJAX For DUMMIES（AJAX傻瓜教程）：本书编排和版面设计上比较有特色。内容上即介绍了AJAX的基本知识，也介绍了AJAX的一些框架。比较有特色的部分是给出了AJAX开发的十个需要了解的问题以及一些有用的AJAX资源。北京传智播客教育 www.itcast.cn

AJAX参考书籍 • AJAX In Action（AJAX实战）：国内已有此书的翻译版本。一本将近700页的AJAX图书，和其他AJAX图书相比分量很重，介绍内容非常广泛。可以作为一本AJAX的参考书。书中最后介绍了目前几乎所有的AJAX浏览器及服务器端框架，对于大家选择AJAX框架有一定的帮助。北京传智播客教育 www.itcast.cn

AJAX参考书籍 • AJAX Hacks：国外著名IT出版社O'Reilly的AJAX图书，国内有影印版。该书以一个个Hack条目来介绍AJAX，其中有一半的篇幅介绍了我们前面提到的几个流行的AJAX框架：DWR，Ruby On Rails，Rico，script.aculo.us。同时还有一些实用的示例供大家参考。北京传智播客教育 www.itcast.cn

AJAX参考书籍 • 另外有两个国内高手写的AJAX入门电子书可供参考：《AJAX开发简略》《AJAX——新手快车道》。 • 《AJAX——新手快车道》的作者文笔风格比较有趣，根据他blog上所说也会出一本AJAX方面的书，但目前还没有看到。北京传智播客教育 www.itcast.cn

AJAX参考书籍 • 《AJAX开发简略》的作者柯自聪今年出版了一本AJAX方面的书籍《AJAX开发精要-概念、案例与框架》，可以在书店买到。北京传智播客教育 www.itcast.cn

AJAX参考书籍 这两本书也是国外的作品。《AJAX Design Patterns》这本书网上评价也很好，属于中高级的AJAX书籍。《Head Rush AJAX》属于Head Rush系列书中的一套，根据以前看过的《Head Rush Java》来看，Head Rush系列书编排非常有特色，里面有大量的插图和手写文字，内容上比较浅显易懂，作为趣味入门书是个不错的选择。北京传智播客教育 www.itcast.cn

提纲： • 走进AJAX • AJAX的思维方式 • AJAX的技术核心 • AJAX应用实例 • AJAX的优缺点 • AJAX开发工具北京传智播客教育 www.itcast.cn

AJAX技术核心 • XMLHttpRequest对象 • DOM与HTML • DOM与XML • 面向对象的Javascript 北京传智播客教育 www.itcast.cn

AJAX技术核心 • Asynchronous XMLHttpRequest 最早是在IE5.0中以ActiveX组件的形式出现的后来Mozilla，Safari，Opera等浏览器厂商都支持了XMLHttpRequest • 由于XMLHttpRequest并不是W3C的标准，因此在各个浏览器的实现上也有所不同。 • IE“独树一帜”，仍然是以ActiveX组件的方式来创建XMLHttpRequest对象 • 其他浏览器则可以直接创建javascript的XMLHttpRequest对象。北京传智播客教育 www.itcast.cn

AJAX技术核心 • 首先我们发现和传统Web开发模式不同，页面中没有form，submit换成了一个button，在button的定义中，我们使用了一个onclick属性。 • onclick属性的作用是在点击按钮时，调用该属性所指定的javascript函数。我们可以在onclick属性指定的javascript函数中使用XMLHttpReuqest对象来与服务器端程序（例如一个Servlet）进行数据传输。北京传智播客教育 www.itcast.cn

AJAX技术核心 • 我们还发现和传统模式相比，文本框我们定义了id属性，而不是name属性。 • 这是因为在AJAX模式中，我们通常在javascript代码中通过DOM获得html页面中某个节点的值，因此我们一般都定义id属性，这部分的详细内容会在后面介绍。北京传智播客教育 www.itcast.cn

AJAX技术核心 • 另外我们建立了一个div标签，div标签应该说是AJAX模式下很重要的一个html标签。 • 前面我们提到过的基于标准的表示技术，比较常用的一种方式就是用DIV+CSS替代talbe的方式来划分网页结构，div中放内容，css控制这些内容的展现形式。 • 除此之外，div的另一个常用之处就是用于放置动态加入网页中的内容，先建立一个没有内容那个div，再在Javascript代码中通过DOM动态的向其中添加内容，以保证在页面不刷新的情况下动态修改页面内容。这部分的详细内容也会在后面介绍。北京传智播客教育 www.itcast.cn

AJAX技术核心 document.getElementById("result") document.getElementById("name").value • document.getElementById的作用是根据id名获得对应的节点（某一个html标签的内容），我们这里分别用这个语句来获得div和文本框的节点；.value的作用是获得文本框的value属性值，也就是文本框中的内容。北京传智播客教育 www.itcast.cn

AJAX技术核心 resultNode.innerHTML = "不能建立XMLHttpRequest对象"; • resultNode.innerHTML这样的用法是为了设置某个节点中的html的内容，这里resultNode代表的是div那个节点，这句话的效果是使div的内容变成了<div id="result">不能建立XMLHttpRequest对象</div>，这样我们就会在页面中看到这行提示信息。北京传智播客教育 www.itcast.cn

AJAX技术核心 北京传智播客教育 www.itcast.cn

AJAX技术核心 • “window.XMLHttpRequest”为true时表示当前浏览器是IE7或其他浏览器，我们就可以使用new XMLHttpRequest()的方式来创建一个XMLHttpRequest对象 • if(xmlhttp.overrideMimetype)这个逻辑的作用是解决部分版本的Mozilla在服务器响应头信息没有XML时不能正常工作的问题。北京传智播客教育 www.itcast.cn

AJAX技术核心 • “window.ActiveXObject”为true时表示当前的浏览器为IE6.0及以下的版本，要使用new ActiveXObject(控件名)的方式来创建一个XMLHttpRequest对象 • 这里需要注意的是不同版本IE中用于建立XMLHttpRequest对象的控件版本很多 • 如果使用MSXML数组中的某一个控件名称成功建立了XMLHttpRequest对象，则跳出循环，如果建立失败会有异常抛出，被catch以后继续进行循环，尝试下一个控件名称 • 这里的控件名称是按照从新到老的顺序排列的，这样可以保证使用较新版本IE的用户可以较早成功建立XMLHttpRequest对象。 • 如果没有建立成功XMLHttpRequest对象，则不能继续后面与服务器端交互的工作，函数只能返回。北京传智播客教育 www.itcast.cn

AJAX技术核心 • 然后我们做的工作是设置一个回调函数 • 回想前面我们说过的AJAX的模式的特点，由于我们采用异步交互的模型，不像同步模式一样可以直接接收响应内容，因此我们需要告诉AJAX引擎当响应数据回来时我要做一些工作，这些工作就是回调函数中的内容。 • 这里需要注意的是设置回调函数时应该只给出回调函数的名称，后面不要带括号，因为带上括号就变成让XMLHttpRequest对象的onreadystatechange属性值等于回调函数的返回值了。北京传智播客教育 www.itcast.cn

AJAX技术核心 • 接下来要做的工作是建立对服务器的调用。这里第一个参数表示http连接的方法, 一般我们使用“GET”或“POST”方式，两种方式的区别会在后面阐述。 • 第二个参数是服务器端地址，由于使用GET方式，因此要传送给服务器端的数据也在URL中，这里我们使用了两个encodeURI，目的是为了解决URL中的中文信息在服务器端解码的问题，配合服务器端的URLDecoder.decode(old,“UTF-8”)语句可以保证中文信息在服务器端也可以正常被解出。 • 第三个参数表示是否采用异步方式进行传输，其中true表示采用异步方式，我们在AJAX中看重的就是异步方式，因此这个参数我们通常使用true。北京传智播客教育 www.itcast.cn

AJAX技术核心 • 再接着就是向服务器端发送数据，这里由于已经在URL中包含了发送给服务器的数据，因此在send时就不需要参数了，后面会讲到对于POST模式，这里的使用方式会有不同。北京传智播客教育 www.itcast.cn

AJAX技术核心 • 最后请注意，按照我们写代码的顺序来说，“xmlhttp.onreadystatechange=callback”这句中指定的回调函数callback实际上还没有存在，因此最后我们需要定义一下我们的回调函数做的工作北京传智播客教育 www.itcast.cn

AJAX技术核心 • 这里readyState=4时表示服务器端的响应数据已经被全部接收，readyState还有其他状态，后面会进行详细介绍。 • Status=200表示http连接状态正常，如果不是200，则表示http连接有误，此时回来的数据也不是我们需要的。 • 当响应数据全部接收并且http连接状态正确时，我们就可以接收响应的数据了，这里使用了xmlhttp.responseText用于以文本形式接收响应的数据，当然也可以用XML方式接收，后面会做详细介绍。北京传智播客教育 www.itcast.cn

AJAX 技术入门王兴魁