自己动手封装一个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的更多相关文章

  1. 使用promise手动封装ajax函数

    最近在做一个单页应用,node和浏览器仅通过json传输数据,因为是只有自己用等于是锻炼一下自己,所以也不用考虑seo的问题,node端我已经写好了,但是浏览器端想要用ajax原生太麻烦,用封装的函数 ...

  2. 手动封装AJAX

    正常函数的调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. JQuery需要手动回收xmlHttpRequest对象

    今天在园子里面看到kuibono的文章说JQuery不会自动回收xmlHttpRequest对象,并且在每次Ajax请求之后都会创建一个新的xmlHttpRequest对象,感到惊讶,索性写了一个程序 ...

  4. 【Vue】---- 手动封装on，emit，off

    一.概念 1. $on("事件名称",回调函数) 事件绑定,一个事件名称上面可能绑定多个函数 2. $emit("事件名称",需要传递的值) 事件触发时,会触发 ...

  5. 手动封装js原生XMLHttprequest异步请求

    Code Object.extend =function(targetObj,fnJson){ //扩展方法,类似于jQuery的$.extend,可以扩展类的方法,也可以合并对象 for(var f ...

  6. 手动封装一个属于自己的AJAX类库

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. axios浏览器异步请求方法封装 XMLHttpRequest

    axios学习笔记defaults(浏览器端异步请求处理方式) 浏览器异步请求方法封装,主要使用XMLHttpRequest lib/adapters/xhr.js //入口 var utils = ...

  8. 手动封装一个node命令集工具

    了解NPM安装模块时与项目配置文件中的bin配置发生了什么 了解nodejs在控制台中的运行环境及上下文 基于自定义命令集工具集成Yeoman 一.NPM模块安装内幕与nodejs控制台运行环境 1. ...

  9. 手动封装OpenCV1.0的IplImage读取保存功能遇到的小问题

    最近准备重新学习图像处理的知识,主要目的是自己实现一遍图像处理的算法,所以除了读取.保存图像外的操作都自己写,没想到直接封装OpenCV的读取.保存功能的第一步就出错.关键代码如下 void MyIm ...

  10. 【react】---手动封装一个简易版的redux

    export let createStore = (reducer)=>{ //定义默认的state let state; //定义默认的action let actionTypes = &qu ...

随机推荐

  1. 利用SpringBoot实现数据库的增删改查（具体实现）

    前言 本次主要是想利用SpringBoot的框架实现一下数据库的增删改查,所以只有一个较为简单的表作为案例 具体实现 1.在配置文件中配置一下相关内容 2.在pom.xml文件中导入相关坐标 3.编写 ...

  2. Javaweb学习第十二弹--Request和Response

    XML配置方式编写Servlet 3.0版本之前,仅仅支持XML配置文件的配置方式 1.编写Servlet类 2.在web.xml中配置该Servlet Request和Response Reques ...

  3. 在基于vue-next-admin的Vue3+TypeScript前端项目中，为了使用方便全局挂载的对象接口

    在基于vue-next-admin 的 Vue3+TypeScript 前端项目中,可以整合自己的 .NET 后端,前端操作一些功能的时候,为了使用方便全局挂载的对象接口,以便能够快速处理一些特殊的操 ...

  4. 为自己的博客添加2D虚拟人物

    2020-05-29 在自己申请完并获得了属于自己的博客后,我突然想着为自己的博客添砖加瓦,记起了之前看别人博客时,其充满独具个性,特立独行的风格,让我十分羡慕,最近看到了一个博客风格很有趣,其有趣之 ...

  5. 剑指 offer 第 21 天

    第 21 天 位运算(简单) 剑指 Offer 15. 二进制中1的个数 编写一个函数,输入是一个无符号整数(以二进制串的形式),返回其二进制表达式中数字位数为 '1' 的个数(也被称为 汉明重量). ...

  6. Django笔记十三之select_for_update等选择和更新等相关操作

    本篇笔记将介绍 update 和 create 的一些其他用法,目录如下: get_or_create update_or_create select_for_update bulk_create b ...

  7. pnpm 之降本增效

    作者:京东科技 于振京 受众简介 前端研发工程师 还在为npm i安装大量依赖等待时间较长,npm扁平化node_modules依赖版本冲突在苦恼吗,不用苦恼pnpm为你保驾护航 主要影响:安装依赖包 ...

  8. 如何使用Webpack工具构建项目

    起步 webpack 用于编译 JavaScript 模块.一旦完成 安装,你就可以通过 webpack CLI 或 API 与其配合交互.如果你还不熟悉 webpack,请阅读 核心概念 和 对比, ...

  9. javasec(六)RMI

    这篇文章介绍java-RMI远程方法调用机制. RMI全称是Remote Method Invocation,远程⽅法调⽤.是让某个Java虚拟机上的对象调⽤另⼀个Java虚拟机中对象上的⽅法,只不过 ...

  10. 还在玩传统终端，不妨来试试全新 AI 终端 Warp

    壹 ❀ 引 最近一段时间,AI领域如同雨后春笋般开始猛烈生长,processon,sentry,一些日常使用的工具都在积极接入AI,那么正好借着AI的风头,今天给大家推荐一款非常不错的智能终端 war ...