摘要:一直在用方法来写请求,用的多了,不免对这其中是怎么实现的产生了兴趣,于是乎,小弟闲来无聊研究了一下原生实现请求,网上看了很多前辈们的关于请求的封装方法,也借鉴了很多经验,于是乎就出现了小弟的一个原生封装的版本,希望大家看了之后能够明白,下面
一直在用jQuery方法来写ajax请求,用的多了,不免对这其中是怎么实现的产生了兴趣,于是乎,小弟闲来无聊研究了一下原生实现ajax请求,网上看了很多前辈们的关于ajax请求的封装方法,也借鉴了很多经验,于是乎就出现了小弟的一个原生JS封装ajax的版本,希望大家看了之后能够明白,下面就是我实现的方法,其中的注释很清晰,方便大家的理解。
/**
* 对封装好的ajax请求进行调用
* */
ajax({
url:"", //请求地址
type:"GET", //请求方式
data:{name:"zhangsan",age :"23",email:"2372734044@qq.com"}, //请求参数
dataType:"json", // 返回值类型的设定
async:false, //是否异步
success:function (response,xml) {
console.log(response); // 此处执行请求成功后的代码
},
fail:function (status) {
console.log("状态码为"+status); // 此处为执行成功后的代码
}
});
function ajax(options) {
/**
* 传入方式默认为对象
* */
options = options || {};
/**
* 默认为GET请求
* */
options.type = (options.type || "GET").toUpperCase();
/**
* 返回值类型默认为json
* */
options.dataType = options.dataType || "json";
/**
* 默认为异步请求
* */
options.async = options.async || true;
/**
* 对需要传入的参数的处理
* */
var params = getParams(options.data);
var xhr;
/**
* 创建一个 ajax请求
* W3C标准和IE标准
*/
if (window.XMLHttpRequest){
/**
* W3C标准
* */
xhr = new XMLHttpRequest();
}else{
/**
* IE标准
* @type {ActiveXObject}
*/
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
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.fail && options.fail(status);
}
}
};
if (options.type == "GET"){
xhr.open("GET",options.url + "?" + params ,options.async);
xhr.send(null)
}else if (options.type == "POST"){
/**
*打开请求
* */
xhr.open("POST",options.url,options.async);
/**
* POST请求设置请求头
* */
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
/**
* 发送请求参数
*/
xhr.send(params);
}
}
/**
* 对象参数的处理
* @param data
* @returns {string}
*/
function getParams(data) {
var arr = [];
for (var param in data){
arr.push(encodeURIComponent(param) + "=" +encodeURIComponent(data[param]));
}
console.log(arr);
arr.push(("randomNumber=" + Math.random()).replace("."));
console.log(arr);
return arr.join("&");
}
封装以上的方法主要是因为原生js传递请求参数比较麻烦,于是乎改良了一下,希望对大家有帮助,喜欢我的文章的话,就给我来个喜欢吧,
我最喜欢doge了
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115335.html
摘要:一直在用方法来写请求,用的多了,不免对这其中是怎么实现的产生了兴趣,于是乎,小弟闲来无聊研究了一下原生实现请求,网上看了很多前辈们的关于请求的封装方法,也借鉴了很多经验,于是乎就出现了小弟的一个原生封装的版本,希望大家看了之后能够明白,下面 一直在用jQuery方法来写ajax请求,用的多了,不免对这其中是怎么实现的产生了兴趣,于是乎,小弟闲来无聊研究了一下原生实现ajax请求,网上看...
摘要:一直在用方法来写请求,用的多了,不免对这其中是怎么实现的产生了兴趣,于是乎,小弟闲来无聊研究了一下原生实现请求,网上看了很多前辈们的关于请求的封装方法,也借鉴了很多经验,于是乎就出现了小弟的一个原生封装的版本,希望大家看了之后能够明白,下面 一直在用jQuery方法来写ajax请求,用的多了,不免对这其中是怎么实现的产生了兴趣,于是乎,小弟闲来无聊研究了一下原生实现ajax请求,网上看...
摘要:一封装原生的为类以及用法见之前的文章根据确定请求的头部以及别的信息。二封装实用性的类在项目中经常需要将进行封装,使用类发起请求。请求不带请求带请求不带请求带请求不带请求带这个方法感觉可以再次进行封装。完整代码点击查看以上。 一、封装原生的xhr为ajax类 xhr以及用法见之前的文章 1、根据url确定请求的头部以及别的信息。 var _headerConfig = {}; ...
摘要:我们都知道因为同源策略的问题,浏览器的请求是可能随便跨域的一定要有跨域头或者借助,但是,中可以设置为不跨域,如下所示这样之后我们会得到一个为的返回。 免费帮忙内推阿里等各大IT公司的岗位,有兴趣可以带简历加微信angeltune 引言 前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被JQuery 1.9版本版本以下不支持大文件请求这个...
阅读 3351·2021-11-17 09:33
阅读 3332·2021-11-16 11:52
阅读 749·2021-09-26 09:55
阅读 3173·2019-08-30 15:52
阅读 1532·2019-08-30 15:44
阅读 1476·2019-08-30 13:59
阅读 987·2019-08-30 13:08
阅读 1404·2019-08-30 10:50