封装 Ajax -常用工具函数

44次阅读

共计 7257 个字符，预计需要花费 19 分钟才能阅读完成。

在前端开发中，ajax 的重要性不言而喻，所以我开始试着封装自己专属 ajax1. 常规封装
/* 封装 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)
}
});
});
}

正文完
发表至： javascript
2019-01-24
 0
碰撞检测的向量实现
装饰器与元数据反射（1）方法装饰器
前端面试题 — JavaScript（二）
关于javascript:一文了解文件上传全过程18w字深度解析进阶必备