源生ajax同步异步请求,Js之AJAX

前言

在日常工作中,我们经常使用Jquery的Ajax来获取接口数据。但是有的时候项目里面用不到Jquery，为了减少加载Jquery库的时间。也不用负担Jquery复杂的逻辑处理带来的性能消耗,所以我打算封装一个源生的Ajax函数

需求整理

一般来说前端与服务器的通信是使用XHR的,但是我希望封装的函数能有跨域的功能。所以我把JSONP整合进来了.

下面看主体功能图

功能图.png

输入参数

首先必须要定义个AJAX函数，并设置一些输入参数

function ajax(options){

var url = options.url || "", //请求的链接

type = (options.type || "get").toLowerCase(), //请求的方法,默认为get

data = options.data || null, //请求的数据

contentType = options.contentType || "", //请求头

dataType = options.dataType || "jsonp",

//请求的类型要是jsonp他利用得get 问号后面是?callback = 执行成功的方法 callback可以依照规矩修改

async = options.async === undefined && true, //是否异步，默认为true.

timeOut = options.timeOut, //超时时间。

before = options.before || function(){}, //发送之前执行的函数

error = options.error || function(){}, //错误执行的函数

success = options.success || function() {}; //请求成功的回调函数

}

参数表

参数表.jpg

调用

//var json = "name=garfield&age=18"; //字符串

var json ={"haha":[{"name":"张三"},{"age":"23"}]}; //大JSON包

ajax({

type:"post", //发送数据的类型

url:"index.php", //添加自己的接口链接

timeOut:5000, //过期时间

data:json, //发送的数据

before:function(){

console.log("发送成功") //发送之前要做的事情

},

success:function(str){ //接收到数据成功后

console.log(str);

},

error:function(status,statusText){ //如果出现错误后，第一个表示错误的状态 第二个表示错误的原因

console.log(status+"||"+statusText);

}

})

PHP接收

header("content-type:text/html; charset=utf-8");

$name = $_POST["haha"]; //对应的就是JSON的name

echo($name[0]["name"]);

?>

编码

一般来说发送到后端的数据，若是包括中文或者某些标点符号，就要对数据进行编码

如果data为字符串,通过&分割,对键名与键值分别编码

如果data为对象,把键值转化为字符串，在进行编码

由于encodeURIComponent不对+编码,所以只有使用replace方法手动编码

若是使用get方法或者JSONP,则数据是通过URL参数传到后台，所以手动添加数据到URL

//编码数据

function setData() {

//设置对象的遍码

function setObjData(data, parentName) {

function encodeData(name, value, parentName) {

var items = [];

name = parentName === undefined ? name : parentName + "[" + name + "]";

if (typeof value === "object" && value !== null) {

items = items.concat(setObjData(value, name));

} else {

name = encodeURIComponent(name);

value = encodeURIComponent(value);

items.push(name + "=" + value);

}

return items;

}

var arr = [],value;

if (Object.prototype.toString.call(data) == '[object Array]') {

for (var i = 0, len = data.length; i < len; i++) {

value = data[i];

arr = arr.concat(encodeData( typeof value == "object"?i:"", value, parentName));

}

} else if (Object.prototype.toString.call(data) == '[object Object]') {

for (var key in data) {

value = data[key];

arr = arr.concat(encodeData(key, value, parentName));

}

}

return arr;

};

//设置字符串的遍码，字符串的格式为：a=1&b=2;

function setStrData(data) {

var arr = data.split("&");

for (var i = 0, len = arr.length; i < len; i++) {

name = encodeURIComponent(arr[i].split("=")[0]);

value = encodeURIComponent(arr[i].split("=")[1]);

arr[i] = name + "=" + value;

}

return arr;

}

if (data) {

if (typeof data === "string") {

data = setStrData(data);

} else if (typeof data === "object") {

data = setObjData(data);

}

data = data.join("&").replace("/%20/g", "+");

//若是使用get方法或JSONP，则手动添加到URL中

if (type === "get" || dataType === "jsonp") {

url += url.indexOf("?") > -1 ? (url.indexOf("=") > -1 ? "&" + data : data) : "?" + data;

}

}

}

XMLHttpRequerst

创建XHR对象 ，并对IE进行兼容性处理

调用XHR的open方法，设置请求的方法,请求的链接,是否异步

设置请求头

添加监听,如果成功则返回success函数，报错则执行error函数

调用XHR的send方法,发送数据。如果get方法,我们通过setData方法把数据添加到URL中了，这里data设置为null

// XHR

function createXHR() {

//由于IE6的XMLHttpRequest对象是通过MSXML库中的一个ActiveX对象实现的。

//所以创建XHR对象，需要在这里做兼容处理。

function getXHR() {

if (window.XMLHttpRequest) {

return new XMLHttpRequest();

} else {

//遍历IE中不同版本的ActiveX对象

var versions = ["Microsoft", "msxm3", "msxml2", "msxml1"];

for (var i = 0; i < versions.length; i++) {

try {

var version = versions[i] + ".XMLHTTP";

return new ActiveXObject(version);

} catch (e) {}

}

}

}

//创建对象。

xhr = getXHR();

xhr.open(type, url, async);

//设置请求头

if (type === "post" && !contentType) {

//若是post提交，则设置content-Type 为application/x-www-four-urlencoded

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");

} else if (contentType) {

xhr.setRequestHeader("Content-Type", contentType);

}

//添加监听

xhr.onreadystatechange = function() {

if (xhr.readyState === 4) {

if (timeOut !== undefined) {

//由于执行abort()方法后，有可能触发onreadystatechange事件，

//所以设置一个timeout_bool标识，来忽略中止触发的事件。

if (timeout_bool) {

return;

}

clearTimeout(timeout_flag);

}

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

success(xhr.responseText);

} else {

error(xhr.status, xhr.statusText);

}

}

};

//发送请求

xhr.send(type === "get" ? null : data);

setTime(); //请求超时

}

JSONP

创建script标签

设置回调函数名称

监听回调函数

设置URL,并添加到文档中

function createJsonp() {

var script = document.createElement("script"),

timeName = new Date().getTime() + Math.round(Math.random() * 1000),

callback = "JSONP_" + timeName;

window[callback] = function(data) {

clearTimeout(timeout_flag);

document.body.removeChild(script);

success(data);

}

script.src = url + (url.indexOf("?") > -1 ? "&" : "?") + "callback=" + callback;

script.type = "text/javascript";

document.body.appendChild(script);

setTime(callback, script);

}

超时请求

设置一个全局的定时器标识，用来在回调函数中清除定时器

JSONP

传入两个参数,一个是回调函数名,一个是script标签

超时以后，移除监听函数,移除script标签

XHR

超时之后,调用XHR的about方法,停止请求

由于执行about()方法后,有可能触发onreadystatechange事件，所以设置一个timeout_bool标识,来忽略终止触发的事件.

//设置请求超时

function setTime(callback, script) {

if (timeOut !== undefined) {

timeout_flag = setTimeout(function() {

if (dataType === "jsonp") {

delete window[callback];

document.body.removeChild(script);

} else {

timeout_bool = true;

xhr && xhr.abort();

}

console.log("timeout");

}, timeOut);

}

}

全部代码

/**

* Created by Administrator on 2017/4/12.

* 自己封装了一个AJAX小类库

*/

(function(window,undefined) {

function ajax(options) {

//编码数据

function setData() {

//设置对象的遍码

function setObjData(data, parentName) {

function encodeData(name, value, parentName) {

var items = [];

name = parentName === undefined ? name : parentName + "[" + name + "]";

if (typeof value === "object" && value !== null) {

items = items.concat(setObjData(value, name));

} else {

name = encodeURIComponent(name);

value = encodeURIComponent(value);

items.push(name + "=" + value);

}

return items;

}

var arr = [],value;

if (Object.prototype.toString.call(data) == '[object Array]') {

for (var i = 0, len = data.length; i < len; i++) {

value = data[i];

arr = arr.concat(encodeData( typeof value == "object"?i:"", value, parentName));

}

} else if (Object.prototype.toString.call(data) == '[object Object]') {

for (var key in data) {

value = data[key];

arr = arr.concat(encodeData(key, value, parentName));

}

}

return arr;

};

//设置字符串的遍码，字符串的格式为：a=1&b=2;

function setStrData(data) {

var arr = data.split("&");

for (var i = 0, len = arr.length; i < len; i++) {

name = encodeURIComponent(arr[i].split("=")[0]);

value = encodeURIComponent(arr[i].split("=")[1]);

arr[i] = name + "=" + value;

}

return arr;

}

if (data) {

if (typeof data === "string") {

data = setStrData(data);

} else if (typeof data === "object") {

data = setObjData(data);

}

data = data.join("&").replace("/%20/g", "+");

//若是使用get方法或JSONP，则手动添加到URL中

if (type === "get" || dataType === "jsonp") {

url += url.indexOf("?") > -1 ? (url.indexOf("=") > -1 ? "&" + data : data) : "?" + data;

}

}

}

// JSONP

function createJsonp() {

var script = document.createElement("script"),

timeName = new Date().getTime() + Math.round(Math.random() * 1000),

callback = "JSONP_" + timeName;

window[callback] = function(data) {

clearTimeout(timeout_flag);

document.body.removeChild(script);

success(data);

}

script.src = url + (url.indexOf("?") > -1 ? "&" : "?") + "callback=" + callback;

script.type = "text/javascript";

document.body.appendChild(script);

setTime(callback, script);

}

//设置请求超时

function setTime(callback, script) {

if (timeOut !== undefined) {

timeout_flag = setTimeout(function() {

if (dataType === "jsonp") {

delete window[callback];

document.body.removeChild(script);

} else {

timeout_bool = true;

xhr && xhr.abort();

}

console.log("timeout");

}, timeOut);

}

}

// XHR

function createXHR() {

//由于IE6的XMLHttpRequest对象是通过MSXML库中的一个ActiveX对象实现的。

//所以创建XHR对象，需要在这里做兼容处理。

function getXHR() {

if (window.XMLHttpRequest) {

return new XMLHttpRequest();

} else {

//遍历IE中不同版本的ActiveX对象

var versions = ["Microsoft", "msxm3", "msxml2", "msxml1"];

for (var i = 0; i < versions.length; i++) {

try {

var version = versions[i] + ".XMLHTTP";

return new ActiveXObject(version);

} catch (e) {}

}

}

}

//创建对象。

xhr = getXHR();

xhr.open(type, url, async);

//设置请求头

if (type === "post" && !contentType) {

//若是post提交，则设置content-Type 为application/x-www-four-urlencoded

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");

} else if (contentType) {

xhr.setRequestHeader("Content-Type", contentType);

}

//添加监听

xhr.onreadystatechange = function() {

if (xhr.readyState === 4) {

if (timeOut !== undefined) {

//由于执行abort()方法后，有可能触发onreadystatechange事件，

//所以设置一个timeout_bool标识，来忽略中止触发的事件。

if (timeout_bool) {

return;

}

clearTimeout(timeout_flag);

}

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

success(xhr.responseText);

} else {

error(xhr.status, xhr.statusText);

}

}

};

//发送请求

xhr.send(type === "get" ? null : data);

setTime(); //请求超时

}

var url = options.url || "", //请求的链接

type = (options.type || "get").toLowerCase(), //请求的方法,默认为get

data = options.data || null, //请求的数据

contentType = options.contentType || "", //请求头

dataType = options.dataType || "", //请求的类型

async = options.async === undefined ? true : options.async, //是否异步，默认为true.

timeOut = options.timeOut, //超时时间。

before = options.before || function() {}, //发送之前执行的函数

error = options.error || function() {}, //错误执行的函数

success = options.success || function() {}; //请求成功的回调函数

var timeout_bool = false, //是否请求超时

timeout_flag = null, //超时标识

xhr = null; //xhr对角

setData();

before();

if (dataType === "jsonp") {

createJsonp();

} else {

createXHR();

}

}

window.ajax = ajax;

})(window);

上面就是封装好的AJAX类库。可以拿来直接使用，支持IE和跨域

源码见这里