jsonp的封装

(function(root){
    root["jsonp"]=function(o){
        if(typeof(o)!=="object") return;
        var    url=o.url,
            callback=((typeof(o.callback)==="string")&&o.callback)||"callback",
            callbackfn=((typeof(o.callbackfn)==="string")&&o.callbackfn)||("myfn"+parseInt(new Date().getTime()*Math.random())),
            callbackdone=((typeof(o.callbackdone)==="function")&&o.callbackdone)||new Function,
            data=o.data,
            script=document.createElement("script");

        url+=dealData(data);
        url+=(url.indexOf("?")>-1) ? "&" : "?";
        url+=callback+"="+callbackfn+"&_="+new Date().getTime();

        script.src=url;

        root[callbackfn]=function(){
            var arg=arguments;
            if(root.navigator.userAgent.toLowerCase().indexOf("msie")>-1){
                script.onreadystatechange=function(){
                    if(script.readyState=="loaded"||script.readyState=="complete"){
                        callbackdone.apply(null,arg);
                        script.parentNode.removeChild(script);
                    }
                }
            }else{
                script.onload=function(){
                    callbackdone.apply(null,arg);
                    script.parentNode.removeChild(script);
                }
            }
        }
        document.getElementsByTagName("head")[0].appendChild(script);

        function dealData(s){
            if(s==undefined||s==""||s==null) return "";
            if(typeof(s)=="string") return "?"+s;
            if(typeof(s)=="object"){
                var x,newstr="";
                for(var x in s){
                    newstr+= x+"="+s[x]+"&";
                }
                return newstr=="" ? "" : "?"+newstr.substring(0,newstr.lastIndexOf("&"));
            }
        }
    }
})(window)
时间: 2024-11-05 18:01:09

jsonp的封装的相关文章

ajax和jsonp的封装

一直在用jQuery的ajax,跨域也是一直用的jQuery的jsonp,jQuery确实很方便,$.ajax({...})就可以搞定. 为了更好的理解ajax和jsonp,又重新看了下书,看了一些博客,参照他们的代码封装了一个简单的库. 代码地址:http://files.cnblogs.com/zjzhome/ajax.js 使用方法和jQuery类似. 不跨域的话: Z.ajax('test.php', { data: { name: 'zjz', age: 10 }, dataType:

原生javascript实现jsonp的封装

JSONP即JSON with Padding.由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源.如果要进行跨域请求, 我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象. 这种跨域的通讯方式称为JSONP. 我们可以动态的去创建一个script标签,利用他的src属性没有跨域的限制来实现的,相当于我们引入一个js文件 附上源码: jsonp: funct

原生封装Jsonp

大家好!我们又见面了,昨天我们讲了一下jQuery的表单验证插件,今天我们来说一下Jsonp. 我们平常做的页面大部分的数据其实都是从后台获取过来的,最常用的方法就是Ajax,但是Ajax不能跨域取数据,这时我们就要用到Jsonp,那么什么是Jsonp? jsonp原理: 就是利用<script>标签没有跨域的"漏洞"来达到与第三方通讯的目的,当需要通讯时,本站脚本创建一个<script>元素,地址指向第三方API地址,并提供一个回调函数来接受数据,第三方产生为

jsonp封装

//jsonp的封装函数 function jsonp(url,parmter,callback){ //创建script标签 var script=document.createElement('script'); //拼接字符串 randomkey='cdf'+new Date().getTime(); //把拼接的字符串 变成全局变量 相当于callback函数的调用 window['randomkey']=callback; //把数字拼接到  src中 callback url='?c

深入浅出jsonp(转)

前言 第一次听说jsonp,其实早在2年之前.当时在做一个活动页面的抽奖模块,要从服务端get一个概率,当时什么都不懂,同事说用ajax,我就用ajax,同事说dataType改成jsonp,我就改成jsonp.于是乎活动页面做完了,以后也没有碰到过jsonp,在这期间我一直以为jsonp跟ajax息息相关,是xhr的一种特殊的跨域形式...直到一个月前的一次面试,问到jsonp我被虐成狗,才决定看下jsonp,好吧,原来jsonp也不是很难. 为什么要用jsonp? 相信大家对跨域一定不陌生,

关于JSONP的一些易忽略的细节

本人前端渣渣,本文记录的是开始自学时,我自己容易混淆和忽略的细节... 1-JSONP,javascript object notation with padding,翻译成中文就是“参数式JSON”.“填充式JSON”.有没有霍然开朗?好多书里翻译成“有填充的JSON”,意思正好相反,害人不浅. 2-JSONP本质就是一个前后端商量好的协议,至今没有被W3C官方认可,但确是当今最流行的跨域手段.W3C官方认可的是CORS. 3-JSONP的原理只有两点:一.动态建立script标签实现异步.二

深入浅出jsonp

前言 第一次听说jsonp,其实早在2年之前.当时在做一个活动页面的抽奖模块,要从服务端get一个概率,当时什么都不懂,同事说用ajax,我就用ajax,同事说dataType改成jsonp,我就改成jsonp.于是乎活动页面做完了,以后也没有碰到过jsonp,在这期间我一直以为jsonp跟ajax息息相关,是xhr的一种特殊的跨域形式...直到一个月前的一次面试,问到jsonp我被虐成狗,才决定看下jsonp,好吧,原来jsonp也不是很难. 为什么要用jsonp? 相信大家对跨域一定不陌生,

JSONP解决ajax跨域问题

在A域名下,用ajax请求B域名下的请求,会报类似这样的错误:No 'Access-Control-Allow-Origin' header is present on the requested resource. 在响应头中加入一个属性:response.setHeader("Access-Control-Allow-Origin", "*"); 可以解决,但都说有安全问题... 那么就用jsonp的方式解决. 下面是转的文章: JSONP是如何工作的? 我对这

JSONP实现Ajax跨域

同源策略,它是由Netscape提出的一个著名的安全策略. 现在所有支持JavaScript 的浏览器都会使用这个策略. 所谓同源是指,域名,协议,端口相同. 当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面 当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的, 即检查是否同源,只有和百度同源的脚本才会被执行. 如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问. 而标签带有src的可以突破同源策略.例如<img> <sccript>