简单封装原生的ajax

最新推荐文章于 2024-11-12 23:26:42 发布

blog_zxb

最新推荐文章于 2024-11-12 23:26:42 发布

阅读量133

点赞数

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

本文链接：https://blog.csdn.net/blog_zxb/article/details/97407209

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、定义myajax对象

window.myAjax=function(opt){
	opt = opt || {};
	var url = opt.url || '';
	var type = opt.type || 'get';
	var data = opt.data || null;
	var dataType = opt.dataType || '';
	var success = opt.success;
	var error = opt.error;
	var xhr;
	
	if (XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	}else {
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}
	
	xhr.onreadystatechange=function(){
		if(xhr.readyState === 4){
			if(xhr.status === 200){
				var result = xhr.responseText;
				if(dataType === 'json'){
					try{
						result = JSON.parse(result);
					}catch(err){
						console.error(err);
						error(xhr, xhr.statusText, err);
						return;
					}
				}
				success(result);
			}else{
				error(xhr, xhr.statusText);
			}
		}
	}
	xhr.open(type, url, true);
	xhr.send(data);
	
}

2、使用myajax

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="javascript:testMyAjax();">测试myAjax</a>
</body>
<script type="text/javascript" src="myajax.js"></script>
<script type="text/javascript">
function testMyAjax(){
	myAjax({
		url: location.path + 'alarmAction/testJson',
		type: 'get',
		dataType: 'text',
		success: function(data){
			console.log(data);
			alert(data);
		},
		error: function(xhr,statusText){
			console.log(xhr);
			console.log(statusText);
			alert(xhr);
		}
	});
}
</script>
</html>