jQuery中jsonp的跨域注意

最新推荐文章于 2023-04-13 08:11:30 发布

一个年代的悲剧

最新推荐文章于 2023-04-13 08:11:30 发布

阅读量550

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/bbmmgg25/article/details/9312807

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1）测试环境：
本地wamp环境运行自己的代码，但是需要调用呼叫中心Linux服务器上的192.168.1.69中的php脚本

2）下面是成功的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jsonp测试</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">

  function dealData(data){
    console.log("999");
    console.log(data);
  }

  jQuery(document).ready(function(){
   $.ajax({
     type: "GET",
     url:"http://192.168.1.69/jsonp.php",
     async: false,
     data: {exten:801},
     dataType: "jsonp",
     jsonp: "callback",
     jsonpCallback:"dealData",
     success: function(data){
      alert('您查询到航班信息：票价： ' + data.price + ' 元，余票： ' + data.tickets + ' 张。回调函数名为: '+data.func);
     },
     error: function(){
      alert("服务器响应失败!");
     }
   });
  });

</script>
</head>

<body>
</body>
</html>
远端域名服务器192.168.1.69上面的jsonp.php代码如下
[root@bgcc69:/var/www/html]$more jsonp.php
<?php
        $callback = $_GET["callback"];
        $a = array(
            'code'=>'CA1998',
            'price'=>'6000',
            'tickets'=>20,
            'func'=>$callback,
        );
        $param = json_encode($a);
        //echo $param;die;
        echo "dealData($param)";
        exit;

?>

例子解析说明：
1. jsonp本质不是ajax，但是jquery封装成ajax了。所以用firebug的XHR中是看不到客户端相关ajax的请求信息的。
2. jsonp本质是javascript的 src属性，所以一旦采用jsonp，那么$.ajax()的type必须为" GET"，不能为POST,上面可以省略不写，默认就是GET传参
3. jsonp: " callback", 这个表示客户端将会用查询字符串 &callback=回调函数名发送到服务器端的jsonp.php脚本，服务器可以通过$_GET['callback']取到这个函数函数名称。callback是默认的参数名,当然也可以指定其他名字，但是没有必要。另外要注意：服务器端脚本jsonp.php处理后，返回的字符串格式为：回调函数(json参数) ，【已测试】这里的回调函数必须和客户端请过过来的callback参数指定的字符串一样，否则jsonp执行失败，达不到预期效果。
4. jsonpCallback:"dealData", 这行就是声明回调函数名，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据这里的毁掉函数名必须在jsonp.php处理脚本中被返回，否则报错。其实实质上是指定查询字符串 &callback=dealData 。上面的查询字符串你可以在firefox中的firebug中看得到，jsonp和jsonpCallback其实就是提交了一个查询字符串——&callback=dealData 。说道这里就不爽，直接在data:{...,callback:'dealData'}为毛不好，非要搞两个域——jsonp 和 jsonpCallback ，jsonp真是非标准的烂技术！！！
5. success: function(data){} ,此成功处理函数，不同于正宗ajax的回调函数。总之这里是请求成功后执行的代码。如果上面制定了callback函数名，会先执行dealData()函数，然后再执行这里的成功处理函数。其实对于jsonp，这里不行也要有这个函数，去掉就行，完全可以在前面定义dealData()回调函数。测试发现，去掉 success: function(data){}和 error: function(){} 两段，程序照样执行，但是一定要定义回调函数dealData() 。如果不去掉success: function(data) {} ,你会发现这里执行的参数data其实就是服务器端返回给回调函数dealData(data) 里面的参数data，都是同一个值的json数据格式。

下面有好几处陷阱：
1）回调函数，必须定义为全局作用域，如果定义在jQuery(document).ready(function(){......})里面，就没法回调。因为jQuery(document).ready()是在全局作用域执行的。
2）下面这个去掉了success: 等，是正确的
<script type="text/javascript">

  function dealData(data){
    console.log("999");
    console.log(data);
  }

  jQuery(document).ready(function(){
   $.ajax({
     type: "GET",
     url:"http://192.168.1.69/jsonp.php",
     data: {"exten": "801"},
     dataType: "jsonp",
     jsonp: "callback",
     jsonpCallback:"dealData"
   });
  });

</script>

3）服务器端jsonp.php 输出的字符串中的函数部分，必须和域指定的字符串一致，否则将执行error: 中的代码。

4)经测试，jquery的ajax jsonp对同步或异步请求没有影响

好文章：

http://www.cnblogs.com/know/archive/2011/10/09/2204005.html

================下面发现这样也可以调用

</script>

但是用$.getJSON的方式，看不出要调用哪个回调函数，不直观，只有在服务器中指定了需要调用dealData()

=========================

好文章：

http://www.cnblogs.com/myjavawork/articles/1911263.html

jsonp的最基本的原理是:动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了.
这样其实"jQuery AJAX跨域问题"就成了个伪命题了,jquery $.ajax方法名有误导人之嫌.
如果设为dataType: 'jsonp', 这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议.
JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，
我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。
这种跨域的通讯方式称为JSONP。

Jsonp原理：

首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意：服务端得到callback的数值后，要用jsonp1236827957501(......)把将要输出的json内容包括起来，此时，服务器生成 json 数据才能被客户端正确接收。

然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时javascript文档数据,作为参数，
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.（动态执行回调函数）

可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.