摘  要： 对Ajax技术做了介绍,并结合系统登录实例重点介绍了Ajax技术无刷新的特点和实现方式，利用测试软件对系统性能进行了测试。实验结果表明,使用Ajax技术后用户体验和系统性能得到了良好的改善。
关键词： Ajax技术； 刷新； 性能测试

1 Ajax技术简介
    随着Internet技术的兴起，B/S结构得到了大规模应用。但是传统Web存在不足之处[1]：(1)独占式请求。如果前一个请求没有得到完全响应，后一个请求则不能发送。在等待服务器响应期间，用户的浏览器是一片空白。(2)刷新频繁。传统Web应用基本上都采用请求-页面的对应模式，每个请求都需要丢弃当前页面，重新加载新页面。频繁的页面刷新不仅让用户处于不连续的体验中，也让服务器的负担加重。
    Ajax[2]（Asynchronous javascript and XML）为弥补以上不足而诞生,它使用XMLHttpRequest对象异步发送请求,发送请求不需要重新加载页面。浏览器发送请求后，无需等待服务器响应，而可以继续原来的操作。当服务器的响应完成后,客户端使用JavaScript函数将相应数据加载到浏览器中。通过使用Ajax技术，用户发送请求并得到响应的过程在后台进行，用户的界面以连续的方式响应。Ajax技术特别适用于交互较多、频繁读数据、数据分类良好的Web应用。使用Ajax技术有以下两个优势[1]：
    (1)无刷新更新页面给用户更好的体验； (2)Ajax技术可以将传统的服务器工作转嫁到客户端，从而减轻服务器和带宽的负担，节约空间和带宽租用成本。
2 Ajax技术在系统中的应用
    在各种管理系统的开发中，用户信息验证是一个必然环节。在B/S模式的系统中，用户访问量大，数据交换频繁，这就要求服务器能够快速响应用户请求才能适应新的发展。为了使用户感觉界面响应连续，在登录界面设计中结合Ajax技术[3]，通过JavaScript的方式，将前台数据通过XMLHttp对象传递到后台;后台在接收到请求后,将需要的结果再传回到前台,这样就可以实现不需要页面的回发,使整个过程在同一个页面中完成,实现了页面的无刷新。
    以登录到毕业生管理系统为例,图1为系统登录模块流程图，其中登录和注册要与后台数据库进行交互。为了使用户体验更好，在开发中采用了Ajax技术[4]。

    首先是验证信息，注册用户首先输入学号和姓名，查看是否有该生,从图2中可以看出页面没有刷新,数据得到验证。
    实现的主要代码：
    $.ajax({        
        url:"/studentLoginNameQuery.action?studtCode="+ studtCode + "&name=" +  escape(escape(name)),
            data:"",
　　            type:′post′,
　　            dataType:"json",
　　            success:function(json){  
　　                //alert(name);  
　　                if(json != null && json != ""){                                var formHtml = "登录名:<input type=′text′name=′loginName′ id=′loginName′> <br>密&nbsp;&nbsp;码:<input type=′password′ name=′loginPwd′ id=′loginPwd′> <br><input type=′button′ value=′提交′ onclick='subFun()′><input type=′hidden′ name=′personId′ id=′personId′value=′"+json+"′ ><br>";                    
　　                $(′#submitForm′).html(formHtml);
　　                $(′#returnInfoDiv′).html(′合法用户，请输入登陆系统的用户名和密码!′);
            }else{
　                $(′#returnInfoDiv′).html(′对不起，该学生信息不存在,请确定是否输入不合法数据!′);
    当系统验证该用户存在时，允许用户注册登陆的用户名和密码，从信息验证到用户注册，页面依然没有更新，界面如图3所示。

    实现的主要代码：
　　    $.ajax({        
　    url:"/loginInfo/loginInfoSave.action?loginV.loginName="
　　            + $(′#loginName′).val() + "&loginV.loginPwd="
 　            + $(′#loginPwd′).val() + "&loginV.personId="
　　            + $(′#personId′).val() + "&loginV.userType=
                student",
            data:"",
            type:′post′,
　　        dataType:"json",
　　        success:function(json){  
            if(json != null && json != ""){                                 $(′#returnInfoDiv′).html(′数据提交成功，
                  <a href="/index.action">返回登陆页面
                </a>′);
　　      }else{
　　            $(′#returnInfoDiv′).html("保存数据失败!!");
                }
　　        },
            error:function (XMLHttpRequest, textStatus, error
                Thrown) {
　　                $('#returnInfoDiv′).html("保存数据失败!!");
　　            }
　　            });
3 性能测试对比
　    为了进一步测试系统中使用Ajax技术对Web视图层的影响，在登录界面中对使用Ajax技术前和使用了Ajax技术后的页面做了实验分析。实验的主要目的是对比分析Jsp和Ajax分别实现Web系统视图层时,系统响应时间的差异。从而得到使用Ajax后系统响应时间上的变化，以此证明系统中使用Ajax技术的优势。
　    实验过程中,系统中Jsp和Ajax实现视图层的算法与逻辑过程一致。实验测试环境如表1所示。