简单封装ajax

最新推荐文章于 2022-04-21 21:30:57 发布

Mr_chen95

最新推荐文章于 2022-04-21 21:30:57 发布

阅读量453

点赞数

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

本文链接：https://blog.csdn.net/Mr_chen95/article/details/78022337

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<ul id="ul"></ul>
	<button  id="btn">更新</button>

 var oul=document.getElementById('ul');
      var obtn=document.getElementById('btn');
      obtn.οnclick=function(){
      	var xml=new XMLHttpRequest();
      	xml.open("GET","file.txt",true);
      	xml.send();
      	xml.onreadystatechange=function(){
      		if(xml.readyState==4 && xml.status==200){
      			var data=JSON.parse(xml.responseText);

			//ajax回调回来的responseText只是字符串类型,用JSON.parse把他解析成对象

			//他是一个数组，需要把数组里每一项取出来放到标签li里面，所以需要一个for循环
      			var html="";//作为字符串拼接用的
      			for(var i=0;i<data.length;i++){
      				html+='<li>'+data[i]+'</li>'
      			}
      			oul.innerHTML+=html;//把所用的拼接完成之后再拼接到最大的ul 上面去
      		}
      	}
      }

以上是一个简单ajax异步实例，下面我们一步步进行简单封装，让初学者理解封装步骤。

如果一个网站用到很多ajax异步，那按照上面的写法得写死，所以我们需要封装，精简代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="ajax.js"></script>
</head>
<body>
	<ul id="ul"></ul>
	<button  id="btn">更新</button>
	<script>
		var oul=document.getElementById('ul');
		var obtn=document.getElementById('btn');
		obtn.οnclick=function(){
		ajax("GET","file.txt",true,function(data){
			var html="";
			for(var i=0;i<data.length;i++){
				html+='<li>'+data[i]+'</li>'
			};
			oul.innerHTML+=html;
		});			
		}
	
	</script>
</body>
</html>

另起一个js文件，把ajax.js 文件引入当前页面

以下是ajax.js代码

function ajax(method,url,async,success){
	var xml = "";
	xml=new XMLHttpRequest();
	xml.open(method,url,async);
	xml.send();
	xml.onreadystatechange=function(){
	if(xml.readyState==4 && xml.status==200){
		var data=JSON.parse(xml.responseText);//string转换成代码,
		success && success(data);
		
	}
}
}

如果有很多ajax异步，就可重复调用ajax.js文件，减少代码重复，这只是初步封装，还会有更精简的封装，今天先写到这里，明天讲解会更深入，

没有注释，多多见谅