使用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. MapReduce

    2016-12-21  16:53:49 mapred-default.xml mapreduce.input.fileinputformat.split.minsize 0 The minimum ...

  2. About me

    stay hungry, stay foolish VaJoy / 蓝邦珏 Addr:Tencent Shenzhen E-Mail:vajoy@qq.com 站内:http://space.cnbl ...

  3. MyBatis3：SQL映射

    前言 前面学习了config.xml,下面就要进入MyBatis的核心SQL映射了,第一篇文章的时候,student.xml里面是这么写的: <?xml version="1.0&qu ...

  4. 小丁带你走进git世界五-远程仓库

    一.文件,指令讲解 首先讲一下远程仓库和本地仓库在文件上面的区别,首先我们来看下对比图(当然这里说的区别是在于.git文件下面的文件内容,至于里面内容我们不会关注)這裡我们进行了相同的操作就是本地仓库 ...

  5. MailKit---获取邮件

    MailKit是一个免费开源的邮箱类库,简单来说MailKit帮我们封装了有关邮箱的一些帮助类,提供方法让我们更容易使用邮箱的Smtp,Imap等邮箱协议. 现在的邮箱基本上都使用smtp协议从邮件服 ...

  6. 环境搭建系列-系统安装之centos 6.5安装与配置

    按照国际惯例,系列目录先奉上: 系列一:系统安装之centos 6.5安装与配置 系列二:准备工作之Java环境安装 系列三:数据为先之MySQL读写集群搭建 系列四:谈分布式之RabbitMQ集群搭 ...

  7. 最好的5个Android ORM框架

    在开发Android应用时,保存数据有这么几个方式, 一个是本地保存,一个是放在后台(提供API接口),还有一个是放在开放云服务上(如 SyncAdapter 会是一个不错的选择). 对于第一种方式, ...

  8. 劈荆斩棘：Gitlab 部署 CI 持续集成

    阅读目录: install configue gitlab-ci-multi-runner restore nuget packages bulid .sln run unit tests confi ...

  9. Python笔记之不可不练

    如果您已经有了一定的Python编程基础,那么本文就是为您的编程能力锦上添花,如果您刚刚开始对Python有一点点兴趣,不怕,Python的重点基础知识已经总结在博文<Python笔记之不可不知 ...

  10. javascript学习笔记一

    今天看的javascript 应用开发实践指南 看了js库 jquery ,明确了要深入学习jquery的想法. 对于javascript原生态的ajax写法(兼容性只需考虑ie6),封装为函数: f ...