AJax技术

实现AJax技术的一般程序流程：

－前面页面触发事件调用javascript函数（通常是自定义函数）

－在js函数中编写代码创建XMLHttpRequest对象，提交部分数据到后台进行处理

－后台中使用java代码完成指定的业务逻辑并输出结果

－XMLHttpRequest获得后台执行的结果，即使调用程序员定义的JS响应函数进行善后工作

下面是一个以“用户你好”的小例子：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>实现Ajax技术</title>
<script language="javascript">
  var xmlHttpReq;
  function sendhelloworld(name){
	  
	  if(window.XMLHttpRequest){
		  xmlHttpReq = new XMLHttpRequest();
		  if(xmlHttpReq.overrideMimeType){
			  xmlHttpReq.overrideMimeType("text/xml");
		  }
	  }else if(window.ActiveXObject){
		   try{
			   xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
		   }catch(e){
			   xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
			   
		   }
	  }
	  if(!xmlHttpReq){
		  window.alter("该浏览器不支持XMLHttpRequest!");
		  return ;
	  }
	  
	  xmlHttpReq.open("post","helloworld1");//设置提交参数
	  xmlHttpReq.onreadystatechange = callbackhelloworld;//指示响应函数
	  xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	  xmlHttpReq.send("username="+name); //提交
  
  }
  
  function callbackhelloworld() {
	 
	if(xmlHttpReq.readyState == 4){
		 
		if(xmlHttpReq.status == 200){
			//
			//返回正常
			var res = xmlHttpReq.responseText;
			
			if(res.length>0){
				
				alert(res+"您好！");
			}
		}else{
			window.alert("页面请求异常");
		}
	}
}
</script>
</head>
<body>
<form name="f1" action="" method="post">
   用户名：<input type="text" name="username">
   
   <input type="button" value="确定" onclick="sendhelloworld(f1.username.value)">
</form>

</body>
</html>

package com.action;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

public class HelloWorld1Action {
  String username;

public String getUsername() {
	return username;
}

public void setUsername(String username) {
	this.username = username;
}
  public String execute() throws Exception {
	  //编码转换
	  String str = new String(username.getBytes("ISO8859_1"),"utf-8");
	  System.out.println(str);
	  //获得response对象
	  HttpServletResponse response = ServletActionContext.getResponse();
	  response.setCharacterEncoding("utf-8");
	  
	  PrintWriter pw = response.getWriter();
	  pw.print(str);
	  return null;
  }
}

    <action name="helloworld1" class="com.action.HelloWorld1Action">
      </action>

流程：我们首先用一个触发事件触发JS函数，这里用的是onclick（）函数并传入了一个username的参数，

编写JS的触发函数首先是获取XMLHttpRequest这个对象

下面的代码首先是根据不用的浏览器获取到其对应的XMLHttpRequest对象

<script language="javascript">
  var xmlHttpReq;
  function sendhelloworld(name){
	  
	  if(window.XMLHttpRequest){
		  xmlHttpReq = new XMLHttpRequest();
		  if(xmlHttpReq.overrideMimeType){
			  xmlHttpReq.overrideMimeType("text/xml");
		  }
	  }else if(window.ActiveXObject){
		   try{
			   xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
		   }catch(e){
			   xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
			   
		   }
	  }
	  if(!xmlHttpReq){
		  window.alter("该浏览器不支持XMLHttpRequest!");
		  return ;
	  }
	  
	  xmlHttpReq.open("post","helloworld1");//设置提交参数
	  xmlHttpReq.onreadystatechange = callbackhelloworld;//指示响应函数
	  xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	  xmlHttpReq.send("username="+name); //提交
  
  }
  
</script>

获取到XMLHttpRequest对象后，下面就是使用对象xmlHttpReq的相关方法进行提交，具体提交过程有3步。

1）设置提交参数。调用XMLHttpRequest对象的open方法来设置提交参数。

XMLHttpRequest对象.open("提交方式","提交地址");

2）指定响应函数。给XMLHttpRequest对象的onreadystatechange属性指定响应函数。

XMLHttpRequest对象.onreadystatechange=响应函数名；

3)进行提交。使用XMLHttpRequest对象的send方法进行提交

XMLHttpRequest对象.send("参数名1"＝参数值1&"参数名2"＝参数值2..."参数名n"＝参数值n);

在此在添加一个小步骤对中文乱码的处理

xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

然后就进行传参

在后台的处理代码解释

 public String execute() throws Exception {
	  //编码转换
	  String str = new String(username.getBytes("ISO8859_1"),"utf-8");
	  System.out.println(str);
	  //获得response对象
	  HttpServletResponse response = ServletActionContext.getResponse();
	  response.setCharacterEncoding("utf-8");

	  PrintWriter pw = response.getWriter();
	  pw.print(str);
	  return null;

获取response对对象，然后得到输出对象pw，使用输出对象pw输出信息

猜你喜欢