手动封装XMLHttpRequest

最新推荐文章于 2023-07-12 19:22:59 发布

奔跑的痕迹

最新推荐文章于 2023-07-12 19:22:59 发布

阅读量439

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_34817440/article/details/107801423

版权

javascript 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

自己动手封装一个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>

奔跑的痕迹

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
手动封装XMLHttpRequest

自己动手封装一个XMLHttpRequest<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>自定义XMLHttpRequest实现前后端通讯</title> </head> <body> <button type="button" onclick="getData()">获取数据</button&gt.
复制链接

扫一扫