前言：有时候一忙起来就没了时间观念，原来我已经有十多天没写博客了。一直想做跨域方面的尝试，无奈最近准备校招没时间动动手。今天就先讲讲JSONP吧，昨晚还在研究QQ空间日志里面网络图片的问题呢，我发现日志还提供了HTML模式，我们可以利用img标签的src属性实现跨域请求，从自己的服务器里提取动态内容。

JSONP

　　在讲实现之前，我们先来看看何为JSONP。以下是维基百科的解释：

　　JSONP or "JSON with padding" is a communication technique used in JavaScript programs running in web browsers to request data from a server in a different domain, something prohibited by typical web browsers because of the same-origin policy. JSONP takes advantage of the fact that browsers do not enforce the same-origin policy on <script> tags. Since it works through <script> tags, JSONP supports only the GET request method. There are significant security implications and risks associated to using JSONP; unless you have no choice, CORS is usually the better choice.

　　我粗陋翻译一下：JSONP又称JSON with padding，它是用在浏览器上运行的JS程序里的一项交互技术，目的是为了从不同的服务器域名上请求数据。由于同源政策的限制，部分功能会受到浏览器的禁止。JSONP利用的是浏览器不会对<script>标签实施同源政策的情况。又因为它是通过<script>作用的，所以JSONP只支持GET请求方式。但值得注意的是，使用JSONP会存在安全隐患和危险。CORS（跨域资源共享，Cross-Origin Resource Sharing）是一个更为常用的佳选，除非你没得选。

解释：　　

　　简单来说就是，一般情况下，在本域名的页面想要获取其他域名下的数据是会受到限制的。但是在HTML页面中的<script>（img,iframe亦可）就突破了这种限制，可以通过src属性来访问其他域名并获得返回的数据，但这种方法并不安全，只能通过GET方法获取。

　　其实我们平常稍加留意，就不难发现其实我们平常在页面中使用CDN也是这个原理，我们的页面同样可以访问其他服务器上的JS文件。

　　如我们常用的百度CDN，我们通常在<head>里面加上是<script>标签就可以使用其他服务器的CDN。

　　<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>

　　只不过稍有不同的是现在变为向服务器运行文件请求数据，然后再以JavaScript的形式返回。

客户端实现：

　　JSONP是一种非正式传输协议，具体传输内容以及格式可以由用户自己定义。不过我觉得JSONP可能会在ES6中新增也说不定哦，到时候可能会规范传输格式。JSONP其中有一个要点就是允许用户传递一个callback参数给服务端，然后服务端输出的数据作为callback的参数再一并返回到客户端页面，最后根据参数在客户端页面执行这个回调函数，最终达到返回数据并处理的目的。

　　代码形式如下：

 <head>

     <meta charset="UTF-8">

     <title>JSONP</title>

     <script type="text/javscript">

         var cbFn = function(str){

             alert(str);

         }

     </script>

     <script src="http://www.sp0.baidu.com?data=value&cb=cbFn"></script>

 </head>

　　首先要预定义一个回调函数，用于处理返回数据；其次请求数据的<script>标签的src要传递请求参数以及回调的函数名字到后台，这一点要沟通协调好。

　　由于在实际应用中请求地址、请求参数以及次数都是不固定的，所以我们要把JSONP封装成一个函数，增强灵活性和复用性。

   var s1;

   function jsonp(url,data,cb){

     data.cb = cb?cb:"callback";

     data.t = new Date().getTime();

     for (var i in data){

         var str = i+"="+data[i];

         arr.push(str);

    }

    var str = url+"?"+arr.join("&");

    var headEl = document.getElementsByTagName("head")[0];

    if (s1){

          headEl.removeChild(s1);

    }

    s1 = document.createElement("script");

    s1.src = str;

    headEl.appendChild(s1);
17　}

　　代码解释：首先给传递的数据中插入一个回调函数名和一个新的时间参数值，让后台获取你要回调的函数名以及防止调用缓存。接下来就是判断之前已经是否发送过JSONP请求，如果存在，则删除重建。

服务端实现：

　　假设我在客户端执行了以下请求

 jsonp("http://www.chengguanhui.com/test.php",{

     name:"ray",

     age:23

 },"cbFn");

 cbFn(str){

     alert(str);

 }

　　那么HTTP传递的URL为http://www.chengguanhui.com/test.php?name=ray&age=23cb=cbFn&t=242566(某个不定时间值)

　　PHP代码：

 <?php

     require_once("common.php");

     $name = $_GET['name'];

     $age = $_GET['age'];

     $cb = $_GET['cb'];

     $str = $name.$age;

     echo $cb."(".$str.")";

 ?>

　　客户端接收到cbFn("ray23")并弹出对应内容。

JQ实现：

　　$.ajax(url,[settings])

  $.ajax({

              type: "get",

              url: "http://www.chengguanhui.com/test.php",

              dataType: "jsonp",

              data: "name=ray&age=23",

              jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)

              jsonpCallback:"handleFn",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据

              success: function(json){

                  alert(json.name+json.age);

              },

              error: function(){

                  alert('fail');

              }

          });

      });

　　$.getJSON(url,data,callback)

 $.getJSON("http://www.chengguanhui.com/test.php",//如果请求值固定时，可以省略data参数而直接写在url参数里。

     {

     name:ray,

     age:23

 },

 function(data){

   $.each(data.items, function(i,item){

      alert(i+item);

   });

 });

　　说明：原创文章，转载全文内容或非翻译内容时，请注明出处与作者。谢谢。

利用JSONP实现跨域请求的更多相关文章

  1. 利用Jsonp实现跨域请求，spring MVC+JQuery

    1 什么是Jsonp? JSONP(JSON with Padding)是数据格式JSON的一种"使用模式",可以让网页从别的网域要数据.另一个解决这个问题的新方法是跨来源资源共享 ...

  2. 关于使用Jsonp做跨域请求

    今天在使用Jsonp做跨域请求的练习时碰上这样一个问题 代码如下 <!DOCTYPE html> <html> <head> <meta charset=&q ...

  3. 使用jsonp进行跨域请求

    使用jsonp进行跨域请求 在实际的业务中很多时候需要用到跨域请求,然而jsonp为我们提供了一种非常方便的跨域请求的方式,具体实现代码如下: $.ajax({ type:"get" ...

  4. Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

    由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...

  5. 使用Jsonp实现跨域请求

    来自百度百科的一段话: JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.exampl ...

  6. jsonp原理,跨域请求头处理

    一.jsonp(解决跨域)思路介绍: 因浏览器的同源策略不会拦截link标签内的src请求,所以利用这一点,我们把后端开放的接口路径放在src内, 其在发送请求后会自动接收返回的东西,所以我们可以给要 ...

  7. CORS和jsonp实现跨域请求

    同源策略:所谓同源是指,域名,协议,端口相同,它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略.当浏览器同时打开两个tab页面(两个不同服务器 ...

  8. 利用CORS实现跨域请求（转载）

    跨域请求一直是网页编程中的一个难题,在过去,绝大多数人都倾向于使用JSONP来解决这一问题.不过现在,我们可以考虑一下W3C中一项新的特性--CORS(Cross-Origin Resource Sh ...

  9. 来说说SpringMVC + JSONP的跨域请求

    先来说说场景,JSON,这货大家应该都懂,不懂的请自动面壁思过,那么什么是JSONP,不是JSON放了个P就叫JSONP,而是JSON with Padding,在进行跨域请求的时候需要的数据,什么是 ...

随机推荐

  1. 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

    Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flas ...

  2. 使用Ambari安装hadoop集群

    最近需要做些spark的工作,所以弄了几台dell7500就这么准备开始搭建集群,之前用过几台更破的台式机搭建过一次,折腾了半个月之久,终于成功搭建,这次不想走老路,所以网上查了一下,发现一个神器AM ...

  3. Anti-If: The missing patterns--转

    原文地址:http://code.joejag.com/2016/anti-if-the-missing-patterns.html Around 10 years ago I encountered ...

  4. Android 2.x中使用actionbar - Actionbarsherlock

    1. 范例说明 从Android 3.0开始,Android引入了ActoinBar,不得不说3.0之前android的标题栏确实比较丑,并且还没有任何功能. 之前很多应用的顶部栏很多都是仿苹果的,比 ...

  5. Microsoft Azure News(1) 新的数据中心Japan East, Japan West and Brazil South

    <Windows Azure Platform 系列文章目录> 微软官方博客今天表示,微软宣布将在日本东部(埼玉县)和日本西部(大阪)提供Windows Azure服务.就在最近,微软为W ...

  6. Hyperledger中数据存取的实现

    简介 本文介绍了在Hyperledger中数据存取的实现. API接口 Hyperledger提供基于key/value的数据存储,其中key是字符串,value则是二进制字节数组,Hyperledg ...

  7. 浅谈图片蒙版效果-webkit-mask

    会用PS的童鞋一定知道“蒙版”的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效果. 大家对-web ...

  8. 30天C#基础巩固------this,base,string中的方法，StringBuilder性能

    这里主要是记录下自己学习笔记,希望有个地方在以后可以看到自己走过的路. 关于之前多态的知识有一个口诀,很好理解里面的override和new,virtual关键字. "new则隐藏,over ...

  9. LINQ to SQL语句(2)之Select/Distinct

    适用场景:o(∩_∩)o- 查询呗. 说明:和SQL命令中的select作用相似但位置不同,查询表达式中的select及所接子句是放在表达式最后并把子句中的变量也就是结果返回回来:延迟.Select/ ...

  10. LINQ to SQL语句(1)之Where

    适用场景:实现过滤,查询等功能. 说明:与SQL命令中的Where作用相似,都是起到范围限定也就是过滤作用的,而判断条件就是它后面所接的子句.Where操作包括3种形式,分别为简单形式.关系条件形式. ...