AJAX的应用初步总结

最新推荐文章于 2022-05-14 21:50:42 发布

stonecai

最新推荐文章于 2022-05-14 21:50:42 发布

阅读量1.1k

点赞数

分类专栏：【3】AJAX专题文章标签： ajax xmlhttprequest struts exception javascript 服务器

本文链接：https://blog.csdn.net/stonecai/article/details/1555786

版权

【3】AJAX专题专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在表单有一些操作，特别是验证，很多都要调用服务器端的方法函数，这样造成的麻烦相信每个程序员都知道，那就是页面刷新，既耗时又烦人，头都被刷晕了，而且他在刷新的时候，还触发服务器端的事件，现在Ajax的出现，使得很多的解决了这个问题，真有点象CS的味道。近段时间自己看了一些关于AJAX的文章，也请教了小路等人，在项目的很多地方都用上了AJAX，如表单验证，小拉框联动之类都用上了，今天有点空儿，就粗粗整理一下，写点文档。详细的体会还等以后有了深入的了解以后在来谈谈。

今天以用户验证作为例子，实时数据验证是AJAX技术的一大优势之一。通过应用此技术，struts验证框架将增强struts MVC，并使Web应用程序更接近于桌面应用程序。本文关注使用AJAX增强现有struts验证框架。
　　
　　此验证框架用于验证字段。有许多在Web应用程序上进行验证的方法。这些方法可分为两类:服务器端方法和客户端方法。Struts验证框架是面向基于Java的Web应用环境的最佳框架之一。它能够配置应用程序，方法是使用服务器端验证和错误消息，此错误消息在处理请求时呈现在调用的验证流程上，它还能够进行客户端验证，方法是使用请求页面上呈现的JavaScript。AJAX是一种JavaScript技术，它能够异步呼叫服务器并获取XML文档，这类文档最近非常流行。其用途之一就是实时数据验证。

1，newActor.jsp，需要验证的新增用户界面，其他的略，只保留用户姓名填写框。
<%@ page language="java" pageEncoding="GB2312"%>
<%@ include file="taglibs.jsp" %>
<html:html>
<head>
<%@ include file="metas.jsp" %>
<script language="javascript" src="${ctx}/scripts/ywAjax.js" ></script>
</head>
<body topmargin="10px">

//验证用户是否存在
function check(){
   var userid=document.forms[0].userid.value;
   var url=document.forms[0].action ="omActor.do?method=isUseridExit&userid="+userid;
　　var tag="load";
   send_request(url,tag);
}
</script>
<html:form action="/omActor" >
//在该处显示后台传回来的信息
<div align="load" id="load" style="font-size: 12px;color: #ff0000;"></div>
                    <tr>
                       <td class="tdTitle">用户姓名：</td>
                       <td class="tdRight"><html:text property="actorname"/></td>
                    </tr>

</html:form>
</body>
</html:html>

2,OmActorAction，后台代码，jsp中check()指向的后台函数。
public class OmActorAction extends DispatchAction {
/**
* 前台采用AJAX验证用户是否已经注册
*/
public ActionForward isUseridExit(ActionMapping mapping,ActionForm form,
   HttpServletRequest request,HttpServletResponse response) throws Exception{
   try {
        request.setCharacterEncoding("gb2312");
       } catch (Exception e) {
        e.printStackTrace();
       }
       try{
        String msgStr="";
        response.setContentType("text/xml;charset=GB2312");
        response.setHeader("Cache-Control","no-cache");
        String username=(String)request.getParameter("userid");
        if (getActorService().isUserExit(username)) { //找查数据库中有无该用户名
        msgStr ="对不起,此用户名已经存在,请更换用户名注册!";
        }else{
        msgStr ="用户未被注册,可以使用!";
        }
        response.getWriter().println("<?xml version='1.0' encoding='GB2312' ?>");
        response.getWriter().println("<root>");
        response.getWriter().println("<content>");
        response.getWriter().print(msgStr);
        response.getWriter().println("</content>");
        response.getWriter().println("</root>");
        response.getWriter().close();
        }catch(Exception ex){

}
return null;
}
}

3,ywAjax.js
var http_request = false;
var divID="";

function send_request(url,tag) {                               //初始化、指定处理函数、发送请求的函数
    var ajaxid=tag;
    http_request = false;                                       //file:开始初始化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;
    }
    divID=ajaxid;
    http_request.open("GET", url, true);            // 确定发送请求的方式和URL以及是否同步执行下段代码
    http_request.onreadystatechange = processRequest;

    http_request.send(null);
}

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

表单验证的大抵就是这样的，还有下拉框联动和数据查询等等就不谈到，至于DWR的使用等下次有空的时候在总结总结，现在对于他的理论还不是很理解。

stonecai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
AJAX的应用初步总结

在表单有一些操作，特别是验证，很多都要调用服务器端的方法函数，这样造成的麻烦相信每个程序员都知道，那就是页面刷新，既耗时又烦人，头都被刷晕了，而且他在刷新的时候，还触发服务器端的事件，现在Ajax的出现，使得很多的解决了这个问题，真有点象CS的味道。近段时间自己看了一些关于AJAX的文章，也请教了小路等人，在项目的很多地方都用上了AJAX，如表单验证，小拉框联动之类都用上了，今天有点空
复制链接

扫一扫