手动封装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 ...
随机推荐
- FastJson 反序列化漏洞原理分析
Fastjson 简介 fastjson框架:https://github.com/alibaba/fastjson fastjson-jndi:https://github.com/earayu/f ...
- ISCC 2022 RE
ISCC 2022 RE 练武题 Amy's Code v9=[0]*20 v9[0] = 149 v9[1] = 169 v9[2] = 137 v9[3] = 134 v9[4] = 212 v9 ...
- RPC通信原理概述
RPC通信原理概述 1.RPC概述 1.什么是RPC RPC(Remote Procedure Call Protocol)远程过程调用协议.它是一种通过网络从远程计算机程序上请求服务,而不需要了解底 ...
- 001-ksum 求符合条件的 k 个数 1. Two Sum/15. 3Sum/18. 4Sum/
推荐阅读 000-从零开始的数据结构与算法 001-01-ksum 求符合条件的 k 个数 1. Two Sum/15. 3Sum/18. 4Sum/ 002-两数相加 add two numbers ...
- java多线程基础小白指南--synchronized同步块
sychronized是java多线程非常关键的一个知识点,这篇博客将从synchronized几个用法以及代码来学习. sychronized的作用是能够保证同一时间只有一个线程来运行这块代码,达到 ...
- springboot jpa---->总结一下遇到的问题
Native Query throw exception dto code import lombok.Value; @Value public class IdsOnly { Integer id; ...
- 【Visual Leak Detector】配置项 ForceIncludeModulesmd
说明 使用 VLD 内存泄漏检测工具辅助开发时整理的学习笔记.本篇介绍 VLD 配置文件中配置项 ForceIncludeModules 的使用方法. 同系列文章目录可见 <内存泄漏检测工具&g ...
- [PKM] 个人知识管理
1 个人知识管理的需求 1.1 背景 随着信息大爆炸,碎片化的知识越来越多,原来中小学阶段在学校中习得的.传统的.基于纸质笔记的知识管理方式已不能满足当前的诉求. 传统的基于纸质笔记的知识管理方式 工 ...
- 使用CURL调用接口[*示例*]
<?php header("content-type:text/html;charset=utf-8"); /* 这是 使用CURL调用接口 */ $ch = curl_in ...
- docker 容器操作、应用部署、mysql，redis，nginx、迁移与备份、Dockerfile
容器操作 # 启动容器 docker start 容器id # 停止容器 docker stop 容器id # 文件拷贝 先创建文件 mkdir:文件夹 vi vim touch:文件 # 容器的文件 ...