{function} 将事件处理程序压入事件队列,并绑定DOMContentLoaded * 如果DOM加载已经完成，则立即执行 */ function domReady(fn){ if (isReady) { fn.call(window); } else{ eventQueue.push(fn); }; bindReady(); }; /*domReady事件绑定 * null 现代浏览器通过addEvListener绑定DOMContentLoaded,包括ie9+ ie6-8通过判断doScroll判断DOM是否加载完毕 domReady() */ function bindReady(){ if (isReady) return; if (isBind) return; isBind = true; if (window.addEventListener) { document.addEventListener('DOMContentLoaded',execFn,false); } else if (window.attachEvent) { doScroll(); }; }; /*doScroll判断ie6-8的DOM是否加载完成 * null doScroll判断DOM是否加载完成 bindReady() */ function doScroll(){ try{ document.documentElement.doScroll('left'); } catch(error){ return setTimeout(doScroll,20); }; execFn(); }; /*执行事件队列 * null 循环执行队列中的事件处理程序 bindReady() */ function execFn(){ if (!isReady) { isReady = true; for (var i = 0; i < eventQueue.length; i++) { eventQueue[i].call(window); }; eventQueue = []; }; }; //js文件1 domReady(function(){ }); //js文件2 domReady(function(){ }); //注意，如果是异步加载的js就不要绑定domReady方法，不然函数不会执行， //因为异步加载的js下载之前，DOMContentLoaded已经触发，addEventListener执行时已经监听不到了

4037"> var createAjax = function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("microsoft.xmlhttp"); } catch (e1) { try { //非IE浏览器 xhr = new XMLHttpRequest(); } catch (e2) { window.alert("您的浏览器不支持ajax，请更换！"); } } return xhr; };

函数可选 var success = conf.success; if (type == null){ //type参数可选，默认为get type = "get"; } if (dataType == null){ //dataType参数可选，默认为text dataType = "text"; } // 创建ajax引擎对象 var xhr = createAjax(); // 打开 xhr.open(type,url,true); // 发送 if (type == "GET" || type == "get") { xhr.send(null); } else if (type == "POST" || type == "post") { xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); xhr.send(data); } xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { if(dataType == "text"||dataType=="TEXT") { if (success != null){ //普通文本 success(xhr.responseText); } }else if(dataType=="xml"||dataType=="XML") { if (success != null){ //接收xml文档 success(xhr.responseXML); } }else if(dataType=="json"||dataType=="JSON") { if (success != null){ //将json字符串转换为js对象 success(eval("("+xhr.responseText+")")); } } } }; };

", data:"name=dipoo&info=good", dataType:"json", success:function(data){ alert(data.name); } });

增加对请求失败的处理，虽然这个功能用处不太大，但研究了各个浏览器下script的差异性 * 1,IE6/7/8 支持script的onreadystatechange事件 * 2,IE9/10 支持script的onload和onreadystatechange事件 * 3,Firefox/Safari/Chrome/Opera支持script的onload事件 * 4,IE6/7/8/Opera 不支持script的onerror事件; IE9/10/Firefox/Safari/Chrome支持 * 5,Opera虽然不支持onreadystatechange事件,但其具有readyState属性.这点甚是神奇 * 6,用IE9和IETester测试IE6/7/8，其readyState总为loading,loaded。没出现过complete。 * * 最后的实现思路： * 1,IE9/Firefox/Safari/Chrome 成功回调使用onload事件，错误回调使用onerror事件 * 2,Opera 成功回调也使用onload事件（它压根不支持onreadystatechange），由于其不支持onerror，这里使用了延迟处理。 * 即等待与成功回调success，success后标志位done置为true。failure则不会执行，否则执行。 * 这里延迟的时间取值很有技巧，之前取2秒，在公司测试没问题。但回家用3G无线网络后发现即使所引用的js文件存在，但由于 * 网速过慢，failure还是先执行了，后执行了success。所以这里取5秒是比较合理的。当然也不是绝对的。 * 3,IE6/7/8 成功回调使用onreadystatechange事件，错误回调几乎是很难实现的。也是最有技术含量的。 * 参考了 * 使用nextSibling，发现不能实现。 * 令人恶心的是，即使请求的资源文件不存在。它的readyState也会经历“loaded”状态。这样你就没法区分请求成功或失败。 * 怕它了，最后使用前后台一起协调的机制解决最后的这个难题。无论请求成功或失败都让其调用callback(true)。 * 此时已经将区别成功与失败的逻辑放到了callback中，如果后台没有返回jsonp则调用failure，否则调用success。 * * * 接口 * Sjax.load(url,{ * data // 请求参数 (键值对字符串或js对象) * success // 请求成功回调函数 * failure // 请求失败回调函数 * scope // 回调函数执行上下文 * timestamp // 是否加时间戳 * }); * */ Sjax = function(win){ var ie678 = !-[1,], opera = win.opera, doc = win.document, head = doc.getElementsByTagName('head')[0], timeout = 3000, done = false; function _serialize(obj){ var a = [],key,val; for(key in obj){ val = obj[key]; if(val.constructor == Array){ for(var i=0,len=val.length;i

调用方式如下：

• 上一篇：JS+CSS实现Div弹出窗口同时背景变暗下一篇：JS实现可缩放、拖动、关闭和最小化