使用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. 一键生成APP官网

    只需要输入苹果下载地址,安卓市场下载地址,或者内测下载地址,就能一键生成APP的官网,方便在网上推广. 好推APP官网 www.hotapp.cn/app

  2. 二叉树的创建和遍历(C版和java版)

    以这颗树为例:#表示空节点前序遍历(根->左->右)为:ABD##E##C#F## 中序遍历(左->根->右)为:#D#B#E#A#C#F# 后序遍历(左->右-> ...

  3. To Java程序员：切勿用普通for循环遍历LinkedList

    ArrayList与LinkedList的普通for循环遍历 对于大部分Java程序员朋友们来说,可能平时使用得最多的List就是ArrayList,对于ArrayList的遍历,一般用如下写法: p ...

  4. CSharpGL(32)矩阵与四元数与角度旋转轴的相互转换

    CSharpGL(32)矩阵与四元数与角度旋转轴的相互转换 三维世界里的旋转(rotate),可以用一个3x3的矩阵描述:可以用(旋转角度float+旋转轴vec3)描述.数学家欧拉证明了这两种形式可 ...

  5. 在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView

    背景 在前一篇文章<[初学者指南]在ASP.NET MVC 5中创建GridView>中,我们学习了如何在 ASP.NET MVC 中实现 GridView,类似于 ASP.NET web ...

  6. Jps命令—使用详解

    jps是jdk提供的一个查看当前Java进程的小工具, 可以看做是JavaVirtual Machine Process Status Tool的缩写.非常简单实用. 命令格式:jps [option ...

  7. 设计模式之合成/聚合利用原则（CARP）

    一.概念 CARP:CompositionAggregation Principle 合成聚合复用原则,尽量使用合成/聚合,尽量不使用类继承.合成聚合是“has  a”的关系,而继承是“is  a”的 ...

  8. GitHub实战系列~4.把github里面的库克隆到指定目录+日常使用 2015-12-11

    GitHub实战系列汇总:http://www.cnblogs.com/dunitian/p/5038719.html ———————————————————————————————————————— ...

  9. PHP 高级编程(2/5) - 反射API

    PHP 5 具有完整的反射 API,添加了对类.接口.函数.方法和扩展进行反向工程的能力. 此外,反射 API 提供了方法来取出函数.类和方法中的文档注释.通过使用反射API可以分析其他的类.接口.方 ...

  10. 爬虫入门——01

    1. 引言     从今天开始系统的学习网络爬虫.写这篇博客的目的在于,一来记录下自己的学习过程:二来希望可以给像我一样不懂爬虫但又对爬虫十分感兴趣的人带来一些帮助.     昨天去图书馆找有关爬虫书 ...