Ajax的实现（基于jsp画面和struts）

      ajax是一种创建交互式网页应用的网页开发技术。通俗的讲就是实现html画面的局部刷新。

      例如：传统的web开发，当服务器端执行服务端代码（执行客户请求，数据库操作，业务逻辑操作）之后将生成的信息发送到客户端（浏览器）。客户端通过解析相应的html、css、javascript、xml等信息并将其展示到客户端上，形成一个画面，并开始执行客户端脚本（这里我们只讨论javascript脚本）。此时如果需要改变页面中的一个元素的内容，必须重新向web服务器发送请求（get、post）由服务器执行服务端代码生成相应的信息并发送到客户端浏览器中，此时浏览器的当前画面刷新。如果我们不想刷新整个页面，又想与服务器交互该如何处理呢？ajax技术可以很好的处理这一类问题，实现与服务器交互，并通过javascript实现局部刷新。

      1.首先我们需要创建HttpRequest对象，javascript代码如下：

 

function   CreateHttpRequest()
{
     if ( window .XMLHttpRequest)
    {
        http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType)
        {
            http_request.overrideMimeType( 'text/xml' );
        }
     }
     else if ( window . ActiveXObject )
    {
         try
        {
               http_request= new ActiveXObject ( "Msxml2.XMLHTTP" );
        }
         catch (e)
        {
               try
               {
                    http_request= new ActiveXObject ( "Microsoft.XMLHTTP" );
               }
               catch (e)
              {
            
               }
         }
     }    
     if (!http_request)
     {
         return false ;
     }    
}

 

      2.执行ajax请求：

 

//实现ajax方式向服务器提交请求
function beginAjax()
{
     //初始化HttpRequest
    CreateHttpRequest();

     //指定请求url地址，如果是用struts来完成将地址修改为struts请求即可
     var url = "Message2.jsp" ;
    
     //设定回调函数
    http_request.onreadystatechange = showResult;

     //提交ajax请求
    http_request. open ( "GET" , url, true );
    http_request.send( null );
}

 

      3.通过回调函数来取得服务器响应后的信息：

 

//回调函数
function showResult()
{
     //服务器请求状态为“完成”
     if (http_request. readyState == 4)
    {
         //服务器响应状态为“OK”
         if (http_request. status == 200)
        {
             //取得服务器执行相应后所生成内容信息
             var responseText =  http_request.responseText;
            
             //进行自定义处理，通过javascript实现局部刷新

        }
    }
}    

 

      利用ajax技术可以实现很多用传统请求方式的复杂处理，下面介绍一个常用的例子：用户注册时通过ajax校验用户注册的用户名是否已经被其他人使用：

      1.首先在html中为username控件元素添加onBlur事件，并为此驱动事件绑定checkUserName方法。于是，当用户在此输入框中输入自己想要注册的用户名之后，焦点离开userName控件时，会触发checkUserName方法。html代码如下：

 

<input type = "text" id = "userName" name = "userName" onBlur= "checkUserName(this.value);" >
    

 

      2.checkUserName方法的实现：

 

//校验用户名是否被注册的javascript方法
function checkUserName(userName)
{
     //校验用户名格式是否合法，代码略
     if (checkStringFormat(userName, "userName" )
    {
         //初始化 HttpRequest
        CreateHttpRequest();

         //指定请求 url地址
         var url = "checkUserName.do?userName=" + userName;
        
         //设定回调函数
        http_request.onreadystatechange = showResult;

         //提交ajax请求
        http_request. open ( "GET" , url, true );
        http_request.send( null );
    }
}

 

      3.struts中校验用户名是否已经被注册过：

 

//用来校验用户名是否被注册过的Struts方法（Struts2）
public String checkUserName()
{
     //取得response对象代码略

     //定义一个PrintWriter对象用于输出
     PrintWriter out;        
     try
    {
         //取得response Writer
        out = response.getWriter();

         //通过与数据库中现有的用户名校验确定此用户名是否被注册过，代码略
         //如果未被注册
         if (userService.checkUserName( this .userName)
        {
             //向画面输出0
            out.write( "0" );
        }

         //如果已被注册
         else
        {
             //向画面输出1
            out.write( "1" );
        }
        
    }

     //异常处理
     catch ( IOException e)
    {
        e.printStackTrace();
    }
     finally
    {
        out.close();
    }
     return null ;
}

 

      4.画面中使用回调函数处理局部刷新：

 

//回调函数
function showResult()
{
     //服务器请求状态为“完成”
     if (http_request. readyState == 4)
    {
         // 服务器响应状态为“OK”
         if (http_request. status == 200)
        {
             //取得服务器执行相应后所生成内容信息
             var responseText =  http_request.responseText;
            
             //进行自定义处理，通过javascript实现局部刷新
             //如果服务器响应后返回0，说明此用户名尚未被注册
             if (responseText == "0" )
            {
                 //提示此用户名可以注册，具体代码略
                
            }

             else if (responseText == "1" )
            {
                 //提示此用户名已经被注册，请重新输入用户名，具体代码略

            }
        }
    }
}  

 

      以上为javascript和struts2实现基于ajax的校验用户名的功能实现。实际上ajax能够实现的功能，和其所应用到的领域十分广泛，了解了ajax的核心原理，无论使用现有的各种ajax插件来进行开发都很容易。