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.onload=function(){//根据id获取需要用ajax技术处理的数据的dom对象，util.js和reg.js位于同一包下，固可以相互引用var uNameDom = $("userName");//为uNameDom注册失去焦点的事件uNameDom.onblur=function(){//将获取到的用户名名称封装成请求数据var content = "uName="+uNameDom.value;//设置请求路径，并通过时间戳的形式产生唯一urlvar 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>