js 原生ajax：封装函数

最新推荐文章于 2022-08-24 13:37:05 发布

石界星空

最新推荐文章于 2022-08-24 13:37:05 发布

阅读量275

点赞数 1

分类专栏： js ajax 文章标签： ajax javascript 函数

本文链接：https://blog.csdn.net/stone10086/article/details/72518139

版权

js 同时被 2 个专栏收录

69 篇文章 0 订阅

订阅专栏

ajax

6 篇文章 0 订阅

订阅专栏

1、打开服务器WampServer；
2、将文件放置在WampServer的www文件夹下；
3、打开时网页地址栏为localhost+www下的地址。eg：http://localhost/myworld/5.19ajax/index.html?__hbt=1495158145298
4、调用方式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="button" id="btn"  value="提交"/>
		<span id="info"></span>
	</body>
	<script src="js/ajax_util.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var btn=document.getElementById('btn');
		var info=document.getElementById('info');
		btn.onclick=function(){
		//date为空，无数据传送；
			ajax('GET','/myworld/5.19ajax/span.txt','',function(str){
				info.innerHTML=str;
			})
		}
	</script>
</html>

函数为：

/*
 * ajax 4条线
 * 第3条线由后台完成，直接调用
 */

function ajax(method,url,data,fn){
	//1
	var xhr;
	if (window.XMLHttpRequest) {
		xhr=new XMLHttpRequest();
	}else{
		xhr=new ActiveXObject('Microsoft XMLHTTP');
	};
	//2
	if (method=='GET'&&data) {
		url=url+'?'+data;
	};
	xhr.open(method,url,true);
	if(method=='GET'){
		xhr.send(null);		
	}else{
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhr.send(data);
	};
	//4
	xhr.onreadystatechange=function(){
		if (xhr.readyState==4) {
			if (xhr.status==200) {
				if (xhr.responseXML) {
					fn(xhr.responseXML);
				}else{
					fn(xhr.responseText);
				};
			}else{
				console.log('出错状态为：'+xhr.status);
			};
		}
	};	
};

石界星空

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 原生ajax：封装函数

1、打开服务器WampServer； 2、将文件放置在WampServer的www文件夹下； 3、打开时网页地址栏为localhost+www下的地址。eg：http://localhost/myworld/5.19ajax/index.html?__hbt=1495158145298 4、调用方式： <!DOCTYPE html> <html> <head>
复制链接

扫一扫

专栏目录