ajax封装get的基本方法（附流程）

最新推荐文章于 2024-10-11 19:21:08 发布

牛仔不当马仔

最新推荐文章于 2024-10-11 19:21:08 发布

阅读量664

点赞数

分类专栏： web前端文章标签： ajax

本文链接：https://blog.csdn.net/qq_45155741/article/details/118461429

版权

web前端专栏收录该内容

40 篇文章 1 订阅

订阅专栏

本文介绍了Ajax的基本使用步骤，包括创建异步对象、设置请求方式和地址、发送请求、监听状态变化及处理结果。同时，展示了如何将Ajax请求封装成可复用的方法，并进行了参数传递、超时处理和URL中文编码的优化。最后，提供了实际的HTML测试代码，演示了封装后的Ajax在获取服务器数据时的应用。

摘要由CSDN通过智能技术生成

使用基本五点

1.创建一个异步对象
2.设置请求方式和请求地址
3.发送请求
4.监听状态的变化
5.处理返回的结果

基本格式如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(ev) {
				var but = document.querySelector("button");
				but.onclick = function(ev1) {
					// 1.创建一个异步对象
					var xmlhttp;
					if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
						xmlhttp = new XMLHttpRequest();
					} else { // code for IE6, IE5
						xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
					}
					// 2.设置请求方式和请求地址
					xmlhttp.open("GET", "hello.txt?t="+(new Date().getTime()), true);
					// 3.发送请求
					xmlhttp.send();
					// 4.监听状态的变化
					xmlhttp.onreadystatechange = function(ev2) {
						if (xmlhttp.readyState === 4) {
							if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status == 304) {
								// console.log("发送请求数据成功");
								console.log(xmlhttp.responseText);
							} else {
								console.log("发送请求数据失败");
							}
						}
					}
					// 5.处理返回的结果
				}
			}
		</script>
	</head>
	<body>
		<button type="button">发送请求</button>
	</body>
</html>

注意点：
1.创建异步对象时浏览器的兼容性
2.请求地址，如果在IE中，IE会认为同一个url只有一个地址，可以通过添加随时变化的数据，来拿到url地址中最新的数据

Ajax封装

1.将请求数据的代码封装成一个js文件中的方法

function ajax(url, success, error) {
	var xmlhttp;
	if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	} else { // code for IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	// 2.设置请求方式和请求地址
	xmlhttp.open("GET", url + "?t=" + (new Date().getTime()), true);
	// 3.发送请求
	xmlhttp.send();
	// 4.监听状态的变化
	xmlhttp.onreadystatechange = function(ev2) {
		if (xmlhttp.readyState === 4) {
			if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status == 304) {
				// console.log("发送请求数据成功");
				// console.log(xmlhttp.responseText);
				success(xmlhttp);
			} else {
				// console.log("发送请求数据失败");
				error(xmlhttp);
			}
		}
	}
}

2.测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/ajax_ask.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function(ev){
				var $but = document.querySelector("button");
				$but.onclick = function(){
					ajax("hello.txt", function(xmlhttp){
						//发送请求成功
						console.log(xmlhttp.responseText);
					}, function(xmlhttp){
						//发送请求失败
						console.log("请求失败");
					});
				}
			}
		</script>
	</head>
	<body>
		<button type="button">发送请求</button>
	</body>
</html>

以上还不够完善
方法优化，使得html能够通过对象向服务器传递数据

js代码：

//定义obj2str方法
function obj2str(obj){
	//将对象转换成字符串的方法
	var str = [];
	//定义t作为obj对象的一个固定属性
	obj.t = new Date().getTime();
	//遍历obj中的属性
	for(var key in obj){
		//通过数组的push方法将obj中key和value的值添加进入str数组
		str.push(key + "=" + obj[key]);
	}
	//通过join将for循环中遍历的到的每一个字符串通过&分隔开
	return str.join("&");
}
function ajax(url, obj, success, error) {
	//将传入的对象转换成字符串
	var str = obj2str(obj);
	//创建一个异步对象
	var xmlhttp;
	//判断是否存在XMLHttpRequest方法
	if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	//不存在XMLHttpRequest方法则使用ActiveXObject方法
	} else { // code for IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	// 2.设置请求方式和请求地址
	xmlhttp.open("GET", url + "?" + str, true);
	// 3.发送请求
	xmlhttp.send();
	// 4.监听状态的变化
	xmlhttp.onreadystatechange = function(ev2) {
		if (xmlhttp.readyState === 4) {
			if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status == 304) {
				// console.log("发送请求数据成功");
				// console.log(xmlhttp.responseText);
				success(xmlhttp);
			} else {
				// console.log("发送请求数据失败");
				error(xmlhttp);
			}
		}
	}
}

html调试部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/ajax_ask.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function(ev){
				var $but = document.querySelector("button");
				$but.onclick = function(){
					ajax("php/get请求.php", {
						"userName" : "yxy",
						"passWord" : "123"
					},function(xmlhttp){
						//发送请求成功
						console.log(xmlhttp.responseText);
					}, function(xmlhttp){
						//发送请求失败
						alert("请求失败");
						console.log("请求失败");
					});
				}
			}
		</script>
	</head>
	<body>
		<button type="button">发送请求</button>
	</body>
</html>

以上依旧还不够完善
防止连接超时和url出现中文的情况：
最后改进：
html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/ajax_ask.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function(ev){
				var $but = document.querySelector("button");
				$but.onclick = function(ev1){
					ajax("php/get1.php", {
						"userName" : "yxy",
						"passWord" : "123"
					}, 3000, function(xmlhttp){
						//发送请求成功
						console.log(xmlhttp.responseText);
					}, function(xmlhttp){
						//发送请求失败
						alert("请求失败");
						console.log("请求失败");
					});
				}
			}
		</script>
	</head>
	<body>
		<button type="button">发送请求</button>
	</body>
</html>

//定义obj2str方法
function obj2str(obj){
	//将对象转换成字符串的方法
	var str = [];
	//定义t作为obj对象的一个固定属性
	obj.t = new Date().getTime();
	//遍历obj中的属性
	for(var key in obj){
		//通过数组的push方法将obj中key和value的值添加进入str数组
		str.push(decodeURIComponent(key) + "=" + decodeURIComponent(obj[key]));//decodeURIComponent方法将中文字符串转为字符，提高IE的兼容性
	}
	//通过join将for循环中遍历的到的每一个字符串通过&分隔开
	return str.join("&");
}
function ajax(url, obj, timeout, success, error) {
	//将传入的对象转换成字符串
	var str = obj2str(obj);
	//创建一个异步对象和时间长度
	var xmlhttp, timer;
	//判断是否存在XMLHttpRequest方法
	if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	//不存在XMLHttpRequest方法则使用ActiveXObject方法
	} else { // code for IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	// 2.设置请求方式和请求地址
	xmlhttp.open("GET", url + "?" + str, true);
	// 3.发送请求
	xmlhttp.send();
	// 4.监听状态的变化
	xmlhttp.onreadystatechange = function(ev2) {
		if (xmlhttp.readyState === 4) {
			clearInterval(timer);
			//判断是否请求成功
			if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status == 304) {
				// console.log("发送请求数据成功");
				// console.log(xmlhttp.responseText);
				success(xmlhttp);
			} else {
				// console.log("发送请求数据失败");
				error(xmlhttp);
			}
		}
	}
	//判断有无超时时间传入
	if(timeout){
		timer = setInterval(function(){
			alert("请求超时");
			//超时后异步对象停止进行后面的过程
			xmlhttp.abort();
			//停止定时器
			clearInterval(timer);
		}, timeout);//timeout是定时器响应时间
	}
}