JS 传统的Ajax无刷新数据

最新推荐文章于 2021-08-05 20:40:19 发布

凌冰_

最新推荐文章于 2021-08-05 20:40:19 发布

阅读量170

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/hlx20080808/article/details/108195159

版权

JS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

封装Ajax

/**
 * method:向服务器发送请求的方式：get（请求数据）、post（提交数据）
 * url:文件路径或者接口地址
 * asy：true:异步；false：同步
 * fn：处理服务器返回数据的函数
 * */
 function ajax(method,url,asy,fn){
 // function ajax(method,url,asy){
	 // 1.创建Ajax对象
	  if(window.XMLHttpRequest){
	 	 var objAjax=new XMLHttpRequest(); 
	  }else{
	 	 // IE6, IE5 浏览器执行代码
	 	  var objAjax=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	  //2.连接到服务器 open(方法，文件名，同步异步)
	  objAjax.open(method,url,asy);
	  //3.发送请求  send()
	   objAjax.send();
	   
	 //4.接收返回值--回调函数
	 objAjax.onreadystatechange=function(){
		 //判断
		 if(objAjax.readyState==4 && objAjax.status==200){
		
			  fn(objAjax.responseText);  //调用函数fn，将服务器返回的数据传给fn进行处理
		 }
	 }
 }

使用无刷新来获取数据：(数据存储在data/student.txt文件中)

<body>
		<div id="box">
			
		</div>
		<button >request data one</button><br/>
		<button >request data two</button><br/>
		<script src="js/ajax1.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
<script type="text/javascript">
	document.getElementsByTagName("button")[0].onclick=function(){
		ajax('get','data/student.txt',true,function(res){
			alert(res);
		});
	}
	
	document.getElementsByTagName("button")[1].onclick=function(){
		ajax('get','data/test.txt',true,function(res){
			document.getElementById("box").innerHTML=res;
		});
	}
</script>

凌冰_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 传统的Ajax无刷新数据

封装Ajax/** * method:向服务器发送请求的方式：get（请求数据）、post（提交数据） * url:文件路径或者接口地址 * asy：true:异步；false：同步 * fn：处理服务器返回数据的函数 * */ function ajax(method,url,asy,fn){ // function ajax(method,url,asy){ // 1.创建Ajax对象 if(window.XMLHttpRequest){ var objAjax..
复制链接

扫一扫

专栏目录