日期:2014-05-16 浏览次数:20669 次
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 td