Ajax（get和post的请求用原生js打包封装）

最新推荐文章于 2023-03-11 11:01:49 发布

牛仔不当马仔

最新推荐文章于 2023-03-11 11:01:49 发布

阅读量227

点赞数

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

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

版权

web前端专栏收录该内容

40 篇文章 1 订阅

订阅专栏

html部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/ajax_post_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("POST", "php/post_ask.php", {
						"userName" : "yxy",
						"passWord" : "123123123"
					}, 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(type, 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");
	}
	if(type == "GET"){
		// 2.设置请求方式和请求地址
		xmlhttp.open(type, url + "?" + str, true);
		// 3.发送请求
		xmlhttp.send();
		// 4.监听状态的变化
	}
	else{
		// 2.设置请求方式和请求地址
		xmlhttp.open(type, url, true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//基本格式
		// 3.发送请求
		xmlhttp.send(str);//post请求中send方法中需要传参
	}
	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是定时器响应时间
	}
}

牛仔不当马仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax（get和post的请求用原生js打包封装）

html部分：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/ajax_post_ask.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">
复制链接

扫一扫