js封装 Ajax ——常用工具函数
在前端开发中，ajax的重要性不言而喻，所以我开始试着封装自己专属ajax
1.常规封装
/* 封装ajax函数
* @param {string}opt.method http连接的方式，包括POST和GET两种方式
* @param {string}opt.url 发送请求的url
* @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
* @param {object}opt.data 发送的参数，格式为对象类型
* @param {function}opt.success ajax发送并接收成功调用的回调函数
*/
/*1常规封装*/
function ajax(opt) {
opt = opt || {};
opt.method = opt.method.toUpperCase() || "GET"; //GET：用"GET"方式发送数据,只能256KB;POST：用"POST"方式发送数据,可以大到4MB
opt.url = opt.url || "";
opt.async = opt.async || true; //同步异步
opt.dataType = opt.dataType || "text"; //所传的数的数据类型
opt.contentType = opt.contentType || "application/x-www-form-urlencoded; charset=utf-8"; //默认表单格式 opt.dataType='json'
opt.data = opt.data || null;
var xmlHttp = getXmlHttp(); //获取XML 对象
var postData = getAjaxParama(opt.data); //data
if (opt.contentType === "application/json;charset=utf-8" && opt.dataType === "json") {
postData = JSON.stringify(opt.data); //转化为字符串
}
if (opt.method === 'POST') {
xmlHttp.open(opt.method, opt.url, opt.async);
xmlHttp.setRequestHeader('Content-Type', opt.contentType); //而POST请求需要设置请求头，用来传递参数
} else if (opt.method === 'GET') {
postData = opt.url.indexOf("?") >= 0 ? "&" + postData : "?" + postData; //GET请求，参数是拼接到url上面；
xmlHttp.open(opt.method, opt.url + postData, opt.async);
postData = null; //重置参数
}
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
var status = xmlHttp.status;
if (status >= 200 && status < 300) {
opt.success && opt.success(xmlHttp.responseText);
} else {
opt.error && opt.error(status);
}
}
};
xmlHttp.send(postData);
function getXmlHttp() {
var obj = null;
//非IE浏览器创建XmlHttpRequest对象
if (window.XMLHttpRequest) obj = new XMLHttpRequest();
//IE浏览器创建XmlHttpRequest对象
if (window.ActiveXObject) {
try {
obj = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
try {
obj = new ActiveXObject("msxml2.XMLHTTP");
} catch (ex) {}
}
}
return obj;
}
function getAjaxParama(data) {
var params = [];
for (var key in data) {
params.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
return params.join('&'); //添加&字符串
}
}2.自定义封装
/**
* [ajax封装ajax函数]
* @Author Linada
* @DateTime 2017-12-19T16:16:32+0800
* @param {string} opt.method [http连接的方式，包括POST和GET两种方式]
* @param {string} opt.url [发送请求的url]
* @param {boolean} opt.async [是否为异步请求，true为异步的，false为同步的]
* @param {object} opt.data [发送的参数，格式为对象类型]
* @param {function} opt.success [ajax发送并接收成功调用的回调函数]
*/
;(function (undefined) {
"use strict"
var _global;
var umeAjax = {
ajax: function (opt) {
opt = opt || {};
opt.method = opt.method.toUpperCase() || "GET"; //GET：用"GET"方式发送数据,只能256KB;POST：用"POST"方式发送数据,可以大到4MB
opt.url = opt.url || "";
opt.async = opt.async || true; //同步异步
opt.dataType = opt.dataType || "text"; //所传的数的数据类型
opt.contentType = opt.contentType || "application/x-www-form-urlencoded; charset=utf-8"; //默认表单格式 opt.dataType='json'
opt.data = opt.data || null;
var xmlHttp = getXmlHttp(); //获取XML 对象
var postData = getAjaxParama(opt.data); //data
if (opt.contentType === "application/json;charset=utf-8" && opt.dataType === "json") {
postData = JSON.stringify(opt.data); //转化为字符串
}
if (opt.method === 'POST') {
xmlHttp.open(opt.method, opt.url, opt.async);
xmlHttp.setRequestHeader('Content-Type', opt.contentType); //而POST请求需要设置请求头，用来传递参数
} else if (opt.method === 'GET') {
postData = opt.url.indexOf("?") >= 0 ? "&" + postData : "?" + postData; //GET请求，参数是拼接到url上面；
xmlHttp.open(opt.method, opt.url + postData, opt.async);
postData = null; //重置参数
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
var status = xmlHttp.status;
if (status >= 200 && status < 300) {
opt.success && opt.success(xmlHttp.responseText);
} else {
opt.error && opt.error(status);
}
}
};
xmlHttp.send(postData);
},
}
function getXmlHttp() {
var obj = null;
//非IE浏览器创建XmlHttpRequest对象
if (window.XMLHttpRequest) obj = new XMLHttpRequest();
//IE浏览器创建XmlHttpRequest对象
if (window.ActiveXObject) {
try {
obj = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
try {
obj = new ActiveXObject("msxml2.XMLHTTP");
} catch (ex) {
}
}
}
return obj;
}
function getAjaxParama(data) {
var params = [];
for (var key in data) {
params.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
}
return params.join('&'); //添加&字符串
}
// 最后将插件对象暴露给全局对象
_global = (function () {
return this || (0, eval)('this');
}());
if (typeof module !== "undefined" && module.exports) {
module.exports = umeAjax;
} else if (typeof define === "function" && define.amd) {
define(function () {
return umeAjax;
});
} else {
!('umeAjax' in _global) && (_global.umeAjax = umeAjax);
}
}());3.使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>js测试</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<meta name="description" content="my fortune" />
<style>
html {
font-size: 24px!important;
padding-bottom: 0;
}
</style>
</head>
<body>
<div id="ajax">
</div>
<script src="./ajax.js"></script>
<script type="text/javascript">
var country = "US";
var lan = "en";
var news_url = "https://contentapi.celltick.com/mediaApi/v1.0/notification";
ajax({
method: "GET",
data: {
publisherId: "ZTE-Push",
key: "ZPaP5GSQzmg41tHF0h7Jv0u2SOuH4OM4",
limit: 10,
userId: "572776656",
countryCode: country,
lanuguage: lan
},
url: news_url,
success: function(response) {
//console.log(response);
document.getElementById("ajax").innerHTML=response;
},
error: function(e) {
console.log(e);
}
});
</script>
<script src="./ajax.fn.js"></script>
<script type="text/javascript">
umeAjax.ajax({
method: "GET",
data: {
publisherId: "ZTE-Push",
key: "ZPaP5GSQzmg41tHF0h7Jv0u2SOuH4OM4",
limit: 10,
userId: "572776656",
countryCode: country,
lanuguage: lan
},
url: news_url,
success: function(response) {
console.log("umeAjax: "+response.length);
},
error: function(e) {
console.log(e);
}
});
var getAdUrl = "http://browser.umeweb.com/cn_ume_api/ads/api/request"; //ajax参数
umeAjax.ajax({
method: 'POST',
url: getAdUrl,
contentType: "application/json;charset=utf-8",
data:{
"app": {
"sdk_channel": "",
"app_id": "",
"app_version": "",
"app_package": ""
},
"addes": [{
"ad_type": 2,
"impression_num": 3,
"ad_slot": 2,
"ad_width": 0,
"ad_height": 0
}],
"device": {
"screen_width": 1280,
"screen_height": 720,
"os_type": 2,
"imei": "864783024054476",
"device_type": 2,
"androidid": "f58d85c248c37836",
"model": "HLANOTE1-L",
"os_version": "",
"hardware": "mt6752",
"display": "HLANOTE1-L-V1.0",
"total_rom": "3047200",
"board": "techain6752_lt_kk",
"total_ram": "1961972",
"product": "HLANOTE1-L",
"manufacturer": "YUSUN",
"device": "HLANOTE1-L",
"brand": "YUSUN",
"mac": "e8:92:a4:99:6f:00"
},
"user": {
"ip": "115.239.210.20",
"uid": "",
"imsi": "460016131813183",
"networktype": 1,
"lang": "zh_CN"
}
},
dataType: 'json',
success: function(data) {
var obj = JSON.parse(data);
if (obj.retcode == "0" && obj.ads.length > 0) {
console.info("广告API请求成功："+ JSON.stringify(obj));
} else {
console.info("请求成功，数据异常 ："+ JSON.stringify(obj));
}
},
fail: function(e) {
console.info("请求错误，错误信息："+e);
}
});
</script>
</body>
</html>4.拓展
封装post方式的promise的ajax插件
/*
*promise
* 用Promise封装一个post请求的方法
*/
function postJSON(url, data) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/json;charset=utf-8");
xhr.onreadystatechange = function() {
if (this.readyState === 4) {
if (this.status === 200) {
resolve(JSON.parse(this.responseText), this);
//debug_print("ajaxPromise(param) success: " +this.responseText);
} else {
var resJson = {
code: this.status,
response: this.response
};
reject(resJson, this);
}
}
};
xhr.send(JSON.stringify(data));
});
}
// 用Promise封装一个get请求的方法,基于ajax
function ajaxPromise(param) {
return new Promise(function (resolve, reject) {
$.ajax({
url: param.url,
type: 'get',
data: param.data || '',
success: function (data) {
//console.info(data);
debug_print("ajaxPromise(param) success: " + JSON.stringify(data));
resolve(data);
},
error: function (error) {
//console.info(error);
debug_print("ajaxPromise(param) error: " + JSON.stringify(error));
reject(error)
}
});
});
} 相关推荐
坚持着执着 2020-06-16
风萧萧梦潇 2020-06-06
88570299 2020-06-05
TONIYH 2020-06-05
坚持着执着 2020-07-16
坚持着执着 2020-06-14
chongxiaocheng 2020-08-16
ppsurcao 2020-06-14
lyqdanang 2020-08-16
kentrl 2020-11-10
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
ajaxhe 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22