jsonp是跨域请求的手段之一。

jsonp的原理：

先来看看下面这段代码

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

    </head>

    <script>

        function fn(response){

            alert(response);

        }

    </script>

    <body>

    </body>

    <script src='jsonp.js'></script>//注意这里：jsonp.js 这个js文件中其实只有一句话 fn('响应内容');

</html>

所以原理很简单，其实就是我们定义好了一个方法，然后后台返回一串字符串，而这个字符串又刚好就是一个函数的执行。

（

fn('响应内容')  这是js文件的内容，本身就是一个函数的执行。

）

类似：eval("fn('响应内容')");

封装jsonp：

由于ajax不能跨域，所以我们有必要封装一个跨域请求的jsonp方法。

function jsonpAsync(object){

        //默认参数

        var _object = {

            url:"",

            jsonp:"",

            request:{},

            callback:function(respose){}

        };

        //覆盖默认参数

        for(var key in object){

            _object[key] = object[key];

        }

        //生成一个唯一的方法名

        var fnName = 'jxf_' + new Date().getTime();

        //url参数拼接

        if(_object.url.indexOf('?') < ){

            _object.url += '?';

        }

        for(var key in _object.request){

            if (key != 'jsonp') {

                _object.url += '&'+key + '=' + _object.request[key];

            };

        }

        _object.url += '&'+_object.jsonp + '=' + fnName;

        //创建script标签

        var scriptTag = document.createElement('script');

        //将方法注册到全局

        window[fnName] = function(response){

            try{

                _object.callback(response);

            }catch(e){

                console.log(e);

            }finally{

                //最后删除该函数与script元素

                scriptTag.parentNode.removeChild(scriptTag);

                delete window[fnName];//=null

            }

        }

        scriptTag.src = _object.url;

        document.getElementsByTagName('head')[].appendChild(scriptTag);

    }

    jsonpAsync({url:'http://localhost:81/jsonp/jsonp.php',jsonp:'jsonp', callback:function(response) {

            alert(response.text);

    }});

简单点，后台就用php了

<?php

    echo $_GET['jsonp']."({text:'响应内容'})";

?>

Jquery中ajax中的jsonp：

$.ajax({

        type : "get",

        async: false,

        url : "http://localhost:81/jsonp/jsonp.php",

        dataType : "jsonp",

        jsonp: "jsonp",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名

        //jsonpCallback:"zidingyi",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名(类似：jQuery1102016820125747472048_1450147653563({text:'响应内容'}});)

        success : function(data){

            console.log(data);

        },

        error:function(){

            console.log('fail');

        }

    });

最后引用一篇比较完成的jsonp的封装：原文链接http://blog.csdn.net/liusaint1992/article/details/50959571

// 主要实现功能：

        // 1.参数拼装。

        // 2.给每个回调函数唯一命名。

        // 3.在回调成功或请求失败之后删除创建的JavaScript标签。 需要兼容IE。IE下onerror事件不兼容。这里有对它的模拟实现。在IE下加载失败也能get到。

        // 4.超时功能。超时取消回调。执行error。

        // 5.error事件。可执行自己传入的error事件。

        function JSONP(url,config){

            var data = config.data || [];

            var paraArr=[],paraString='';//get请求的参数。

            var urlArr;

            var callbackName;//每个回调函数一个名字。按时间戳。

            var script,head;//要生成script标签。head标签。

            var supportLoad;//是否支持 onload。是针对IE的兼容处理。

            var onEvent;//onload或onreadystatechange事件。

            var timeout = config.timeout || 0;//超时功能。  

            for(var i in data){

                if(data.hasOwnProperty(i)){

                    paraArr.push(encodeURIComponent(i) + "=" +encodeURIComponent(data[i]));

                }

            }  

            urlArr = url.split("?");//链接中原有的参数。

            if(urlArr.length>1){

                paraArr.push(urlArr[1]);

            }  

            callbackName = 'callback'+new Date().getTime();

            paraArr.push('callback='+callbackName);

            paraString = paraArr.join("&");

            url = urlArr[0] + "?"+ paraString;  

            script = document.createElement("script");

            script.loaded = false;//为了实现IE下的onerror做的处理。JSONP的回调函数总是在script的onload事件（IE为onreadystatechange）之前就被调用了。因此我们在正向回调执行之时，为script标签添加一个属性，然后待到onload发生时，再检测有没有这个属性就可以判定是否请求成功，没有成功当然就调用我们的error。  

            //将回调函数添加到全局。

            window[callbackName] = function(arg){

                var callback = config.callback;

                callback(arg);

                script.loaded = true;

            }  

            head = document.getElementsByTagName("head")[0];

            head.insertBefore(script, head.firstChild) //chrome下第二个参数不能为null

            script.src = url;  

            supportLoad = "onload" in script;

            onEvent = supportLoad ? "onload" : "onreadystatechange";  

            script[onEvent] = function(){  

                if(script.readyState && script.readyState !="loaded"){

                    return;

                }

                if(script.readyState == 'loaded' && script.loaded == false){

                    script.onerror();

                    return;

                }

                //删除节点。

                (script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));

                script = script[onEvent] = script.onerror = window[callbackName] = null;  

            }  

            script.onerror = function(){

                if(window[callbackName] == null){

                    console.log("请求超时，请重试！");

                }

                config.error && config.error();//如果有专门的error方法的话，就调用。

                (script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));

                script = script[onEvent] = script.onerror = window[callbackName] = null;

            }  

            if(timeout!= 0){

                setTimeout(function() {

                    if(script && script.loaded == false){

                        window[callbackName] = null;//超时，且未加载结束，注销函数

                        script.onerror();

                    }

                }, timeout);

            }  

        }

html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>jsonp测试</title>

    <script src="jsonp.js"></script>

</head>

<body>

    <script>

        function myerror(){

            alert('there must be something wrong!');

        }

        function getData (data){

            alert("服务器过来的数据是"+data);

        }

        var url = 'http://runningls.com/demos/2016/jsonp/jsonp.php';

        //调用函数。

        JSONP(url,{

            data:{

                id:1

            },

            callback:getData,

            error:myerror,

            timeout:10000

        });

    </script>

</body>

php

<?php   

$callback = $_GET['callback'];

$id = $_GET['id'];  

if($id == ){

    $res = 'this is 1';

}  

if($id == ){

    $res = 'this is 2';

}  

$res = $callback."('$res')";  

echo $res;  

?>

js跨域请求（jsonp）的更多相关文章

  1. JS跨域请求 JSONP B/S全代码

    Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准:Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有 ...

  2. js跨域请求jsonp解决方案-最简单的小demo

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  3. js跨域请求方式 ---- JSONP原理解析

    这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下     跨域请求数据解决方案主要有如下解决方法:   1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...

  4. jquery跨域请求jsonp

    服务端PHP代码  header('Content-Type:application/json; charset=utf-8'); $arr = array('a'=>1, 'b'=>2, ...

  5. js跨域请求数据的3种常用的方法

    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript   在 ...

  6. 浏览器同源策略，跨域请求jsonp

    浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...

  7. JS跨域：jsonp、跨域资源共享、iframe+window.name

    JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有 ...

  8. 【JS跨域请求】Ajax跨域请求JSONP

    前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...

  9. JS跨域请求之JSONP

    在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. JSONP的产生 1.众所周知,Ajax请 ...

随机推荐

  1. MingW-v4.8.0+EDE-v13.04 配置使用C语言图形库

    From: http://www.cnblogs.com/killerlegend/p/3946768.html Author:KillerLegend Date:2014.8.30 MingW的配置 ...

  2. 关于Spring mvc注解中的定时任务的配置

    关于spring mvc注解定时任务配置 简单的记载:避免自己忘记,不是很确定我理解的是否正确.有错误地方望请大家指出. 1,定时方法执行配置: (1)在applicationContext.xml中 ...

  3. H - Tickets dp

    题目链接: https://cn.vjudge.net/contest/68966#problem/H AC代码; #include<iostream> #include<strin ...

  4. PCA和白化练习之处理二维数据

    在很多情况下,我们要处理的数据的维度很高,需要提取主要的特征进行分析这就是PCA(主成分分析),白化是为了减少各个特征之间的冗余,因为在许多自然数据中,各个特征之间往往存在着一种关联,为了减少特征之间 ...

  5. 【技术知识】恶意PDF文件分析-PDFdump的问题

    1.提醒 百度分析恶意PDF文件,很多都是推荐PDFdump.在某次沙箱产品分析出疑似高级威胁的PDF样本后,我使用PDFdump查看ShellCode的加密数据,分析后并没有找到相关的ShellCo ...

  6. va_start()，va_end()函数应用【转】

    转自:http://www.cnblogs.com/gogly/articles/2416833.html 原理解释: VA_LIST 是在C语言中解决变参问题的一组宏,在<stdarg.h&g ...

  7. .NET下获取应用程序目录的一些方法

    今天在Console Application下搞了一个小功能,期间需要获取当前应用程序的根目录,试了很多方式,都不能直接获取到,没有像Server.MapPath()这类的方法来方便地使用. 下面列举 ...

  8. springcloud Zuul中异常处理细节

    Spring Cloud Zuul对异常的处理整体来说还是比较方便的,流程也比较清晰,只是由于Spring Cloud发展较快,各个版本之间有差异,导致有的小伙伴在寻找这方面的资料的时候经常云里雾里, ...

  9. node.js开发web

    1.安装express框架 使用npm install -g express安装express后,在命令行中执行express,提示没有此命令 原因是在新版的express中命令行需要单独安装 npm ...

  10. java 捕获所有异常

    1.) 通过捕获异常类型的基类Exception就可以处理所有类型的异常.(事实上还有其它的基类,但Exception是同编程活动相关的基类) 2.)因为Exception是与编程有关的所有异常类的基 ...