解决浏览器的XHR跨域请求限制之使用JSONP发起跨域异步请求

最新推荐文章于 2023-11-12 22:51:07 发布

weixin_33841722

最新推荐文章于 2023-11-12 22:51:07 发布

阅读量644

点赞数

文章标签： javascript json php ViewUI

原文链接：https://my.oschina.net/webcaorui/blog/1546725

版权

2019独角兽企业重金招聘Python工程师标准>>>

跨域请求：

Cross Domain Request：从一个资源请求另一个资源，二者所在的请求地址不同，域名不同、端口号不同、请求协议不同。红色字体都是跨域

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

JSON: JavaScript Object Notation，是一种字符串数据格式(羊肉)。

JSONP：

JSON with Padding，填充式JSON，与JSON完全两码事，是一种使用JSON数据的方式(把羊肉红烧)。

意思是在JSON字符串左右添加函数名： doResponse( {"ename":"Tom", "age":20} );

JSONP是专用于解决XHR跨域限制一种手段。

基本原理：使用动态创建的一个SCRIPT标签代替XHR发起异步请求，要求服务器必须返回application/javascript，立即在客户端执行——要执行的函数本体在客户端浏览器中声明。

案列：

html

<!doctype html>
<html>
  <head>
    <title>标题</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h3>使用JSONP解决浏览器XHR跨域请求限制</h3>
    <button id="bt1">异步请求</button>

    <script src="js/jquery-1.11.3.js"></script>
    <script>
    $('#bt1').click(function(){
      //使用一个异步请求的SCRIPT标签代替了XHR
      var s = document.createElement('script');
      s.src = "http://localhost/AJAX_DAY08/8_jsonp.php?callback=doEmpData";
      s.async = true; //浏览器请求该script内容时不会阻塞当前页面中的内容
      document.head.appendChild(s);
      
    });


    function doEmpData(data){
      console.log('客户端开始处理服务器返回的数据');
      console.log(data);
    }

    </script>
  </body>
</html>

php

<?php
header('Content-Type: application/javascript');

$cb = $_REQUEST['callback'];

sleep(5);


$str = '{"ename":"Mary", "age":30}';

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

jQuery中如何使用JSONP发起异步请求：

(1) $.getJSON()

用途1：使用XHR发起异步请求(不能跨域)

$.getJSON('x.php', doResponse)

用途2：使用JSONP发起跨域异步请求

$.getJSON('http://跨域地址/x.php?callback=?', doResponse)

(2) $.ajax()

用途1：使用XHR发起异步请求(不能跨域)

$.ajax({ })

用途2：使用JSONP发起跨域异步请求

$.ajax({ dataType: 'jsonp' })

<!doctype html>
<html>
  <head>
    <title>标题</title>
    <meta charset="utf-8">
  </head>
  <body>
    
    <h3>使用JSONP发起异步请求</h3>
    <button id="bt2">异步请求</button>
    
    

    <script src="js/jquery-1.11.3.js"></script>
    <script>

    
    $('#bt2').click(function(){
      $.ajax({
        type: 'GET',
        url: 'http://localhost/AJAX_DAY08/8_jsonp.php',
        dataType: 'jsonp', //使用JSONP请求的标识
        success: doResponse
      });
    });


    function doResponse(){
      console.log('客户端开始处理服务器返回的数据');
      console.log(arguments);
    }

    </script>
  </body>
</html>

转载于:https://my.oschina.net/webcaorui/blog/1546725