文档章节

一个简单的ajax实例:ajax与struts2实例

tojsp_com
 tojsp_com
发布于 2010/08/14 17:28
字数 1685
阅读 11285
收藏 13

         前言

         对于从事技术的人员来说ajax是这好东西,都会使用,而且乐于使用。但对于新手,开发一个ajax实例,还有是难度的,必竟对于他们这是新东西。leo开发一个简单的ajax实例,用的是ajax与struts2结合而开发的实例。

        在学习实例前,leo觉得有必要看看,了解下下面这些资料,对ajax学习很重要也很必要.

        什么是Ajax

        读音:e:j^ks 。AJAX即“Asynchronous JavaScript and XML”(异步JavaScript和XML),AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词,是指一种创建交互式网页应用的网页开发技术.

        什么是JavaScript

        Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。
       
        什么是XML

        XML(Extensible Markup Language)即可扩展标记语言,它与HTML一样,都是SGML(Standard Generalized Markup Language,标准通用标记语言)。Xml是Internet环境中跨平台的,依赖于内容的技术,是当前处理结构化文档信息的有力工具。扩展标记语言XML是一种简单的数据存储语言,使用一系列简单的标记描述数据,而这些标记可以用方便的方式建立,虽然XML占用的空间比二进制数据要占用更多的空间,但XML极其简单易于掌握和使用。

        leo说明

        有了这些资料,现在学习ajax就容易了,如果熟悉上面两种语言,那就更得心应手了;不会这两种语言的朋友可以先去大概的看看,学习下,特别是Javascript,这样在学习ajax时会很轻松.

        ajax实例

        下面来看看实例.

        准备工作:开发软件Myeclipse6.5,tomcat6.0 环境jdk1.6,struts2.0

        OK,一切准备好了,搭建工程,先创建一个test工程,添加。。。具体的步骤就省略了,相信大家这个都会。我们看代码。

        创建一个接受请求处理请求的java类 Java代码
package action;   
  
import java.io.PrintWriter;   
import java.text.SimpleDateFormat;   
import java.util.Date;   
  
import javax.servlet.http.HttpServletRequest;   
import javax.servlet.http.HttpServletResponse;   
  
import org.apache.struts2.ServletActionContext;   
  
import com.opensymphony.xwork2.ActionSupport;   
/**Struts2中AJAX应用演示业务控制器**/  
public class AjaxAction extends ActionSupport {   
       
       
    /**处理原始的AJAX请求:读取服务端系统时间**/  
    public String getServerTime(){   
        try {   
            SimpleDateFormat sd = new SimpleDateFormat("yyyy-MM-dd kk:mm:ss");   
            //获取原始的PrintWriter对象,以便输出响应结果,而不用跳转到某个试图   
            HttpServletResponse response = ServletActionContext.getResponse();   
            //设置字符集   
            response.setCharacterEncoding("UTF-8");   
            PrintWriter out = response.getWriter();   
               
            //直接输入响应的内容   
            out.println(sd.format(new Date()));   
            /**格式化输出时间**/  
            out.flush();   
            out.close();   
               
        } catch (Exception e) {   
            // TODO: handle exception   
            e.printStackTrace();   
        }   
        return null;//不需要跳转某个视图 因为上面已经有了直接输出的响应结果   
           
    }   
       
    /**处理原始的AJAX请求:异步登录**/  
    public String ajaxLogin(){   
        try {   
            String responseText="";   
            //读取请求的参数   
            HttpServletRequest request = ServletActionContext.getRequest();   
            String loginname=   request.getParameter("loginname");   
            String loginpwd= request.getParameter("loginpwd");   
            //进行登录验证   
            if(loginname==null||loginname.trim().length()<1){   
                responseText="对不起,账号不能为空";   
            }else if(loginpwd==null||loginpwd.trim().length()<1){   
                responseText="对不起,密码不能为空";   
            }else{   
                if(loginname.equalsIgnoreCase("www.dukai168.cn")&&loginpwd.equalsIgnoreCase("www.dukai168.cn")){   
                    responseText="恭喜你,异步登录成功";   
                }else{   
                    responseText="对不起,异步登录失败";   
                }   
            }   
               
            //获取原始的PrintWriter对象,以便输出响应结果,而不用跳转到某个试图   
            HttpServletResponse response = ServletActionContext.getResponse();   
            //设置字符集   
            response.setContentType("text/plain");//设置输出为文字流  
            response.setCharacterEncoding("UTF-8");   
            PrintWriter out = response.getWriter();   
               
            //直接输出响应的内容   
            out.println(responseText);   
            out.flush();   
            out.close();   
               
        } catch (Exception e) {   
            // TODO: handle exception   
            e.printStackTrace();   
        }   
        return null;//不需要跳转某个视图 因为上面已经有了直接输出的响应结果   
           
    }   
  
       
}      
        配置struts.xml Java代码
<?xml version="1.0" encoding="UTF-8" ?>   
  
<!DOCTYPE struts PUBLIC   
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
    "http://struts.apache.org/dtds/struts-2.0.dtd">   
  
<struts>   
    <package name="test1" extends="struts-default">   
        <action name="ajax_*" class="action.AjaxAction" method="{1}">   
            <result>/show.jsp</result>   
        </action>   
    </package>   
</struts>  
        创建前台前请求页面 XML/HTML代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<!--www.dukai168.cn-->
<script language="javascript">  
    //定义一个变量用于存放XMLHttpRequest对象   
    var xmlHttp;   
       
       
    //改函数用于创建一个XMLHttpRequest对象   
    function createXMLHttpRequest(){   
        if(window.ActiveXObject){   
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
        }else if(window.XMLHttpRequest){   
            xmlHttp = new XMLHttpRequest();   
        }   
    }   
       
       
    //这是一个启动AJAX异步通信的方法   
    function getServerTime(){   
        alert("我走过了时间方法");   
        var now = new Date();//获取系统当前的时间   
           
        //创建一个XMLHttpRequest对象   
        createXMLHttpRequest();   
        //将状态触发器绑定到一个函数   
        xmlHttp.onreadystatechange= processServerTime;   
        //通过GET方法向指定的URL建立服务器的调用,加个临时的参数,以便表示一个全新的请求   
        var url="ajax_getServerTime.action?tmp="+now.getTime();//等写完回来看这一句话   
        xmlHttp.open("GET",url,true);   
        //发送请求   
        xmlHttp.send(null);   
    }   
       
    //这是一个用来处理状态改变的函数   
    function processServerTime(){   
        //定义一个变量用于存放从服务器返回的响应结果   
        var responseContext;   
        if(xmlHttp.readyState==4){   
            //如果响应成功   
            if(xmlHttp.status==200){   
                //取出服务器的响应内容   
                responseContext=xmlHttp.responseText;   
                document.getElementById("servertime").innerHTML=responseContext;   
            }   
        }   
    }   
    /**以上是获取当前时间的**/   
       
    //这是一个启动AJAX异步通信的方法   
    function ajaxLogin(){   
        var ln = document.getElementById("loginname").value;   
        var lp = document.getElementById("loginpwd").value;   
        //创建一个XMLHttpRequest对象   
        createXMLHttpRequest();   
           
        //将状态绑定到一个函数   
        xmlHttp.onreadystatechange=processAjaxLogin;   
        //通过GET方法向指定的URL建立服务器的调用   
        var url="ajax_ajaxLogin.action?loginname="+ln+"loginpwd="+lp;   
        xmlHttp.open("GET",url,true);   
           
        //发送请求   
        xmlHttp.send(null);   
    }   
    //这是一个用来处理状态改变的函数   
    function processAjaxLogin(){   
        //定义一个变量用于存放 从服务器返回的响应结果   
        var responseContext="";   
        if(xmlHttp.readyState==4){   
            if(xmlHttp.status==200){   
                responseContext = xmlHttp.responseText;   
                alert(responseContext);   
            }   
        }   
    }   
</script>  
<!--"www.dukai168.cn"-->
1.服务器端的系统时间:   
<span id="servertime"></span>  
<input type="button" value="获取服务器端时间" onclick="getServerTime()">  
2.登陆账号:   
<input type="text" id="loginname">  
登陆密码:   
<input type="password" id="loginpwd">  
<input type="button" value="异步登陆" onclick="ajaxLogin()">  
        好了,所有的工作都完成了,发布运行,一切正常,运行的图就不放上来了,此ajax实例已经经过leo亲自测试运行。大家可以直接贴代码进行运行。

        leo总结
       
        此ajax实例是用的最原始的ajax语言来实现了,现在一般都不这样用,因为这们对浏览器间的兼容性不强,目前使用的都是ajax框架,比如说Jquery,prototype,dwr,Dojo等,更多浏览ajax框架.
本文为原创JSP博客(http://www.dukai168.cn) 独家发布,转载请保留原文地址http://www.dukai168.cn/blog/157.html,否则将追究法律责任,谢谢配合.

© 著作权归作者所有

tojsp_com
粉丝 8
博文 14
码字总数 10888
作品 0
深圳
私信 提问
加载中

评论(5)

tojsp_com
tojsp_com 博主

引用来自“小弟求助”的评论

这根本就不是AJAX吧······

原生态的ajax好吧
小弟求助
这根本就不是AJAX吧······
林胤
为什么有些情况下,out.print的输出无法传递回来,而是会直接输出在界面上?
玄石
玄石
貌似这里的struts标题体现的不够强啊,此处使用的ajax非彼ajax。
log4j_zsj
log4j_zsj
web.xml还是需要配置struts2的filter的吧?
Web开发系列 - JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子...

长征2号
2017/01/05
0
0
纯Struts2 AJAX树实现方式及源码

在J2EE开发中不可避免会使用的树(Tree),一般情况有二种实现方式,第一种是初始化的时候将树信息就全部加载到内存中,这种方式适用于小数据或者性能要求不高的情况,优点是加载完后对服务器...

蜡笔小白
2014/02/23
77
0
如何结合struts2和json?

问题背景如题,即想将struts2和ajax结合起来使用,中间需要用到json传参。现遇到一些问题,弄了一天也没搞定,拿出来请教高手:其中一个特别头疼的问题就是: 在struts2的xml中,action的res...

Bisle
2011/06/05
952
6
struts2 json ajax如何使用

struts2 json ajax如何配置,最好发个实例给我,谢谢

赵伟
2012/07/25
529
2
Javascript异步编程-延迟对象篇

上篇文章中讲到,使用jquery的ajax方法操作ajax请求,会受到回调函数嵌套的问题。当然,jquery团队也发现了这个问题,在2011年,也就是jquery 1.5版本之后,jQuery.Deferred对象为解决这类问...

止水
09/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PostgreSQL 11.3 locking

rudi
42分钟前
5
0
Mybatis Plus sql注入器

一、继承AbstractMethod /** * @author beth * @data 2019-10-23 20:39 */public class DeleteAllMethod extends AbstractMethod { @Override public MappedStatement injectMap......

一个yuanbeth
今天
8
1
一次写shell脚本的经历记录——特殊字符惹的祸

本文首发于微信公众号“我的小碗汤”,扫码文末二维码即可关注,欢迎一起交流! redis在容器化的过程中,涉及到纵向扩pod实例cpu、内存以及redis实例的maxmemory值,statefulset管理的pod需要...

码农实战
今天
4
0
为什么阿里巴巴Java开发手册中不建议在循环体中使用+进行字符串拼接?

之前在阅读《阿里巴巴Java开发手册》时,发现有一条是关于循环体中字符串拼接的建议,具体内容如下: 那么我们首先来用例子来看看在循环体中用 + 或者用 StringBuilder 进行字符串拼接的效率...

武培轩
今天
8
0
队列-链式(c/c++实现)

队列是在线性表功能稍作修改形成的,在生活中排队是不能插队的吧,先排队先得到对待,慢来得排在最后面,这样来就形成了”先进先出“的队列。作用就是通过伟大的程序员来实现算法解决现实生活...

白客C
今天
78
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部