1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

利用JSONP实现跨域请求

作者:用户 来源:互联网 时间:2016-09-15 10:19:58

数据函数页面参数jsonpdatajsonp跨域 获取jsonajax php jq jsjsonp请求jsonp跨域请求图片跨域跨域请求jsonpjsonp获取json数据cors跨域请求

利用JSONP实现跨域请求 - 摘要: 本文讲的是利用JSONP实现跨域请求,   前言:有时候一忙起来就没了时间观念,原来我已经有十多天没写博客了。一直想做跨域方面的尝试,无奈最近准备校招没时间动动手。今天就先讲讲JSONP吧,昨晚

  前言:有时候一忙起来就没了时间观念,原来我已经有十多天没写博客了。一直想做跨域方面的尝试,无奈最近准备校招没时间动动手。今天就先讲讲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);
}



代码解释:首先给传递的数据中插入一个回调函数名和一个新的时间参数值,让后台获取你要回调的函数名以及防止调用缓存。接下来就是判断之前已经是否发送过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 , data , jsonp跨域 获取json , ajax php jq js , jsonp请求 , jsonp跨域请求 , 图片跨域 , 跨域请求jsonp , jsonp获取json数据 cors跨域请求 jsonp实现跨域请求、ajax跨域请求 jsonp、jsonp跨域请求范例、jsonp跨域请求、原生js跨域请求jsonp,以便于您获取更多的相关知识。

javascript-jsonp 在什么情况下使用??

...jsonp就是一段可以执行的js代码 解决方案四: 就是利用了script可以无视同源策略的优点,进行跨域传递数据。

jquery下利用jsonp跨域访问实现方法_jquery

复制代码 代码如下: $.ajax({ async:false, url: '', // 跨域URL type: 'GET', dataType: 'jsonp', jsonp: 'jsoncallback', //默认callback data: mydata, //请求数据 timeout: 5000, beforeSend: function(){ //jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话...

浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。

ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp;XHR2代理; jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实ajax本身是不可以跨域的,通过产生一个scrip...

由浅入深学习ajax跨域(JSONP)问题

...没变,还是 因为涉及跨域的问题还有一个jquery方法可以实现,那就是$.getJSON,只不过不能指定回调函数,在这里就不演示了,用法都是一样的,来张图: 有的同学能会遇到这样的问题,就是返回的状态码已经是200了,并且也...

jsonp跨域请求学习笔记

...域名,协议,端口相同。 平地一声吼本文讲解的是怎么利用ajax利用jsonp实现跨域请求,那么知道“同源策略”,就可以解决很多疑问:“为毛我的ajax加载不了数据。”“为毛浏览器控制台会对我如此漂亮的代码报错。” 例子1...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备