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