使用jsonp实现跨域获取数据。

js部分（旧）：

(function(window, document) {

    'use strict';

    var jsonp = function(url, data, callback) {

        //1、挂载回调函数

        var fnsuffix = Math.random().toString().replace('.', '');

        var cbFuncName = 'my_json_cb' + fnsuffix;

        window[cbFuncName] = callback;

        //2、将data转换成url字符串的形式

        //{id=1,count=4}==>id=1&count=4

        var querystring = url.indexOf('?') == -1 ? '?' : '&';     //判断url中最后是否有？，没有则为？

        for (var key in data) {

            querystring += key + '=' + data[key] + '&';

        }

        //3、处理url中回调函数 url+=callback=sdgade

        querystring += 'callback=' + cbFuncName;

        //querystring=?id=1&count=4&callback=sdgade

        //4、创建一个script标签

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

        scriptElement.src = url + querystring;

        //5、把script标签放到页面上

        document.body.appendChild(scriptElement);

    };

    window.$jsonp = jsonp;

})(window, document)

js部分（新）：对js做了一些修改，看的更加明白

(function(window, document) {

    'use strict';

    var jsonp = function(url, data, callback) {

        //1、把data修改成url的格式 ,{id=1,count=4}==>id=1&count=4

        var query = url.indexOf('?') == -1 ? '?' : '&';

        for (var key in data) {

            query += key + '=' + data[key] + '&';

        }

        //2、串联上callback

        var fnsuffix = Math.random().toString().replace('.', '');//生成一个随机数

        var cbName = 'my_jsonp_cb_' + fnsuffix;  //callback的名字为my_jsonp_cd_3398743

        query += 'callback=' + cbName;

        //3、新建script标签

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

        scriptElement.src = url + query;

        //4、执行callback函数,执行完把script标签去掉，以免页面每次刷新都会多个script标签

        window[cbName] = function(data){

            callback(data);

            document.getElementsByTagName('head')[0].removeChild(scriptElement);

        }

        //5、把标签放到页面上

        document.getElementsByTagName('head')[0].appendChild(scriptElement);

    };

    window.jsonp=jsonp;   //把jsonp函数暴露给全局

})(window, document)

在页面中测试

<!DOCTYPE html>
<html>
<head>
<title>jsonp</title>
<script src="http.js"></script>
<script>
(function(){
jsonp('http://api.douban.com/v2/movie/in_theaters',
{count:1},function(data){
console.log(data);
document.getElementById('div1').innerHTML=data.subjects[0].title;
});
})();
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

结果可以返回结果，页面显示为，表示获取成功！

JSONP实现的更多相关文章

  1. 实例操作JSONP原理

    絮语:按这个步骤走,你就会明白JSONP是什么鬼. 1.工程目录: ng-mywork demo.html test.js 2.nginx的server配置 server { listen ; ser ...

  2. angular2系列教程（九）Jsonp、URLSearchParams、中断选择数据流

    大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp.URLSearchParams.observable中断选择数据流的用法. 例子

  3. 疯狂的JSONP

    何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...

  4. 通过扩展让ASP.NET Web API支持JSONP

    同源策略(Same Origin Policy)的存在导致了"源"自A的脚本只能操作"同源"页面的DOM,"跨源"操作来源于B的页面将会被拒 ...

  5. 跨域的jsonP

    1.出现原因:因为web中的同源策略(域名,协议,端口号)限制了跨域访问.   2.区别于json (个人理解)json是数据交换格式,jsonp是数据通信中的交互方式   3.jsonp的get与p ...

  6. ASP.NET Web API 配置 JSONP

    之前的一篇博文:jsonp跨域+ashx(示例) 1. 安装 Jsonp 程序集: PM> Install-Package WebApiContrib.Formatting.Jsonp PM&g ...

  7. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  8. 跨域之jsonp

    我们都知道使用<script>标签可以引入外部的JS文件,即使这个JS文件来自于其他的网站,比如我们引用存放在网络服务器上的jQuery框架.在这个过程中,我们已经实现跨域访问.像< ...

  9. 由浅入深学习ajax跨域(JSONP)问题

    什么是跨域?说直白点就是获取别人网站上的内容.但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子. 来看看跨域的例子,jquery+ajax是不能跨域请求 ...

  10. JSONP的诞生、原理及应用实例

    问题: 页面中有一个按钮,点击之后会更新网页中的一个盒子的内容. Ajax可以很容易的满足这种无须刷新整个页面就可以实现数据变换的需求. 但是,Ajax有一个缺点,就是他不允许跨域请求资源. 如果我的 ...

随机推荐

  1. NV显卡Ubuntu14.04更新软件导致登录死循环，不过可以进入tty模式

    注意:此方法只适用于nv显卡的电脑! 在网上寻找各种方法无果的情况下,选择重新安装显卡驱动,成功登录进入图形界面. 一.首先需要在另外一台电脑(windows系统也可以)上下载NVIDIA相应显卡驱动 ...

  2. C 盘的不速之客

      C 盘的报告内容既然上GB的空间 操作系统版本 原来是微软这个查找解决异常关闭解决方案生成的报告   参考 How To Disable Vista Error Reporting Feature ...

  3. Linux测试环境搭建的学习建议

    随着Linux应用的扩展许多朋友开始接触Linux,根据学习Windwos的经验往往有一些茫然的感觉:不知从何处开始学起.这里介绍学习Linux测试环境搭建的一些建议. 一.Linux测试环境搭建从基 ...

  4. 运用Mono.Cecil 反射读取.NET程序集元数据

    CLR自带的反射机智和API可以很轻松的读取.NET程序集信息,但是不能对程序集进行修改.CLR提供的是只读的API,但是开源项目Mono.Cecil不仅仅可以读取.NET程序集的元数据,还可以进行修 ...

  5. 在rem布局下使用背景图片以及sprite

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...

  6. Leetcode 笔记 112 - Path Sum

    题目链接:Path Sum | LeetCode OJ Given a binary tree and a sum, determine if the tree has a root-to-leaf ...

  7. ABP(现代ASP.NET样板开发框架)系列之3、ABP分层架构

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之3.ABP分层架构 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...

  8. node.js里npm install --save 与 npm install --save-dev 的区别

    在package.json可以看到一个放在package.json 的dependencies , 一个放在devDependencies里面. 目前找到的一些解答:真正跑在用户浏览器中的代码,比如j ...

  9. 解决浏览器Chrome net::ERR_BLOCKED_BY_CLIENT

    问题: 开发的公司内部后台应用页面显示异常,获取不到资源 F12 提示 net::ERR_BLOCKED_BY_CLIENT 很困惑,用Chrome打开页面就异常,IE什么的就没问题- 原因:广告拦截 ...

  10. 列属性：RowGUIDCol、Identity 和 not for replication

    Table Column有两个特殊的属性RowGUIDCol 和 Identity,用于标记数据列: $ROWGUID 用于引用被属性 RowGUIDCol 标识的UniqueIdentifier 类 ...