码迷,mamicode.com
首页 > Web开发 > 详细

封装一个类似jquery的ajax方法

时间:2017-02-01 10:35:55      阅读:291      评论:0      收藏:0      [点我收藏+]

标签:element   http   and   else   标签   val   格式   body   xhr   

//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求
//参数格式如下{
// type:"get"/"post",
// dataType:"json"/"jsonp",
// url:"地址",
// data:{key:value}
// success:function(){
// }
// }
//还需要一个跨域方法,可以访问远程服务器的数据

function myAjax(obj){
    var type = obj.type || "get";
    var dataType = obj.dataType || "json";
    var url = obj.url;
    var data = obj.data ||{};
    var success = obj.success;
    //把data拼接成字符串,dataStr就是参数字符串
    var dataStr = "";
    //key=key&com=com&on=flsjfsjdfdsf
    for(var key in data){
        dataStr+=key+"="+data[key]+"&"
    }
    dataStr = dataStr.slice(0,-1);
    if(dataType=="json"){
        var xhr = new XMLHttpRequest();
        if(type=="get"){
            xhr.open("get",url+"?"+dataStr);
            xhr.send(null);
        }else if(type=="post"){
            xhr.open("post",url);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(dataStr)
        }
        xhr.onreadystatechange=function(){
            if(xhr.status==200&&xhr.readyState==4){
                var json = xhr.responseText;
                json = JSON.parse(json);
                success(json);
            }
        }
    }else if(dataType=="jsonp"){
        //需要有一个函数名,这个函数名要保证不会重名
        var date = new Date();
        var cbname = "myJsonp"+date.getTime()+Math.random().toString().slice(2);
        //我们要把你传入success对应的函数,放在一个特定函数里面
        window[cbname]=function(data){
            success(data);
            //newScript.parentNode.removeChild(newScript);
        };
        //新建一个script标签,里面的src链接到的就是接口地址(包含参数);
        var newScript = document.createElement("script");
        if(dataStr==""){
            newScript.src = url+"&callback="+cbname;
        }else{
            newScript.src = url+"?"+dataStr+"&callback="+cbname;
        }
        document.body.appendChild(newScript);
    }
}

 

封装一个类似jquery的ajax方法

标签:element   http   and   else   标签   val   格式   body   xhr   

原文地址:http://www.cnblogs.com/rlann/p/6359732.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!