前端之家收集整理的这篇文章主要介绍了
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,managerFail);
};
// 上一页
$("backPage").onclick = function() {
// 给请求的数据重新设一下值，然后重新发送一回请求
content = "pagination.nowPage="
+ eval(root.getAttribute("nowPage") + "-" + 1);
sendPost(content,managerFail);
};
// 下一页
$("nextPage").onclick = function() {
// 给请求的数据重新设一下值，然后重新发送一回请求
content = "pagination.nowPage="
+ eval(root.getAttribute("nowPage") + "+" + 1);
sendPost(content,managerFail);
};
// 末页
$("lastPage").onclick = function() {
// 给请求的数据重新设一下值，然后重新发送一回请求
content = "pagination.nowPage="
+ root.getAttribute("countPage");
sendPost(content,managerFail);
};
}
function managerFail(xhr) {
alert("处理失败");
}
};
};
// 封装一个创建Element元素的方法
function CE(tag) {
return document.createElement(tag);
}
// 封装一个创建文本节点的方法
function CT(t) {
return document.createTextNode(t);
}
// 发送请求的方法
function sendPost(content,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",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;
//设置请求路径，并通过时间戳的形式产生唯一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",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>
