使用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. TFS 2015 敏捷开发实践 – 在Kanban上运行一个Sprint

    前言:在 上一篇 TFS2015敏捷开发实践 中,我们给大家介绍了TFS2015中看板的基本使用和功能,这一篇中我们来看一个具体的场景,如何使用看板来运行一个sprint.Sprint是Scrum对迭 ...

  2. HTML5 标签 details 展开 搜索

    details有一个新增加的子标签--summary,当鼠标点击summary标签中的内容文字时,details标签中的其他所有元素将会展开或收缩. 默认状态为 收缩状态 设置为展开状态为 <d ...

  3. CentOS7 + mono +Jexus 环境的搭建

    CentOS7的安装和配置 1,从http://www.centos.org/下载CentOS7的镜像,并在VMWare中创建该镜像的虚拟机,为方便操作,把虚拟机的网络连接设置为桥接模式:在安装过程中 ...

  4. 从is(":checked")说起

    *此文所用jQuery版本应大于1.6.1   如何判断一个单选(复选)框是否选中. 对于刚接触jQuery的人,第一反应必然是. <input id="checkbox1" ...

  5. CSS垂直居中总结

    工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 <div class="container"> & ...

  6. ABP源码分析四十四：ZERO的配置

    ABP Zero模块中需要配置的地方主要集中在三块:配置静态的role,配置外部认证源,以及配置本地化语言和资源. UserManagementConfig/IUserManagementConfig ...

  7. Windows.document

    一.找到元素: document.getElementById("id");根据id找,最多找一个 var a =document.getElementById("id& ...

  8. Spark Shuffle原理、Shuffle操作问题解决和参数调优

    摘要: 1 shuffle原理 1.1 mapreduce的shuffle原理 1.1.1 map task端操作 1.1.2 reduce task端操作 1.2 spark现在的SortShuff ...

  9. AngularJs之四

    一,数据循环:特别要注意作用域 使用ng-repeat指令. <div ng-app="myApp" ng-controller="myCtrl"> ...

  10. ASP.NET Core的配置（5）：配置的同步[ 实例篇]

    ConfigurationBuilder在生成以Configuration对象的时候会利用注册其中的ConfigurationProvider加载原始的配置数据,那么一旦配置源中的数据发生变化,应用程 ...