ajax心得3--编写ajax同用工具代码以及案例分析

1. 初始化XMLHttpRequest对象模版
function   createXmlHttpRequest(){
   var xmlHttp;
   try{    //Firefox, Opera 8.0+, Safari
           xmlHttp=new XMLHttpRequest();
    }catch (e){
           try{    //Internet Explorer
                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e){
                  try{
                          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }catch (e){}  
           }
    }
   return xmlHttp;
 }
2.手动编写ajax通用工具代码
//通过id获取dom对象
function $(id) {
	return document.getElementById(id);
}

// ajax技术必须创建XMLHTTPRequest对象 ，获取XMLHTTPRequest对象的操作
function createXHR() {
	var xhr;
	var aVersion = [ "MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",
			"MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp" ];
	try {
		// 高版本ie、firefox、opera等浏览器直接new出ajax对象
		xhr = new XMLHttpRequest();
	} catch (e) {
		// 低版本的IE,ie6以下版本需要通过以下操作创建ajax对象
		for ( var i = 0; i < aVersion.length; i++) {
			try {
				xhr = new ActiveXObject(aVersion[i]);
				return xhr;
			} catch (e) {
				continue;
			}
		}
	}
	return xhr;
}
3.ajax处理分页技术案例
window.onload = function() {
	// 获取按钮对象
	var queryBtnDom = $("queryBtn");

	// 给按钮设置点击事件操作
	queryBtnDom.onclick = function() {

		var content = "pagination.nowPage=" + 1;
		var url = "./csdn/UserAction_query.action?time=" + new Date().getTime();
		// 调用ajax处理过的请求发送操作
		sendPost(content, url, managerSuccess, managerFail);

		// 处理成功的方法
		function managerSuccess(xhr) {
			// 创建出XML dom对象
			var XMLDom = xhr.responseXML;
			// 创建xml的跟对象
			var root = XMLDom.documentElement;
			// 获取跟对象的子节点
			var users = root.getElementsByTagName("user");
			// 显示数据操作
			showUsers(users);

			// 分页操作
			// 首页
			$("firstPage").onclick = function() {
				// 给请求的数据重新设一下值，然后重新发送一回请求
				content = "pagination.nowPage=" + 1;
				sendPost(content, url, managerSuccess, managerFail);
			};
			// 上一页
			$("backPage").onclick = function() {
				// 给请求的数据重新设一下值，然后重新发送一回请求
				content = "pagination.nowPage="
						+ eval(root.getAttribute("nowPage") + "-" + 1);
				sendPost(content, url, managerSuccess, managerFail);

			};
			// 下一页
			$("nextPage").onclick = function() {
				// 给请求的数据重新设一下值，然后重新发送一回请求
				content = "pagination.nowPage="
						+ eval(root.getAttribute("nowPage") + "+" + 1);
				sendPost(content, url, managerSuccess, managerFail);

			};
			// 末页
			$("lastPage").onclick = function() {
				// 给请求的数据重新设一下值，然后重新发送一回请求
				content = "pagination.nowPage="
						+ root.getAttribute("countPage");
				sendPost(content, url, managerSuccess, managerFail);
			};
		}

		function managerFail(xhr) {
			alert("处理失败");
		}

	};
};

// 封装一个创建Element元素的方法
function CE(tag) {
	return document.createElement(tag);
}
// 封装一个创建文本节点的方法
function CT(t) {
	return document.createTextNode(t);
}

// 发送请求的方法
function sendPost(content, url, success, fail) {
	var xhr = createXHR();
	// 触发器
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4) {
			if (xhr.status == 200 || xhr.status == 304) {
				success(xhr);
			} else {
				fail(xhr);
			}
		}
	};
	// 打开请求
	xhr.open("POST", url, true);
	// 设置类型
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	// 发送请求

	xhr.send(content);
	// };
}

// 显示数据的方法
function showUsers(users) {
	// 获取tbody的dom对象
	var tbodyDom = $("showUsers");
	// 清空数据
	if (tbodyDom.hasChildNodes()) {
		for ( var jj = 0; jj < tbodyDom.childNodes.length;) {
			tbodyDom.removeChild(tbodyDom.childNodes[jj]);
		}
	}

	// 遍历添加数据
	for ( var i = 0; i < users.length; i++) {
		var user = users[i];
		if (user.nodeType == 1) {
			// 创建tr元素节点
			var tr = CE("tr");

			// 创建td元素节点
			// 创建一个复选框节点
			var td1 = CE("td");
			var input = CE("input");
			// 为td1设置属性
			input.setAttribute("type", "checkbox");
			input.setAttribute("value", user.getAttribute("id"));

			var td2 = CE("td");
			var td3 = CE("td");
			var td4 = CE("td");
			var td5 = CE("td");
			var td6 = CE("td");
			var td7 = CE("td");

			// 将文本节点追加到td上;这里要注意不能使用方法链追加，否则界面会让你很难受
			td1.appendChild(input);
			td2.appendChild(CT(user.getAttribute("id")));
			td3
					.appendChild(CT(user.getElementsByTagName("name")[0].firstChild.nodeValue));
			td4
					.appendChild(CT(user.getElementsByTagName("sex")[0].firstChild.nodeValue));
			td5
					.appendChild(CT(user.getElementsByTagName("email")[0].firstChild.nodeValue));
			td6
					.appendChild(CT(user.getElementsByTagName("birthday")[0].firstChild.nodeValue));

			// 将td追加到tr上
			tr.appendChild(td1);
			tr.appendChild(td2);
			tr.appendChild(td3);
			tr.appendChild(td4);
			tr.appendChild(td5);
			tr.appendChild(td6);
			tr.appendChild(td7);
			// 将tr节点添加到tbody中
			tbodyDom.appendChild(tr);
		}
	}
}

用户名注册时使用ajax验证处理
window.οnlοad=function(){
	//根据id获取需要用ajax技术处理的数据的dom对象，util.js和reg.js位于同一包下，固可以相互引用
	var uNameDom = $("userName");
	//为uNameDom注册失去焦点的事件
	uNameDom.οnblur=function(){
		//将获取到的用户名名称封装成请求数据
		var content = "uName="+uNameDom.value;
		//设置请求路径，并通过时间戳的形式产生唯一url
		var url = "./csdn/UserAction_checkName.action?time="+new Date().getTime();
		//创建ajax对象
		var xhr = createXHR();
		
		//这里状态为0，状态吗的默认值是0，说明从0变1时才触发onreadystatechange事件
		//alert(xhr.readyState);
		//为xhr对象设置一个触发器事件，改事件服务器自己处理
		xhr.onreadystatechange=function(){
			//alert(xhr.readyState);状态从1-4执行
			if(xhr.readyState==4){
				if(xhr.status==200||xhr.status==304){
					$("name").innerHTML=xhr.responseText;
				}
			}
		};
		//打开请求
		xhr.open("POST",url,true);
		//如果是post请求需要进行如下操作，告诉浏览器正在发送符合url编码的数据;括号内一个单词不能错，错一个就不能将数据传给servlet了
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		//发送数据
		xhr.send(content);
	};
};

Action处理代码
package www.csdn.project.action;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import www.csdn.project.domain.User;
import www.csdn.project.service.UserService;
import www.csdn.project.service.UserServiceImpl;
import www.csdn.project.utils.Pagination;

import com.opensymphony.xwork2.ActionSupport;

public class UserAction extends ActionSupport {
	
	private String uName;
	
	//分页的当前页属性,这里一定要指明泛型所指向的类型，否则就会出错
	private Pagination<User> pagination;
	
	//声明一个事务对象
	private UserService service = new UserServiceImpl();

	// 通过ServletActionContext类获取response对象，将在action中的操作转向servlet的操作
	private HttpServletResponse response = ServletActionContext.getResponse();
	
	//声明一个输出对象
	private PrintWriter out;
	
	
	

	public Pagination<User> getPagination() {
		return pagination;
	}

	public void setPagination(Pagination<User> pagination) {
		this.pagination = pagination;
	}

	public String getUName() {
		return uName;
	}

	//一定要注意命名规范，set注入方法和get获值的方法首字母一定要大写，否则不起作用切记
	public void setUName(String uName) {
		this.uName = uName;
	}
	
	
	//登录操作
	public String login(){
		return SUCCESS;
	}

	//检查名字
	public String checkName() {
		
		response.setContentType("text/html;charset=utf-8");
		
		//实例化out对象
		try {
			out = response.getWriter();
		} catch (IOException e) {
			e.printStackTrace();
		}
		
		User entity = service.getObjectByName(uName);

		if (entity != null) {
			out.print("用户名已经存在");
		} else {
			out.print("用户名可以使用");
		}
		out.flush();
		out.close();
		return "reg";
	}
	
	
	//查找所有
	public String query(){
		
		response.setContentType("text/xml;charset=utf-8");
		System.out.println(pagination.getNowPage()+"====================");
		pagination = new Pagination<User>(User.class,pagination.getNowPage());
		//实例化out对象
		try {
			out = response.getWriter();
		} catch (IOException e) {
			e.printStackTrace();
		}

		//拼出xml文件，用来存放从数据库取出的数据
		out.println("<?xml version='1.0' encoding='UTF-8'?>");
		out.println("<users nowPage='"+pagination.getNowPage()+"' countPage='"+pagination.getCountPage()+"' countRecond='"+pagination.getCountRecond()+"'>");
		//遍历
		for(User entity: pagination.getEntities()){
			out.print("<user id='"+entity.getId()+"'>");
			out.print("<name>");
			out.print(entity.getName());
			out.print("</name>");
			out.print("<sex>");
			out.print(entity.getSex());
			out.print("</sex>");
			out.print("<birthday>");
			out.print(entity.getBirthday());
			out.print("</birthday>");
			out.print("<email>");
			out.print(entity.getEmail());
			out.print("</email>");
			out.print("</user>");
		}
		out.println("</users>");
		
		//刷新out对象，使数据不把缓存中存，直接显示
		out.flush();
		out.close();
		return "xml";
	}

}

分页显示界面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户管理界面</title>

<script type="text/javascript"
	src="${ pageContext.request.contextPath }/js/util.js"></script>

<script type="text/javascript"
	src="${ pageContext.request.contextPath }/js/user/query.js"></script>
</head>

<body>
	<div align="center">
		<div>
			<h3>用户管理界面</h3>
			<input type="button" value="会员管理" id="queryBtn" />
		</div>
		<hr>
		<div>
			<!-- 显示从数据库提取的信息然后放到一个xml中再取出遍历的数据 -->
			<h3>显示数据</h3>
			<table bordercolor="teal" border="1px" cellspacing="0"
				cellpadding="0" width="800px">
				<thead>
					<tr>
						<th>选择</th>
						<th>序号</th>
						<th>姓名</th>
						<th>性别</th>
						<th>邮箱</th>
						<th>生日</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="showUsers"></tbody>
			</table>
			<div>
			  <input type="button" value="首页" id="firstPage"/>
			  <input type="button" value="上一页" id="backPage"/>
			  <input type="button" value="下一页" id="nextPage"/>
			  <input type="button" value="末页" id="lastPage"/>
			</div>
		</div>
	</div>
</body>
</html>

首界面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">


<!--
	不能在同一个界面引用多个ajax判断的js，如果这样做会只让下面的js起作用，上面引用的js不在判断，
	但是可以在上面js没有window.onload方法的情况可以同存，并且还可以调用它
	-->


<script type="text/javascript"
	src="${ pageContext.request.contextPath }/js/util.js"></script>

<script type="text/javascript"
	src="${ pageContext.request.contextPath }/js/user/reg.js"></script>
</head>

<body>
	<div align="center">
		<div>
			<h3>后台管理登陆界面</h3>

			<s:form action="UserAction_login" namespace="/csdn" theme="simple">
				<table>
					<tr>
						<td>用户名：</td>
						<td><s:textfield id="userName" name="userName" /></td>
						<td style="color: red; font-size: 10px;" id="name"></td>
					</tr>
					<tr>
						<td>密码：</td>
						<td><s:password id="userPass" name="userPass" /></td>
						<td></td>
					</tr>
					<tr>
						<td>邮箱：</td>
						<td><s:textfield id="userEmail" name="userEmail" /></td>
						<td></td>
					</tr>
					<tr>
						<td colspan="3"><s:submit value="登录【注册】" />
						</td>
					</tr>
				</table>
			</s:form>
		</div>

	</div>
</body>
</html>

转载于:https://www.cnblogs.com/yangkai-cn/archive/2013/03/15/4016933.html