Ajax处理函数
2009-11-15 21:28 BlueDream 阅读(1680) 评论(1) 编辑 收藏 举报
// ================================ // // ==Ajax程序包, 不具备跨域能力== // 2009.11.15 // // ================================= // 包装XMLHttpRequest对象 if(typeof XMLHttpRequest == 'undefined') XMLHttpRequest = function(){ return new ActiveXObject( navigator.userAgent.indexOf('MSIE 5') >= 0 ? "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP" ); }; // 创建完整Ajax程序包 function ajax( options ){ options = { // HTTP 请求类型 type: options.type || "GET", // 请求的文件类型 dataType: options.dataType, // 请求的URL url: options.url || "", // 请求的超时时间 timeout: options.timeout || 5000, // 请求成功.失败或完成(无论成功失败都会调用)时执行的函数 onComplete: options.onComplete || function(){}, onError: options.onError || function(){}, onSuccess: options.onSuccess || function(){}, // 服务器端默认返回的数据类型 data: options.data || "" }; // 创建请求对象 var xml = new XMLHttpRequest(); // 初始化异步请求 xml.open(options.type, options.url, true); // 请求5秒 如果超时则放弃 var timeoutLength = options.timeout; // 记录请求是否成功完成 var requestDone = false; // 初始化一个5秒后执行的回调函数,用于取消请求 setTimeout(function(){ requestDone = true; }, timeoutLength); // 监听文档更新状态 xml.onreadystatechange = function(){ // 保持等待 只到数据全部加载 且没有超时 if(xml.readyState == 4 && !requestDone){ // 检查是否请求成功 if(httpSuccess(xml)){ // 以服务器返回的数据作为参数执行成功回调函数 options.onSuccess( httpData(xml, options.dataType )); }else{ options.onError(); } // 调用完成后的回调函数 options.onComplete(); // 避免内存泄露,清理文档 xml = null; } }; // 建立与服务器的链接 xml.send(); // 判断HTTP响应是否成功 function httpSuccess( r ){ try { // 如果得不到服务器状态,且我们正在请求本地文件,则认为成功 return !r.status && location.protocol == "file:" || // 所有200-300之间的状态码 表示成功 (r.status >= 200 && r.status <= 300) || // 文档未修改也算成功 r.status == 304 || // Safari在文档未修改的时候返回空状态 navigator.userAgent.indexOf('Safari') >= 0 && typeof r.status == "undefined"; }catch(e){} // 若检查状态失败,则假定请求是失败的 return false; } // 从HTTP响应中解析正确数据 function httpData(r, type){ // 获取content-type的头部 var ct = r.getResponseHeader("content-type"); // 如果没有提供默认类型, 判断服务器返回的是否是XML形式 var data = !type && ct && ct.indexOf('xml') >= 0; // 如果是XML则获得XML对象 否则返回文本内容 data = type == "xml" || data ? r.responseXML : r.responseText; // 如果指定类型是script,则以javascript形式执行返回文本 if(type == "script"){ eval.call(window, data); } // 返回响应数据 return data; } } // 数据串行化 支持两种不同的对象 // - 表单输入元素的数组 // - 键/值 对应的散列表 // - 返回串行化后的字符串 形式: name=john&password=test function serialize(a) { // 串行化结果存放 var s = []; // 如果是数组形式 [{name: XX, value: XX}, {name: XX, value: XX}] if(a.constructor == Array){ // 串行化表单元素 for(var i = 0; i < a.length; i++){ s.push(a[i].name + "=" + encodeURIComponent( a[i].value )); } // 假定是键/值对象 }else{ for( var j in a ){ s.push( j + "=" + encodeURIComponent( a[j] )); } } // 返回串行化结果 return s.join("&"); }
使用方式:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <script src="ajax.js"></script> <script type="text/javascript"> <!-- var param = { name: "john", value: "Resig", city: "Cambridge", zip: 02140 } window.onload = function(){ ajax({ url: "b.html?" + serialize(param), // 请求服务器的b.html type: "GET", dataType: "html", onSuccess: function( html ){ // 回调函数将返回的数据显示到DIV中 document.getElementById('odiv').innerHTML = html; } }); } //--> </script> </head> <body> <div id="odiv"></div> </body> </html>