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

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

前言

对于从事技术的人员来说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框架.