JS跨域请求（script标签）和JQuery跨域请求（jsonp）

最新推荐文章于 2022-11-24 13:00:00 发布

weixin_33670713

最新推荐文章于 2022-11-24 13:00:00 发布

阅读量290

点赞数

文章标签： php 前端 javascript ViewUI

原文链接：https://my.oschina.net/sallency/blog/528813

版权

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

前言：

为尽可能保证浏览器端安全，浏览器会遵循SOP协议，即同源协议

ajax无法完成跨域请求

$.get $.post $.ajax都不可以

jsonp作为ajax的一种扩展协议可以完成跨域请求

$.getJson()也可以完成跨域请求(当然不跨域也可以)

日常开发中会经常遇到前端跨域访问请求数据的场景

比如

www.server.com 
img.server.com

当用户在www下浏览时需要获取指定记录id的图片，则我们需要在www的域下请求img域下的数据，常规情况下浏览器会处于安全控制限制无法完成跨域请求，但页面中的script或iframe标签是可以载入跨域请求的(link img也可以)

实现方式：

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

服务端

看网上很多讲跨域的都只是说了下前端如何编码，对后端的处理只字未提，虽然后端的处理很简单，但后端的处理才是点睛之笔，返回一个前端的调用函数语句，这就是传说中的回调函数

<?php
    if (isset($_GET['callback'])) {
        $callback = $_GET['callback'];
        $resultArr = [];
        $resultArr['id'] = $_GET['id'];
        $resultArr['img'] = "http://img.server.com/upload/img/201511031319.png";
        $resultJson = json_encode($resultArr);
        //callback({id:1, img:....}) 组装成调用js函数的格式 客户端载入自然触发其本地定义的回调函数
        echo $callback . "({$resultJson})";
        exit();     
    } //因为是被script标签请求载入的，所以返回的数据会包在script中，自然就触发了callback函数

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

1、JS script方式

其实原理很简单

1、在当前域下我定义一个函数作为回调函数

2、组建一个script标签元素节点，设置src为跨域请求的某API的url地址，同时此url地址中务必填写上回调函数名参数

3、将script标签挂载到文档流中，会跨域请求载入，变相的访问了跨域API，触发了API的方法，返回的数据被填充到script标签中，如果返回的是一个当前域下定义好的函数，那自然就触发处理相关数据了

4、跨域完成

在www下定义回调函数callback

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://www.yii.com/a.js"></script>
</head>
<body>
<button onclick="request()">click here</button>
    <script type="text/javascript">
    //回调函数callback定义
    //服务端输出的数据为 callback({key1:data1, key2；data2}) 到本页面 即调用此定义好的函数
    function callback(json) {
        for (i in json) {
            alert(i + ":" + json[i]);
        }
        if (json.tagId) {
            var tagId = document.getElementById(json.tagId)；
            tagId.parentNode.removeChild(tagId);
        }
    }
    //发起跨域请求
    function request() {
        //利用script标签可跨域访问的特性
        var script = document.createElement('script');
        script.id = Math.random();
        script.type = 'text/javascript';
        //跨域 将callback函数名称传递给跨域服务器 服务端利用此函数名组建
        script.src = "http://img.server.com/index.php?callback=callback&id=1&tagId=" + script.id;
        //将可跨域请求的script标签挂载到head标签上
        document.getElementsByTagName("head")[0].appendChild(script);
    }
    </script>
</body>
</html>

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

2、jsonp方式

jsonp是ajax的扩展，严格的说它已经不是ajax，只是复用ajax的某些控制流程，封装我们上面说的js方式

重点：

dataType:'jsonp' //指定使用jsonp方式

jsonp:'callback' //回调函数的键名传递给服务器时服务器通过此键名获取应该返回调用的函数名

jsonpCallback:'myCallback' //回调函数名不随机，自定义一个

<script type="text/javascript" >
    //其实jquery会组合成这样的请求
    //http://img.server.com/index.php?callback=myCallback&id=1
    $.ajax({
        async: false,
        type: 'get',
        url: "http://img.server.com/index.php?id=1",
        //指定为jsonp方式
        dataType: 'jsonp',
        //回调函数的键值名，即服务端通过此键值访问传递的回调函数名
        jsonp: 'callback',
        //回调函数名，若不指定则jquery会随机生成一个
        jsonpCallback: 'myCallback',
        success: function(result) {
            for (var i in result) {
                alert(i + ":" + result[i]);
            }
        },
        timeout: 3000
    });
    //Jquery会根据你指定的jsonpCallback参数在本地生成一个
    //function myCallback(result) {
        //这样就调用了success方法
        //this.success(result);
    //} 
</script>

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

3、getJSON

重点：

一定要在url中写上callback=?，只有这样才会在本地生成一个回调函数，跨域的后端通过callback获取到此函数名，进行回调

<script type="text/javascript" >
    //其实jquery会组合成这样的请求
    //http://img.server.com/index.php?callback=myCallback&id=1
    var url = "http://img.server.com/index.php?callback=?"; //记住一定要有callback=?
    var data = {'id':1};
    $.getJSON(
        url,
        data,
        function(result){
            for (var i in result) {
                alert(i + ":" + result[i]);
            }
        });
</script>

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

转载于:https://my.oschina.net/sallency/blog/528813