封装ajax

WLY_Unity_Unreal

于 2019-06-24 18:32:34 发布

阅读量148

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Wenliuyong/article/details/93508251

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

为了更方便的使用ajax进行网络编程,这里把ajax请求流程的代码封装一下:

function ajax (method, url, params = {}) {
	return new Promise ((resolve, reject) => {
		//判断参数是否为对象
		if (typeof params !== 'object') {
			reject ('参数类型错误');
			return;
		}
		//把请求方式转为大写
		method = method.toUpperCase ();
		//实例化请求对象
		var xhr = new XMLHttpRequest ();
		//处理参数为字符串格式
		var tempArr = [];
		for (var key in params) {
			tempArr.push (key + '=' + params[key]);
		}
		params = tempArr.join ('&');
		//如果为GET请求,把参数拼接到url后面
		if (method === 'GET') {
			url = url + '?' + params;
		}
		//建立连接
		xhr.open (method, url);
		//绑定状态改变回调函数
		xhr.onreadystatechange = function() {
			if (this.readyState === 4) {
				if (this.status === 200) {
					//这里默认和服务端约定好数据格式为JSON, 其它情况可以注释这行代码
					var datas = JSON.parse (this.responseText);
					resolve (datas);
				} else {
					reject ('请求错误, 错误码: ' + this.status);
				}
			}
		};
		//如果为POST请求,设置请求头Content-Type为application/x-www-form-urlencoded,再把参数带入发送请求;如果为GET请求,则直接发送请求
		if (method === 'POST') {
			xhr.setRequestHeader ('Content-Type', 'application/x-www-form-urlencoded');
			xhr.send (params);
		} else if (method === 'GET') {
			xhr.send ();
		} else {
			reject ('非常抱歉,请求方式不支持');
		}
	});
}

这里只封装了get,post两种请求方式,后面有需要会再完善,测试一下:

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
	<script type="text/javascript">
		ajax ('POST', 'test.php', {name: '小李飞刀', age: 18}).then (res => {
			console.log (res);
		}).catch (error => {
			console.log (error);
		});
	</script>
</body>
</html>

php那边会把参数放到数组中返回:

<?php 
	if ($_SERVER['REQUEST_METHOD'] === 'GET') {
		$datas = array ($_GET);
	} else if ($_SERVER['REQUEST_METHOD'] === 'POST') {
		$datas = array ($_POST);
	}
        header('Content-Type: application/json');
	echo(json_encode($datas));
?>

打印结果:

好啦,有可以完善的地方欢迎各位老铁指教.

WLY_Unity_Unreal

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
封装ajax

为了更方便的使用ajax进行网络编程,这里把ajax请求流程的代码封装一下:function ajax (method, url, params = {}) { return new Promise ((resolve, reject) => { //判断参数是否为对象 if (typeof params !== 'object') { reject ('参数类型错误'...
复制链接

扫一扫

专栏目录