手动封装XMLHttpRequest
自己动手封装一个XMLHttpRequest, 兼容低版本浏览器，自动检测post与get 类型请求，自动参数拼接，参数类型辨别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义XMLHttpRequest实现前后端通讯</title>
</head>
<body>
<button type="button" onclick="getData()">获取数据</button>
<script>
function getData() {
custRequest([{
url: './box.html',
success: function(res) {
console.log(res)
},
error: function(err) {
console.log(err)
}
}])
}
function custRequest(options) {
var opt = {
url: '',
type: 'get',
data: {},
success: function() {},
error: function() {}
};
// detect type of options
if (typeof options === 'string') {
if (isJsonObj(options)) {
options = JSON.parse(options)
} else {
throw 'The options be must a json object or a string of json format'
}
}
if(Array.isArray(options)){
options = options[0]
}
// merage options
for (var key in options) {
opt[key] = options[key]
}
if (opt.url) {
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new Window.ActiveXObject('Microsoft.XMLHTTP');
var data = opt.data,
url = opt.url,
type = opt.type.toUpperCase(),
dataArr = [];
for (var k in data) {
dataArr.push(k + '=' + data[k])
}
if (type === 'GET') {
url = url + '?' + dataArr.join('&');
xhr.open(type, url.replace(/\?$/g, ''), true);
xhr.send();
}
if (type === 'POST') {
xhr.open(type, url, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(dataArr.join('&'));
}
xhr.onload = function() {
if (xhr.status === 200 || xhr.status === 304) {
var res;
if (opt.success && opt.success instanceof Function) {
res = xhr.responseText;
if (typeof res === 'string') {
if (isJsonObj(res)) {
res = JSON.parse(res);
}
opt.success.call(xhr, res)
}
}
} else {
if (opt.error && opt.error instanceof Function) {
opt.error.call(xhr, res)
}
}
}
}
}
function isJsonObj(text){
if (/^[\],:{}\s]*$/.test(text.replace(/\\["\\\/bfnrtu]/g, '@').
replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
//the json is ok
return true
}else{
//the json is not ok
return false
}
}
</script>
</body>
</html>
手动封装XMLHttpRequest的更多相关文章
- 使用promise手动封装ajax函数
最近在做一个单页应用,node和浏览器仅通过json传输数据,因为是只有自己用等于是锻炼一下自己,所以也不用考虑seo的问题,node端我已经写好了,但是浏览器端想要用ajax原生太麻烦,用封装的函数 ...
- 手动封装AJAX
正常函数的调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- JQuery需要手动回收xmlHttpRequest对象
今天在园子里面看到kuibono的文章说JQuery不会自动回收xmlHttpRequest对象,并且在每次Ajax请求之后都会创建一个新的xmlHttpRequest对象,感到惊讶,索性写了一个程序 ...
- 【Vue】---- 手动封装on，emit，off
一.概念 1. $on("事件名称",回调函数) 事件绑定,一个事件名称上面可能绑定多个函数 2. $emit("事件名称",需要传递的值) 事件触发时,会触发 ...
- 手动封装js原生XMLHttprequest异步请求
Code Object.extend =function(targetObj,fnJson){ //扩展方法,类似于jQuery的$.extend,可以扩展类的方法,也可以合并对象 for(var f ...
- 手动封装一个属于自己的AJAX类库
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- axios浏览器异步请求方法封装 XMLHttpRequest
axios学习笔记defaults(浏览器端异步请求处理方式) 浏览器异步请求方法封装,主要使用XMLHttpRequest lib/adapters/xhr.js //入口 var utils = ...
- 手动封装一个node命令集工具
了解NPM安装模块时与项目配置文件中的bin配置发生了什么 了解nodejs在控制台中的运行环境及上下文 基于自定义命令集工具集成Yeoman 一.NPM模块安装内幕与nodejs控制台运行环境 1. ...
- 手动封装OpenCV1.0的IplImage读取保存功能遇到的小问题
最近准备重新学习图像处理的知识,主要目的是自己实现一遍图像处理的算法,所以除了读取.保存图像外的操作都自己写,没想到直接封装OpenCV的读取.保存功能的第一步就出错.关键代码如下 void MyIm ...
- 【react】---手动封装一个简易版的redux
export let createStore = (reducer)=>{ //定义默认的state let state; //定义默认的action let actionTypes = &qu ...
随机推荐
- 谁会拒绝一个开源的 3D 博客呢？
说到博客大家一定都不陌生,不管你是深耕职场多年的老鸟,还是在学校努力学习的小鸟,应该都有过一段"装扮"博客的经历,比如:放上喜欢的图片.添加炫酷的交互.换上 DIY 的博客主题等等 ...
- 从零开始学习Java系列教程之Windos下dos命令行使用详解前言
在上一篇文章中,壹哥重点给大家讲解了Java开发和运行环境的安装及配置,分析了JDK与JRE的区别,而且还给大家提到了dos命令行.可能有些童鞋对dos命令的使用还不熟悉,其实我们在初学Java时,经 ...
- QML中border、padding、margin
1.border 定义 border代表边框,可以设置border的宽度和颜色等属性 实现image 实现code Rectangle { width: 200 height: 160 anchors ...
- 在Android应用中通过Chaquopy使用Python
在Android应用中通过Chaquopy使用Python [译] 通过Python脚本和包为Android应用带来更多的功能 翻译自https://proandroiddev.com/chaquop ...
- kubernetes核心实战（六）--- ConfigMap
8.ConfigMap 抽取应用配置,并且可以自动更新 创建配置文件 [root@k8s-master-node1 ~/yaml/test]# vim configmap.yaml [root@k8s ...
- 【云享专刊】开源遇上华为云，OCP架构变身“云原生框架”
摘要:华为云DTSE团队出品云原生改造指南,助力轻松实践OCP上云. 本文分享自华为云社区<[云享专刊]开源遇上华为云,OCP架构变身"云原生框架">,作者:华为云社区 ...
- day33:进程锁&事件&进程队列&进程间共享数据
目录 1.锁:Lock 2.信号量:Semaphone 3.事件:Event 4.进程队列:Queue 5.生产者和消费者模型 6.JoinableQueue 7.Manager:进程之间共享数据 锁 ...
- ELF文件格式解析
ELF(Executable and Linkable Format) 即可执行可链接文件格式,是目前操作系统上最常见的可执行文件格式.不同系统的目标文件不一样,Windows是PE(Portable ...
- React Native 开发环境搭建——nodejs安装、yarn安装、JDK安装多个版本、安装Android Studio、配置Android SDK的环境变量
一.React Native介绍 二.开发环境的搭建 2.1.Node.js安装 Node.js要求14版或更新 https://nodejs.org/en 查看版本: 2.2.yarn安装 Yarn ...
- Network Science：巴拉巴西网络科学阅读笔记2 第一章图论
第一章:图论 完全图又被称为团. Metcalfe's Law: Metcalfe's law states that the value of a telecommunications networ ...