zoukankan      html  css  js  c++  java
  • ajax学习2--使用原生js封装ajax请求

    问题:

    我们发现在使用ajax进行业务处理时,ajax的代码其实很多地方是相同的。
    这样造成编写代码时出现了重复编写,影响了开发的效率。
    

    实现:

    相同的保留,不同的传参。
    请求方式:method 
    请求地址:url
    请求参数:data 请求参数的格式为键值对格式的字符串,不同的键值对使用&符号隔开.如果没有请求数据传入null
            示例:"a=1&b=2"
    异步同步设置:ansyc
    响应处理参数:deal200
            该参数接收一个js的函数对象,函数对象中声明ajax响应数据的处理逻辑代码。
            注意:函数对象需要声明一个形参用来接收要处理的响应数据
    

    封装:

    function myAjax(method,url,data,deal200,ansyc){
    	 		//创建ajax引擎对象
    	 			var ajax;
    	 			if(window.XMLHttpRequest){
    	 				ajax=new XMLHttpRequest();
    	 			}else if(window.ActiveXObject){
    	 				ajax=new ActiveXObject("Msxml2.XMLHTTP");
    	 			}
    	 		//声明监听函数
    	 			ajax.onreadystatechange=function(){
    	 				//判断ajax状态码
    	 				if(ajax.readyState==4){
    	 					alert("aaa")
    	 					//判断响应状态码
    	 					if(ajax.status==200){
    	 						//获取响应数据
    	 						var data=ajax.responseText;
    	 						if(deal200){
    	 							deal200(data);
    	 						}
    	 					}	
    	 				}	
    	 			}
    	 		//创建并发送请求	
    	 			if("get"==method.toLowerCase()){
    	 				//创建请求
    		 			 ajax.open("get",url+(data==null?"":"?"+data),ansyc);
    		 			//发送请求
    		 			ajax.send(null);
    	 			}else if("post"==method.toLowerCase()){
    	 				//创建请求
    		 			 ajax.open("post",url,ansyc);
    	 				//设置请求数据为键值对数据
    	 				ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    		 			//发送请求
    		 			ajax.send(data);
    	 			}	
        	}
    

    使用:

          <!--引入js文件  -->
          <script type="text/javascript" src="js/AjaxUtil.js"></script>
    	  <!--声明js代码域  -->
    	   <script type="text/javascript">
    	    //使用ajax进行处理--演示调用
    	    	myAjax("get","data","uname=张三",function(a){
    	    		alert(a);
    	    	})
              </script>
    
    重视基础,才能走的更远。
  • 相关阅读:
    学习 Apache FileMatchs 规则
    yii2 vendor/bower/jquery/dist not exist
    Ionic POST提交使用普通表单提交数据
    Yii2 在php 7.2环境下运行,提示 Cannot use ‘Object’ as class name
    Yii2 使用 npm 安装的包
    phpStorm 激活
    Chrome DNS_PROBE_FINISHED_NXDOMAIN
    Yii2 中使用ts
    Js 对 浏览器 的 URL的操作
    js 编码、解码与asp.net 编码、解码
  • 原文地址:https://www.cnblogs.com/xzlf/p/12904886.html
Copyright © 2011-2022 走看看