Ajax快速入门-技术开发专区

Ajax快速入门

作者：IT168 gmplayer 编辑： ITPUB实习编辑 2007-03-30 14:44

【IT168技术文档】
    什么是Ajax
    Ajax是Web 2.0阶段系列技术和相关产品服务中非常重要的一种技术，其全称是异步JavaScript和XML（即Asynchronous JavaScript and XML），从中可以看出与Ajax直接相关的几个技术点：一是异步，二是JavaScript，三是XML。这几点恰恰集中反映了Ajax这项技术关注的两个问题：一是借助异步JavaScript实现浏览器和服务器之间的异步交互，如无需重装载整个页面就可以向服务器发送请求，并接受响应。二是对XML文档的解析和处理。

    实际上，Ajax本身不是一种全新的技术，它其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。但随着Web应用中可交互性，可参与性，可人性化设计需求的提高，Ajax在目前的Web应用开发过程中已经迅速成为客户端炙手可热的技术。

    Ajax的优势

    在前期Web技术发展的历程中，软件系统所采用的计算技术由早期的基于C/S模式应用系统向基于B/S模式应用系统进行了转变。这种转变成功地使开发者避开了繁琐但没有太多技术内涵地部署工作，即不需要将客户端程序不厌其烦地安装到数以万计地客户端（胖客户端）中去，用户端只需要提供浏览器（瘦客户端）即可以方便地显示服务器端的处理结果。但是由于这种方式所采用的是同步交互方式，因此带来的直接后果就是束缚了用户的手脚，损失了浏览器和服务器端的交互性。

    在Ajax的帮助下，传统的Web模式下的请求/响应模式发生了变化，开发人员可以凭借这一技术自由的与服务器端实现异步交互，用户最直接的感受就是不会因为要单击某一按钮就要等待整个页面的全部刷新。开发人员也不在为了要实现一个动态效果，就将服务器端数据库中的数据在整个页面装载时全部发送到客户端，导致页面的过渡膨胀。Ajax提供了非常丰富的客户端处理方式，为在Web应用中实现更加丰富的交互效果奠定了基础。

    Ajax的结构及意义

    Ajax的出现是因为：随着信息传输量的不断加大，传统的Web应用所采用的同步交互方式显现越来越明显的问题。当服务器端处理请求时，浏览器端的用户就必须等待，只有到最终的响应结果传输到浏览器客户端时，整个页面才会进行重新刷新，以显示处理的结果。

    这种处理方式让用户的体验变的不连贯，不顺畅。Ajax提倡的异步交互的处理方式则能够很好的解决这个问题。

    传统的web应用模型工作起来就象这样：大部分界面上的用户动作触发一个连接到Web服务器的HTTP请求。服务器完成一些处理---接收数据，处理计算，再访问其它的数据库系统，最后返回一个HTML页面到客户端。

    这种旧的途径让我们认识到了许多技术，但它不会产生很好的用户体验。当服务器正在处理自己的事情的时候，用户在做什么？没错，等待。每一个动作，用户都要等待。

    Ajax采用的是一种异步交互的处理方式，通过在用户和服务器之间引入一个Ajax引擎，可以消除Web的开始－停止－开始－停止这样的交互过程. 它就像增加了一层机制到程序中，使它响应更灵敏，而它的确做到了这一点。

    图1: 传统Web应用模型(左)与Ajax模型的比较(右).

【IT168技术文档】
    Ajax相关技术简介

    Ajax实际上是各种技术的一种综合的应用，这其中包括JavaScript脚本，XHTML和CSS，DOM，XML和XSTL，以及最重要的一个对象XMLHttpRequest。

    开发人员可以使用XHTML和CSS实现数据信息的统一化，标准化显示；使用DOM实现浏览器丰富的动态显示效果与处理；使用XMLHttpRequest对象进行浏览器和服务器端的异步数据读取；使用JavaScript脚本实现对所有数据进一步处理。

    1．JavaScript

    JavaScript是一在浏览器中大量使用的编程语言，，他以前一直被贬低为一门糟糕的语言(他确实在使用上比较枯燥)，以在常被用来作一些用来炫耀的小玩意和恶作剧或是单调琐碎的表单验证。但事实是，他是一门真正的编程语言，有着自已的标准并在各种浏览器中被广泛支持。

    2．DOM

    Document Object Model。

    DOM是给 HTML 和 XML 文件使用的一组 API。它提供了文件的结构表述，让你可以改变其中的內容及可见物。其本质是建立网页与 Script 或程序语言沟通的桥梁。

    所有WEB开发人员可操作及建立文件的属性、方法及事件都以对象来展现(例如，document 就代表“文件本身“这个对像，table 对象则代表 HTML 的表格对象等等)。这些对象可以由当今大多数的浏览器以 Script 来取用。

    一个用HTML或XHTML构建的网页也可以看作是一组结构化的数据，这些数据被封在DOM(Document Object Model)中，DOM提供了网页中各个对象的读写的支持。

    3．XML

    可扩展的标记语言(Extensible Markup Language)具有一种开放的、可扩展的、可自描述的语言结构，它已经成为网上数据和文档传输的标准。它是用来描述数据结构的一种语言，就正如他的名字一样。他使对某些结构化数据的定义更加容易，并且可以通过他和其他应用程序交换数据。

    4．XHTML和CSS

    XHTML的全称是可扩展的超文本标记语言（Extensible HyperText Markup Language），是一种为适应XML可扩展编辑语言（Extensible Markup Language）而重新改造的HTML超文本标记语言（HyperText Markup Language）。

    从本质上来说，XHTML是一种过渡技术，它结合了XML中的部分强大功能及HTML中大部分简单特性。

相对原来的HTML来讲，XHTML从设计上显得更加严密，其与XML关系决定了它的用户可以很自然的实现从HTML到XML的转换。

    CSS层叠样式表是为了祢补HTML超文本标记语言在格式修饰中的不足，同时也为了能够实现页面格式的批量动态更新。为了进一步丰富页面的动态效果，通过使用脚本语言与CSS结合，动态控制页面元素的位置，色彩等属性。因此了解CSS的常用属性和设置方式是脚本编程中所需要的。

    5．XMLHttpRequest
    XMLHttpRequest是Ajax技术中最重要的一个对象。XMLHttpRequest是浏览器已经定义好的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。 IE5.0开始，开发人员可以在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能，不用从当前的 Web 页面导航就可以直接传输数据到服务器或者从服务器接收数据。,Mozilla1.0以及NetScape7则是创建继承XML的代理类XMLHttpRequest；对于大多数情况，XMLHttpRequest对象和XMLHTTP组件很相似，方法和属性类似，只是部分属性不同。

    通过XMLHttpRequest，JavaScript可以和服务器之间进行通信，并通过它来解析从服务器传回来的XML文件。

    总之，Ajax实际上是上述这些技术的综合运用，即基于XHTML和CSS，由DOM实现动态显示与交互，借助XML和XSLT进行数据交换处理，而在这个过程中则是使用JavaScript来进行整合。

【IT168技术文档】
    开发体验
    本例中将显示用户注册时用户名的唯一性校验的操作，采用Ajax的异步交互方式。最初注册的页面为：

如果test用户名已经被使用了，则会弹出对话框进行提示：

可以看到提示信息显示的窗口页面后面的页面并不是空白的，在页面状态栏中也看不到页面刷新显示的进度条。
如果用户名没有被使用：

    同样在该页面中也看不到页面在进行刷新的效果。

【IT168技术文档】
    下面给出该示例的源代码：
    login.jsp:

<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
    var http_request = false;
    function send_request(url) ...{//初始化、指定处理函数、发送请求的函数
        http_request = false;
        //开始初始化XMLHttpRequest对象
        if(window.XMLHttpRequest) ...{ //Mozilla 浏览器
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) ...{//设置MiME类别
                http_request.overrideMimeType('text/xml');
            }
        }
        else if (window.ActiveXObject) ...{ // IE浏览器
            try ...{
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) ...{
                try ...{
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) ...{}
            }
        }
        if (!http_request) ...{ // 异常，创建对象实例失败
            window.alert("不能创建XMLHttpRequest对象实例.");
            return false;
        }
        http_request.onreadystatechange = processRequest;
        // 确定发送请求的方式和URL以及是否同步执行下段代码
        http_request.open("GET", url, true);
        http_request.send(null);
    }
    // 处理返回信息的函数
    function processRequest() ...{
        if (http_request.readyState == 4) ...{ // 判断对象状态
            if (http_request.status == 200) ...{ // 信息已经成功返回，开始处理信息
                alert(http_request.responseText);
            } else ...{ //页面不正常
                alert("您所请求的页面有异常。");
            }
        }
    }
    function userCheck() ...{
        var f = document.form1;
        var username = f.username.value;
        if(username=="") ...{
            window.alert("用户名不能为空。");
            f.username.focus();
            return false;
        }
        else ...{
            send_request('validate.jsp?username='+username);
        }
    }
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<form name="form1" action="" method="post">
用户名：<input type="text" name="username" value="">&nbsp;
<input type="button" name="check" value="唯一性检查" onClick="userCheck()">
</form>
<!--span style="cursor: pointer; text-decoration: underline" 
   onclick="send_request('2.jsp?username=educhina')">Send a request</span-->
</body>
</html>

Validate.jsp:

<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<%
String username = request.getParameter("username");
if("test".equals(username)) out.print("用户名已经被注册，请更换一个用户名。");
else out.print("用户名尚未被使用，您可以继续。");
%>

【IT168技术文档】
    Ajax的工作流程分析

    在上面的例子中，许多初学者可能搞不清Ajax的具体运行流程，下面对Ajax的工作流程作一个总体介绍。
    Ajax的基本工作流程图：

首先，在浏览器客户端创建对应的XMLHttpRequest对象，在login.jsp中找到对应的代码：

var http_request = false;
    function send_request(url) ...{//初始化、指定处理函数、发送请求的函数
        http_request = false;
        //开始初始化XMLHttpRequest对象
        if(window.XMLHttpRequest) ...{ //Mozilla 浏览器
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) ...{//设置MiME类别
                http_request.overrideMimeType('text/xml');
            }
        }
        else if (window.ActiveXObject) ...{ // IE浏览器
            try ...{
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) ...{
                try ...{
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) ...{}
            }
        }
        if (!http_request) ...{ // 异常，创建对象实例失败
            window.alert("不能创建XMLHttpRequest对象实例.");
            return false;
        }
        http_request.onreadystatechange = processRequest;
        // 确定发送请求的方式和URL以及是否同步执行下段代码
        http_request.open("GET", url, true);
        http_request.send(null);
    }

上面的代码中，根据不同的浏览器类型创建对应的XMLHttpRequest对象。

接下来，当用户点击“唯一性检查”提交对应的请求以后，即可通过内置的Ajax核心对象XMLHttpRequest以异步的方式发送请求，同时提供对应的表单数据，在login.jsp中相应的代码：

function userCheck() ...{
        var f = document.form1;
        var username = f.username.value;
        if(username=="") ...{
            window.alert("用户名不能为空。");
            f.username.focus();
            return false;
        }
        else ...{
            send_request('validate.jsp?username='+username);
        }
    }

在请求提交之后为Ajax核心对象onreadystatechange指定好响应的函数之后，该监听器就开始工作。接下来浏览器客户端提供的请求被发送到服务器端，这里是validate.jsp页面进行处理，来校验输入的用户名是否是唯一的。

当响应的数据返回浏览器客户端时，在客户端一直监听的Ajax核心对象的onreadystatechange将会监听到对应的响应数据，此时就会按照预先设计好的业务逻辑进行处理，例如采用DOM进行页面的更新处理，本例中使用window对象提供的alert（）方法进行提示信息的输出。Login.jspz中处理返回请求的代码：

// 处理返回信息的函数
    function processRequest() ...{
        if (http_request.readyState == 4) ...{ // 判断对象状态
            if (http_request.status == 200) ...{ // 信息已经成功返回，开始处理信息
                alert(http_request.responseText);
            } else ...{ //页面不正常
                alert("您所请求的页面有异常。");
            }
        }
    }

从上面的例子中可以看出，在Ajax技术中最核心的对象就是XMLHttpRequest，该对象提供了对应的方法和属性来完成向服务器提交请求，以及接收来自服务器端处理的结果等功能。

关注我们