模仿JQuery封装ajax功能
需求分析
因为有时候想提高性能,只需要一个ajax函数,不想引入较大的jq文件,尝试过axios,可是get方法不支持多层嵌套的json,post方式后台接收方式似乎要变。。也许是我不太会用吧。。其实换个方式接收也没什么,只是习惯了JQ序列化参数。所以上网搜集了很多资料,同时也进一步了解了一点JQ。以下代码很多来自于网上,自己整合了一下。
封装代码
/**
* @Description: 模仿jQuery封装简单的ajax功能。
* @Author: kill370354@qq.com
**/ var Ajax = {};
(function($) {
function ajax(options) {
var str;
var xmlHttpRequest;
var timer;
if (window.XMLHttpRequest) {
xmlHttpRequest = new XMLHttpRequest();
} else {
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} var source = {
type: "GET",
processData: true,
contentType: "application/x-www-form-urlencoded"
};
options = mergeObject(source, options);
if (options.contentType.replace(/(^\s*)|(\s*$)/g, "") === "application/json") {
options.processData = false;
}
xmlHttpRequest = mergeObject(xmlHttpRequest, options.xhrFields);
if (options.type.toUpperCase() === "GET") {
str = param(mergeObject(urlorQuerytoObject(options.url), options.data));
if (options.url.indexOf("?") !== -1) {
options.url = options.url.substr(0, options.url.indexOf("?"));
}
xmlHttpRequest.open("GET", options.url + "?" + str, true);
xmlHttpRequest.send(null);
} else {
xmlHttpRequest.open(options.type.toUpperCase(), options.url, true);
xmlHttpRequest.setRequestHeader("Content-type", options.contentType);
if (options.processData) {
str = param(options.data);
} else {
str = options.data;
}
xmlHttpRequest.send(str);
}
xmlHttpRequest.onreadystatechange = function() {
var textStatus = "";
if (xmlHttpRequest.readyState === 4) {
clearInterval(timer);
if ((xmlHttpRequest.status >= 200 && xmlHttpRequest.status < 300) || xmlHttpRequest.status === 304) {
if (xmlHttpRequest.status === 304) {
textStatus = "notmodified";
} else {
textStatus = "success";
}
try {
// 如果是JSON格式,自动转换为JSON对象
options.success(JSON.parse(xmlHttpRequest.responseText), textStatus);
} catch (e) {
options.success(xmlHttpRequest.responseText, textStatus);
}
} else {
textStatus = "error";
if (typeof options.error === "function") {
options.error(xmlHttpRequest, textStatus);
}
}
if (typeof options.complete === "function") {
options.complete(xmlHttpRequest, textStatus);
}
}
};
//判断是否超时
if (typeof options.timeout === "number") {
timer = setTimeout(function() {
if (typeof options.error === "function") {
options.error(xmlHttpRequest, "timeout");
options.complete(xmlHttpRequest, "timeout");
}
if (typeof options.complete === "function") {
options.complete(xmlHttpRequest, "timeout");
}
xmlHttpRequest.abort();
}, options.timeout);
}
} // 合并对象
function mergeObject(target) {
if (target == null) {
throw new TypeError("Cannot convert undefined or null to object");
}
target = Object(target);
for (var index = 1; index < arguments.length; index++) {
var source = arguments[index];
if (source != null) {
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
}
return target;
} // 把url中的查询字符串转为对象,主要是想当方式为get时,用data对象的参数覆盖掉url中的参数
function urlorQuerytoObject(urlorQuery) {
var queryArr = [];
var urlSplit = urlorQuery.split("?");
queryArr[0] = urlSplit[0];
if (urlSplit[1]) {
queryArr[0] = urlSplit[1];
}
queryArr = queryArr[0].split("&");
var obj = {};
var i = 0;
var temp;
var key;
var value;
while (i < queryArr.length) {
temp = queryArr[i].split("=");
key = temp[0];
value = temp[1];
obj[key] = value;
i++;
}
return obj;
} // 序列化参数
// 转载自 https://www.jianshu.com/p/0ca22d53feea
function param(obj, traditional) {
if (traditional === "undefined") {
traditional = false;
}
var rbracket = /\[\]$/,
op = Object.prototype,
ap = Array.prototype,
aeach = ap.forEach,
ostring = op.toString; function isFunction(it) {
return ostring.call(it) === "[object Function]";
} function isArray(it) {
return ostring.call(it) === "[object Array]";
} function isObject(it) {
return ostring.call(it) === "[object Object]";
} function buildParams(prefix, obj, traditional, add) {
var name;
if (isArray(obj)) {
// Serialize array item.
aeach.call(obj, function(v, i) {
if (traditional || rbracket.test(prefix)) {
// Treat each array item as a scalar.
add(prefix, v);
} else {
// Item is non-scalar (array or object), encode its numeric index.
buildParams(
prefix + "[" + (typeof v === "object" && v != null ? i : "") + "]",
v,
traditional,
add
);
}
});
} else if (!traditional && isObject(obj)) {
// Serialize object item.
for (name in obj) {
buildParams(prefix + "[" + name + "]", obj[name], traditional, add);
}
} else {
// Serialize scalar item.
add(prefix, obj);
}
} // Serialize an array of form elements or a set of
// key/values into a query string
function jollyparam(a, traditional) {
var prefix,
s = [],
add = function(key, valueOrFunction) {
// If value is a function, invoke it and use its return value
var value = isFunction(valueOrFunction) ? valueOrFunction() : valueOrFunction;
s[s.length] = encodeURIComponent(key) + "=" + encodeURIComponent(value == null ? "" : value);
};
// If an array was passed in, assume that it is an array of form elements.
if (isArray(a)) {
// Serialize the form elements
aeach.call(a, function(item) {
add(item.name, item.value);
});
} else {
// If traditional, encode the "old" way (the way 1.3.2 or older
// did it), otherwise encode params recursively.
for (prefix in a) {
buildParams(prefix, a[prefix], traditional, add);
}
}
// Return the resulting serialization
return s.join("&");
} return jollyparam(obj, traditional);
} $ = {
get: function(url, data, success) {
return ajax({ url: url, data: data, success: success });
},
post: function(url, data, success) {
return ajax({
type: "POST",
url: url,
data: data,
success: success
});
},
ajax: ajax,
param: param,
urlorQuerytoObject: urlorQuerytoObject,
mergeObject: mergeObject
}; // 满足 JQuery 的使用习惯
if (typeof window.$ === "undefined") {
window.$ = $;
}
})(Ajax);
用法
高度模仿JQ。
// get请求
$.get("", {}, function(data) {}); // post请求
$.post("", {}, function(data) {}); // 更完整的ajax
$.ajax({
type: "post", // 非必须,默认 get
url: "",
data: { },
xhrFields: {
// 非必须,自定义 XHR 对象属性
withCredentials: true
},
processData: true, // 非必须,默认 true
contentType: "application/x-www-form-urlencoded", // 非必须,默认 application/x-www-form-urlencoded
success: function(responseData, textStatus) {
// textStatus : "success"、"notmodified"
},
// timeout: 1, // 非必须,超时毫秒数,如果设置了,超时且存在error函数则会调用
error: function(xhr, textStatus) {
// 非必须
// textStatus: "error"、"timeout"
},
complete: function(xhr, textStatus) {
// 非必须,无论成败最后均调用
// textStatus: "success"、"notmodified"、"error"、"timeout"
}
});
注意事项
1. 如果 " $ " 符号不能使用,请用 " Ajax " 替代,这个变量名若仍有冲突,请修改源代码首尾两行。
2. 如果返回的是json格式的字符串,会自动将字符串转为json对象传给success函数参数,其他情况均为字符串。
第一次发博客,经验不足,引用了许多别人的代码,只是这功能已经缠了我很多天了,今天终于相对完善了,如有不妥,还请多多指教!
模仿JQuery封装ajax功能的更多相关文章
- Ajax学习(二):模仿jQuery的Ajax封装工具
通过上一节的学习,基本了解Ajax的使用, 但是这样使用很麻烦,这里封装ajax为一个方法,作为一个ajax工具,传入相应参数就可以实现ajax的使用. 模仿jQuery的Ajax. 如下是jQuer ...
- 自己使用Jquery封装各种功能分享
自己使用Jquery封装各种功能分享: 左右滚动图片 瀑布流 流动显示列表 广告切换 头像切换And广告切换 获取搜索引擎的来源关键字 上面列表中展示的功能都是使用jquery进行封装实现的,希望大家 ...
- Jquery封装ajax
Jquery封装ajax Load方法 <!-- 将jquery.js导入进来 --> <script type="text/javascript&qu ...
- 模仿jQuery的ajax的封装
/* * 我们使用了ajax 的xmlHttpRequest 跟服务器进行交互. * * 交互了有四个基本步骤 * 1:创建对象 * 2:建立连接 * 3:发送请求 * 4:接收数据 * * 这些操作 ...
- Struts2 整合jQuery实现Ajax功能(1)
技术领域非常多东西流行,自然有流行的道理.这几天用了jQuery,深感有些人真是聪明绝顶,能将那么多技术融合的如此完美. 首先明白个概念: jQuery是什么:是使用javascript语言开发的,用 ...
- js源码 模仿 jquery的ajax的获取数据(get,post )的请求封装
function ajax(obj){ // 默认参数 var defaults = { type : 'get', data : {}, url : '#', dataType : 'text', ...
- Struts2 整合jQuery实现Ajax功能(2)
1.1.1 Action利用struts2-json-plugin-X.X.X.jar响应Json格式信息: 1. function removerecordbyid(recordid) ...
- JQuery封装ajax的方法
1.$.post方法 $.post(url[,data][,callback][,type]) url:请求的后台程序地址 data:发送到后台的数据 callback:载入成功时回调函数,该函数参数 ...
- Jquery和Ajax的关系!
Jquery是一种JavaScript框架,而Ajax(Asynchronous JavaScript and XML)是异步JavaScript和XML. Jquery是JavaScript的框架, ...
随机推荐
- 二、SQL Server 分页
一.SQL Server 分页 --top not in方式 select top 条数 * from tablename where Id not in (select top 条数*页数 Id f ...
- go语言从例子开始之Example37.Go 状态协程
在前面的例子中,我们用互斥锁进行了明确的锁定来让共享的state 跨多个 Go 协程同步访问.另一个选择是使用内置的 Go协程和通道的的同步特性来达到同样的效果.这个基于通道的方法和 Go 通过通信以 ...
- BigDecimal 算数
BigDecimal big=new BigDecimal("22.233"); BigDecimal big1=new BigDecimal("12.233" ...
- hive中为分区表增加字段需要注意默认不会修改已有分区的字段,导致查询时新增字段为null
若向hive表添加字段,通常会使用下面这种语句 alter table default.testparquet add columns(c8 string); 但是对于分区表来说, 1. 若新建的分区 ...
- Spring Boot 2.x:SpringBoot
几个重要的事件回调机制: 1.配置在META-INF/spring.factories ApplicationContextInitializer SpringApplicationRunlisten ...
- 【优化】MySQL千万级大表优化解决方案
问题概述 使用阿里云rds for MySQL数据库(就是MySQL5.6版本),有个用户上网记录表6个月的数据量近2000万,保留最近一年的数据量达到4000万,查询速度极慢,日常卡死.严重影响业务 ...
- python学习笔记(二)列表操作
列表及列表操作: 列表是最常用的数据类型之一,列表也叫数组,列表定义,使用[]即可:列表里面可以再套列表,一个里面套一个列表,叫二维数组:一个里面套一个列表,里面的列表再套一个列表,这个叫三位数组,套 ...
- php quotemeta()函数 语法
php quotemeta()函数 语法 作用:在预定义字符前添加反斜杠东莞直线电机 语法:quotemeta(string) 参数: 参数 描述 string 必须,需要处理的字符串 说明:该函数可 ...
- LOJ 2541 「PKUWC2018」猎人杀——思路+概率+容斥+分治
题目:https://loj.ac/problem/2541 看了题解才会……有三点很巧妙. 1.分母如果变动,就很不好.所以考虑把操作改成 “已经选过的人仍然按 \( w_i \) 的概率被选,但是 ...
- Fraction Comparision
题目链接 题意:输入x,a,y,b求x/a和y/b的大小,范围long long int 思路:因为不想用精度,嫌麻烦,所以用了个巧方法.先求x/a和y/b整形的大小,如果相等,再求(x%a)*b和( ...