首页 > 代码库 > 封装ajax支持get、post
封装ajax支持get、post
为什么要封装ajax,因为……
for(var i=0;i<20;i++){
$.ajax(……)
}
的时候,整个页面都卡死了,于是,我开始找答案。
后来,找到了,就是jquery的ajax属于全局,当上文不执行完毕,其他的都动不了。于是乎有了封装ajax,将ajax作为局部使用,即可解决掉。
function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || "json"; var params = formatParams(options.data); var xhr; //第一步 if (window.ActiveXObject) {//返回true为ie浏览器内核,否则不是ie内核 //为ie内核创建传输对象的方式 xhr = new window.ActiveXObject("Microsoft.XMLHTTP"); } else { //为非ie 内核浏览器创建传输对象的方式 xhr = new XMLHttpRequest(); } //接收 - 第三步 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { var status = xhr.status; if (status >= 200 && status < 300) { options.success && options.success(xhr.responseText, xhr.responseXML); } else { options.error && options.error(status); } } } //连接 和 发送 - 第二步 if (options.type == "GET") { xhr.open("GET", options.url + "?" + params, true); xhr.send(null); } else if (options.type == "POST") { xhr.open("POST", options.url, true); //设置表单提交时的内容类型 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(params); } } //格式化参数 function formatParams(data) { var arr = []; for (var name in data) { arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name])); } arr.push(("v=" + Math.random()).replace(".", "")); return arr.join("&"); }
还有一个精简后的
function ajax(opt) { opt = opt || {}; opt.method = opt.method.toUpperCase() || ‘POST‘; opt.url = opt.url || ‘‘; opt.async = opt.async || true; opt.data = http://www.mamicode.com/opt.data || null;>
但是呢,如果用惯了jq的,我们其实也可以这样封装
function ajax(){ var ajaxData = http://www.mamicode.com/{ "GET", url:arguments[0].url || "", async:arguments[0].async || "true", data:arguments[0].data || null, dataType:arguments[0].dataType || "text", contentType:arguments[0].contentType || "application/x-www-form-urlencoded", beforeSend:arguments[0].beforeSend || function(){}, success:arguments[0].success || function(){}, error:arguments[0].error || function(){} } ajaxData.beforeSend() var xhr = createxmlHttpRequest(); xhr.responseType=ajaxData.dataType; xhr.open(ajaxData.type,ajaxData.url,ajaxData.async); xhr.setRequestHeader("Content-Type",ajaxData.contentType); xhr.send(convertData(ajaxData.data)); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if(xhr.status == 200){ ajaxData.success(xhr.response) }else{ ajaxData.error() } } } } function createxmlHttpRequest() { if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { return new XMLHttpRequest(); } } function convertData(data){ if( typeof data =http://www.mamicode.com/== ‘object‘ ){ "" ; for(var c in data){ convertResult+= c + "=" + data[c] + "&"; } convertResult=convertResult.substring(0,convertResult.length-1) return convertResult; }else{ return data; } }
调用方法就很简单了,看看需要的参数就知道了。
封装ajax支持get、post
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。