使用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. 第13章 Linux日志管理

    1. 日志管理 (1)简介 在CentOS 6.x中日志服务己经由rsyslogd取代了原先的syslogd服务.rsyslogd日志服务更加先进,功能更多.但是不论该服务的使用,还是日志文件的格式其 ...

  2. 微信小程序之用户数据解密(七)

    [未经作者本人同意,请勿以任何形式转载] 经常看到有点的小伙伴在群里问小程序用户数据解密流程,所以打算写一篇关于小程序用户敏感数据解密教程: 加密过程微信服务器完成,解密过程在小程序和自身服务器完成, ...

  3. opengl 笔记（1）

    参考<opengl入门教程>.<OpenGL之坐标转换>.<OpenGL绘制管线操作细节>等资料. 复习下留个备忘:) /*- * Opengl Demo Test ...

  4. 在多线程编程中lock（string）{...}隐藏的机关

    常见误用场景:在订单支付环节中,为了防止用户不小心多次点击支付按钮而导致的订单重复支付问题,我们用 lock(订单号) 来保证对该订单的操作同时只允许一个线程执行. 这样的想法很好,至少比 lock( ...

  5. Visual Studio Code，完美的编辑器

    今日凌晨,微软的文本(代码)编辑器 Visual Studio Code(简称 VS Code),发布了首个正式版,距离首个 beta 版上线时间刚好一年. 在十多年的编程经历中,我使用过非常多的的代 ...

  6. ASP.NET MVC Model元数据(四)

    ASP.NET MVC Model元数据(四) 前言 前面的篇幅讲解了Model元数据生成的过程,并没有对Model元数据生成过程的内部和Model元数据结构的详细解释.看完本篇后将会对Model元数 ...

  7. 非阻塞/异步(epoll) openssl

    前段时间在自己的异步网络框架handy中添加openssl的支持,当时在网络上搜索了半天也没有找到很好的例子,后来自己慢慢的摸索,耗费不少时间,终于搞定.因此把相关的资料整理一下,并给出简单的例子,让 ...

  8. WCF学习之旅—WCF4.0中的简化配置功能（十五）

    六 WCF4.0中的简化配置功能 WCF4.0为了简化服务配置,提供了默认的终结点.绑定和服务行为.也就是说,在开发WCF服务程序的时候,即使我们不提供显示的 服务终结点,WCF框架也能为我们的服务提 ...

  9. 三个不常用的HTML元素：<details>、<summary>、<dialog>

    前面的话 HTML5不仅新增了语义型区块级元素及表单类元素,也新增了一些其他的功能性元素,这些元素由于浏览器支持等各种原因,并没有被广泛使用 文档描述 <details>主要用于描述文档或 ...

  10. 难道.NET Core到R2连中文编码都不支持吗？

    今天写了一个简单的.NET Core RC2控制台程序,发现中文显示一直是乱码.查看操作系统设置,没有问题:查看源文件编码,也没有问题:甚至查看了Console字符编码相关的注册表,依然没有发现问题. ...