javascript快速入门22--Ajax简介

Ajax是什么?

首先,Ajax是什么?一个很酷的新兴词汇!仅仅是某种早就有了的技术的一种新说法而已! Ajax是指一种建立交互式网页应用的网页开发技术。要谈到网页应用程序,则必须从WEB的历史来说:

1.开始的Internet,仅仅是科学家们用来交换研究论文,及一些大学在上面发布一些课程信息的工具,那个时候网页与一幅户外广告没多大区别(相反户外广告才能起来广告的做用).那个时候,只有少部分的公司具备公司网站,而它们的公司网站仅仅是在首页上放置一些联系信息或一些静态的文档!

2.当Windows出现后(尽管Windows仅仅是给早就有了的操做系统加个外套而已,但这确实上一大进步),及我的电脑的流行,WEB也开始从学院走向群众,人们没法再忍受静态网页的一成不变,因而CGI(Common Gateway Interface)诞生了! CGI实际上是用C或Perl编写的程序,当用户请求某个页面时,CGI程序会自动执行,CGI程序能够访问数据库,返回HTML页面.那个时候就能够经过CGI来建立一个在线商城了.然而CGI有不少缺点:首先是其编写很复杂,每每编写CGI的是一些专业的程序员,他们只会关心一些算法问题,而不会理HTML页面是否漂亮! 另外一点,因为CGI是通过编译后的程序,虽然做为独立程序运行时效率会很高,但也很危险,由于CGI程序能够访问服务器的系统里的其它与WEB无关的程序及建立文件,虽然通常状况下CGI程序不会这样作,但若是恶意用户将CGI程序放到服务器,那么它就能够随心所欲了!尽管存在这些缺陷，到现在CGI仍在使用。

3.不少人都知道Sun,知道因特网流行的编程语言JAVA.如上所说CGI具备许多缺点,JAVA即是来弥补这些缺点的.因为Netscape的Navigator支持Java，动态Web页面掀开了新的一页：applet时代到来了。Applet与CGI不一样,它是运行在客户端的,Applet就是嵌入在Web页面上的小应用程序. 只要用户使用支持Java的浏览器，就能够在浏览器的Java虚拟机（Java Virtual Machine，JVM）中运行applet。尽管applet能够作不少事情，但它也存在一些限制：一般不容许它读写文件系统，它也不能加载本地库，并且可能没法启动客户端上的程序。除了这些限制外，applet是在一个沙箱安全模型中运行的，这是为了有助于防止用户运行恶意代码。 JAVA最早就是由于Applet出名的,而不少人学JAVA也是从Applet开始的.然而,Applet好景不长,一是因为一个Applet自己加载要很长时间,另外一方面,因为更流行的MS的IE开始不支持Applet,它就只好没落了.

4.与此同时，Netscape建立了一种脚本语言，并最终命名为JavaScript（创建原型时叫作Mocha，正式发布以前曾经更名为LiveWire和LiveScript，不过最后终于肯定为JavaScript）。设计JavaScript是为了让不太熟悉Java的Web设计人员和程序员可以更轻松地开发applet（固然，Microsoft也推出了与JavaScript相对应的脚本语言，称为VBScript）。 固然,最初JavaScript是很失败的,因为各个浏览器相互不兼容(然而它们都提供了弹窗,那些烦人的alert),又由于缺少开发工具,JavaScript很受非议.但尽管如此，JavaScript仍然是一种建立动态Web应用的强大方法。

5.在Java问世一年左右，Sun引入了servlet。如今Java代码不用再像applet那样在客户端浏览器中运行了，它能够在你控制的一个应用服务器上运行。这样，开发人员就能充分利用现有的业务应用，并且，若是须要升级为最新的Java版本，只须要考虑服务器就好了。Java推崇“一次编写，处处运行”，这一点使得开发人员能够选择最早进的应用服务器和服务器环境，这也是这种新技术的另外一个优势。servlet还能够取代CGI脚本。 固然,这个时候的servlet仍然比CGI简单不了多少.MS吸收了Sun的教训,推出了ASP,Sun也很快做出了回应,推出了JSP.JSP和ASP的设计目的都是为了将业务处理与页面外观相分离，从这个意义上讲，两者是类似的。虽然存在一些技术上的差异（Sun也从Microsoft那里学到了教训），但它们有一个最大的共同点，即Web设计人员可以专心设计页面外观，而软件开发人员能够专心开发业务逻辑。 ASP与JSP都没有垄断服务器脚本市场,由于还有其它优秀的服务器脚本,如PHP,ColdFusion及Ruby!

6.当WEB进化到这里的时候,动态的网站已经不少了.但人们对动态的定义一直很模糊,好比说不少人觉得动态是指动画!其实这也没什么好笑的,正是这一理念,将动态WEB从服务器端动态生成HTML进化为富客户端应用程序(固然不是动画). 富客户端应用程序(Rich Internet Applications,富因特网应用程序,RIA)的提出解决了长久以来的"客户体验"问题,用户在使用Windows时已经习惯于那些各色各样的桌面应用程序,而死板的HTML页面每每只能提供一些文档. RIA的出现,目标就是能使WEB页面能像桌面应用程序同样具备很高的交互性及响应率.其实Sun推出的Applet就是一个RIA,固然MS也有其产品,最近推出的SilverLight.并不仅有这两家,还有Adobe Flash(它不是作动画的吗?对的,但其不但能够用来作动画,还能够建立一些其它的RIA),利用Flash，设计人员能够建立使人惊叹的动态应用。公司能够在Web上发布高度交互性的应用，几乎与胖客户应用相差无几。不一样于applet、servlet和CGI脚本，Flash不须要编程技巧，很容易上手。 像许多解决方案同样，Flash须要客户端软件,因为此限制,不少网站上就多出了"跳过此页"的连接.

7.主角出场了(其实已经低调出场过一次了),曾经的JavaScript,以及其带来的DHTML,开始了新的历程. 当Microsoft和Netscape发布其各自浏览器的第4版时，Web开发人员有了一个新的选择：动态HTML（Dynamic HTML，DHTML）。与有些人想像的不一样DHTML不是一个W3C标准，它更像是一种营销手段。实际上，DHTML结合了HTML、层叠样式表（Cascading Style Sheets，CSS）、JavaScript和DOM。这些技术的结合使得开发人员能够动态地修改Web页面的内容和结构。 最初DHTML的反响很好。不过，它须要的浏览器版本尚未获得普遍采用。尽管IE和Netscape都支持DHTML，可是它们的实现截然不同，这要求开发人员必须知道他们的客户使用什么浏览器。而这一般意味着须要大量代码来检查浏览器的类型和版本，这就进一步增长了开发的开销。有些人对于尝试这种方法非常迟疑，由于DHTML尚未一个官方的标准。 当DHTML渐渐退出视野以后,咱们的JavaScript并无没落,因为W3C标准的不断推动,给JS带来了福音,如今编写跨浏览器的代码并不像当初那样困难了(尽管也存在一些问题).另外,XML与异步通讯(XMLHttpRequest)在WEB上的的流行,浏览器对支持也愈来愈好,也使得JS能够大展其身手.当你使用JS操纵DOM的时候,就发现实现动态WEB应用程序已经再也不有多遥远. 如今又有了XML(数据库)与异步通讯的支持,可使得应用程序在加载完成后,无需跳转,就能够返回给用户全部的内容了!

Ajax是多种技术的并称

Ajax是Asynchronous JavaScript and XML（异步JavaScript和XML），它其实包含了不少技术,主要是下面所列的:

• ECMAScript,为何不是JavaScript?由于JavaScript自己与Ajax同样,包含的也太多了!
• DOM及相关内容:CSS,XHTML....
• XML,及XML的一些扩展语言:XSL,SVG,XUL,XAML.....XML的扩展太多了
• XMLHttpRequest对象,浏览器提供的一个能够用于异步通讯的JavaScrip对象
• 服务器脚本的支持,没有服务器脚本在后台工做,也是没有办法实现"动态"的,以后就知道了...

关于XMLHttpRequest对象

XMLHttpRequest对象其实最先是由MS提出来的,并在IE5中就提供了支持,当时,在IE5里它是一个ActiveXObject. 原先，XHR对象只在IE中获得支持（所以限制了它的使用），可是从Mozilla 1.0和Safari 1.2开始，对XHR对象的支持开始普及。这个不多使用的对象和相关的基本概念甚至已经出如今W3C标准中：DOM Level 3 加载和保存规约（DOM Level 3 Load and Save Specification）。如今，特别是随着Google Maps、Google Suggest、Gmail、Flickr、Netflix和A9等应用变得愈来愈煊赫一时，XHR也已经成为事实上的标准。 与前面提到的方法不一样，Ajax在大多数现代浏览器中都能使用，并且不须要任何专门的软件或硬件。实际上，这种方法的一大优点就是开发人员不须要学习一种新的语言，也没必要彻底丢掉他们原先掌握的服务器端技术。Ajax是一种客户端方法，能够与J2EE、.NET、PHP、Ruby和CGI脚本交互，它并不关心服务器是什么。尽管存在一些很小的安全限制，你仍是能够如今就开始使用Ajax，并且能充分利用你原有的知识。

早期的异步通讯实现

虽然可使用XHR对象来实现异步通讯,但其实早期的开发人员曾经也尝试过使用隐藏帧等方法来实现异步通讯!

    //主页面中的JS代码
    function getPages(url) {
        var iframe =document.getElementById("hideIframe");//一个隐藏了的iframe标签
        iframe.src = url;//将帧的src设置为传入的url,就能够将那个页面在后台载入
    }
    window.container = document.getElementById("oDiv");//加载内容的窗口
    getPages("test.php?param=value");//能够经过QS传递参数
    //在隐藏帧中加载的页面中JS代码
    window.onload = function () {//当帧加载完毕后修改父窗口中的内容
        parent.container.innerHTML = document.body.innerHTML;
    }

 

另外还有一种就是使用script标签

    //HTML
    <script type="text/javascript" id="voidScript" src="void(0)"> </script>
    //JS
    function getScript(url) {
        var script = document.getElementById("voidScript");
        script.src =url;//这种方法必须加载JS脚本,而且脚本加载后就会执行
    }
    getScript("test.php?userName=abc");

 

Ajax的问题

Ajax并非每一个网站都须要的,尽管它有诸多优势:如可与XHTML无缝集成,轻量,无需插件..但其缺点也有很多:依赖JavaScript,影响浏览器默认行为如后退按钮及收藏夹等.另外,它最大的优势也是它最大的缺点: 咱们之前老是告诉用户，Web应用是以一种请求/响应模式完成操做的，用户也已经接受了这种思想。可是用了Ajax，就再也不有这个限制。咱们能够只修改页面的一部分，若是用户没想到这一点，他们会尝试狂点某按钮,或刷新页面,因此要经过一些方法来让用户知道页面正在"异步"与服务器交互!