WEB前端

原生态js ajax请求封闭插件(兼容微信浏览器)

位置:首页 > WEB前端 > js教程,2018-08-10 22:14
jquery ajax 对有些浏览器不兼容,特别是微信浏览器,所以在这里做了一个原生态js ajax请求封闭插件

myajax.js

var myajax={
    getParmeter:function(data){
        var result="";
        for(var key in data){
            result=result+key+"="+data[key]+"&";
        }
        /*将结果最后多余的&截取掉*/
        return result.slice(0,-1);
    },
    /*实现ajax请求*/
    ajax:function(obj){
        /*1.判断有没有传递参数,同时参数是否是一个对象*/
        if(obj==null || typeof obj!="object"){
            return false;
        }
        /*2.获取请求类型,如果没有传递请求方式,那么默认为get*/
        var type=obj.type || 'get';
        /*3.获取请求的url  location.pathname:就是指当前请求发起的路径*/
        var url=obj.url || location.pathname;
        /*4.获取请求传递的参数*/
        var data=obj.data || {};
        /*4.1获取拼接之后的参数*/
        data=this.getParmeter(data);
        /*5.获取请求传递的回调函数*/
        var success=obj.success || function(){};

        /*6:开始发起异步请求*/
        /*6.1:创建异步对象*/
        //var xhr=new XMLHttpRequest();
        
 var xhr;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xhr=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
  }
        
        
        
        /*6.2:设置请求行,判断请求类型,以此决定是否需要拼接参数到url*/
        
        if(type=='get'){
            url=url+"?"+data;
            /*重置参数,为post请求简化处理*/
            data=null;
        }
        
        xhr.open(type,url);
        /*6.2:设置请求头:判断请求方式,如果是post则进行设置*/
        if(type=="post"){
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        }
        /*6.3:设置请求体,post请求则需要传递参数*/
        xhr.send(data);

        /*7.处理响应*/
        xhr.onreadystatechange=function(){
            /*8.判断响应是否成功*/
            if(xhr.status==200 && xhr.readyState==4){
                    result=xhr.responseText;                 
                /*11.拿到数据,调用客户端传递过来的回调函数*/
                success(result);
            }
        }

    }
};
使用方法如下

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>js ajax封装 兼容微信浏览器</title>
<script type="text/javascript" src="/js/myAjax.js"></script>
</head>
<body>
<script>
function save(){
var formdata={"username":username,"phone":phone,"anliid":anliid};
   myajax.ajax({
    url:'/BproductAction!saveyueanli.action',
    type:'post',
    data:formdata,
    success:function(result){
//结果
    }
});
}
</script>
<body>
</html>

TAGS:js ajax请求

猜你喜欢

NewHot