函数封装：Ajax发送http请求（get&post）

最新推荐文章于 2024-09-11 02:20:32 发布

Thy拾

最新推荐文章于 2024-09-11 02:20:32 发布

阅读量673

点赞数 1

分类专栏：技术前端开发文章标签： Ajax 前端

技术同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

前端开发

11 篇文章 0 订阅

订阅专栏

ajax_tool.js：

// 方法：ajax get 五部曲
function ajax_get(url,data) {
	// 异步对象
	var ajax = new XMLHttpRequest();

	// url 方法
	// 如果是get发送数据 发送的格式为 xxx.php?name=jack&age=18
	// 所以 这里 需要拼接 url
	if (data) {
		// 如果有值 需要拼接字符串
		// 拼接为xxx.php?name=jack&age=18
		url+='?';
		url+=data;
	}else{
	}

	ajax.open('get',url);
	// 发送
	ajax.send();

	// 注册事件
	ajax.onreadystatechange = function () {
		// 在事件中 获取数据 并修改界面显示
		if (ajax.readyState==4&& ajax.status==200) {
			console.log(ajax.responseText);
		}
	}
}


// 方法：ajax_post五部曲
function ajax_post(url,data) {
	// 异步对象
	var ajax = new XMLHttpRequest();

	// url 方法
	ajax.open('post',url);

	// 设置 请求报文
	ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

	// 发送
	if (data) {
		// 如果 有值 post请求 是在 send中 发送给服务器
		ajax.send(data);
	}else{
		ajax.send();
	}


	// 注册事件
	ajax.onreadystatechange = function () {
		// 在事件中 获取数据 并修改界面显示
		if (ajax.readyState==4&&ajax.status==200) {
			console.log(ajax.responseText);
		}
	}

}


// 方法：将 get 跟post 封装到一起
/*
	参数1:url
	参数2:数据
	参数3:请求的方法
	参数4:数据成功获取以后，调用的方法
*/
function ajax_tool(url,data,method,success) {
	// 异步对象
	var ajax = new XMLHttpRequest();

	// get 跟post  需要分别写不同的代码
	if (method=='get') {
		// get请求
		if (data) {
			// 如果有值
			url+='?';
			url+=data;
		}else{

		}
		// 设置 方法 以及 url
		ajax.open(method,url);

		// send即可
		ajax.send();
	}else{
		// post请求
		// post请求 url 是不需要改变
		ajax.open(method,url);

		// 需要设置请求报文
		ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

		// 判断data send发送数据
		if (data) {
			// 如果有值 从send发送
			ajax.send(data);
		}else{
			// 木有值 直接发送即可
			ajax.send();
		}
	}

	// 注册事件
	ajax.onreadystatechange = function () {
		// 在事件中 获取数据 并修改界面显示
		if (ajax.readyState==4&&ajax.status==200) {
			// console.log(ajax.responseText);

			// 将 数据 让 外面可以使用
			// return ajax.responseText;

			// 当 onreadystatechange 调用时 说明 数据回来了
			// ajax.responseText;

			// 数据成功获取以后，执行方法success()。
			//我们把获取的数据作为 success()的参数，意思是：
			//success方法是外面的，数据是里面给的。那数据就变相地传递到了外面去【重要】
			success(ajax.responseText);
		}
	}

}

函数调用（get方法）

test_get.html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="button"  value="测试get" id='ajax_get'>
</body>
</html>
<!-- 导入 封装的js -->
<script type="text/javascript" src='ajax_tool.js'></script>
<script type="text/javascript">
	document.querySelector('#ajax_get').onclick = function () {
		// 直接使用 封装的 工具函数即可
		/*
			参数1:url
			参数2:数据
			参数3:请求的方法
			参数4：请求成功后，调用的方法
		*/
		var backData = ajax_tool('test_get.php','name=smyhvae&skill=code','get',function(data){
			console.log(data);
		});
		// 测试
		console.log(backData);
	}
</script>

test_get.php：

<?php
	// 获取get提交的数据
	echo $_GET['skill'];
 ?>

函数调用（post方法）

test_post.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="button"  value="测试post" id='ajax_post'>
</body>
</html>
<!-- 导入 封装的js -->
<script type="text/javascript" src='ajax_tool.js'></script>
<script type="text/javascript">
	document.querySelector('#ajax_post').onclick = function () {
		// 直接使用 封装的 工具函数即可
		/*
			参数1:url
			参数2:数据
			参数3:请求的方法
			参数4:数据获取成功调用的方法
		*/
		var backData = ajax_tool('02.test_post.php','friend=好丽友','post',function(data){
			console.log(data);
		});
		// 测试
		console.log(backData);


		// 怎么样 处理数据 全部写在 匿名函数中
		ajax_tool('02.test_post.php','friend=好丽友','post',function(data){
			console.log(data);
			// 修改页面的显示呢?
		});

	}
</script>

test_post.php：