AJAX技术入门.ppt
《AJAX技术入门.ppt》由会员分享,可在线阅读,更多相关《AJAX技术入门.ppt(188页珍藏版)》请在冰豆网上搜索。
北京传智播客教育,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对象;,北京传智