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

来源：互联网发布：视频转换手绘软件编辑：程序博客网时间：2024/05/21 10:25

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插件来进行开发都很容易。