JS 传统的Ajax无刷新数据

墨蓝 2023-10-05 08:58 4阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

#### 封装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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200824105243527.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70