日期:2014-05-16  浏览次数:20614 次

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 td