ajax跨域以及jsonp使用

使用jsonp跨域: 
jsonp原理：通过创建一个 script 标签，将 src 设置为目标请求，插入到 dom 中，服务器接受该请求并返回数据，数据通常被包裹在回调钩子中 
jsonp不支持POST方式;

//客户端
$.ajax({
            // url:'http://wenjunlin.xyz/api/v2/index',
            url:'http://bisheapi.cn/api/v2/index',
            type:'post',
            data:{
                'id':4,
                't':'wen'
            },
            dataType:'jsonp',
            jsonp: "jsonpcallback", //服务端用于接收callback调用的function名的参数
            crossDomain:true,
            success:function (data) {
                // data = JSON.parse(data);
                console.log(data)
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                // console.log(code);
                console.log('XMLHttpRequest.status: '+ XMLHttpRequest.status);
                console.log('XMLHttpRequest.readyState: '+ XMLHttpRequest.readyState);
                console.log('textStatus: '+ textStatus);
                console.log('errorThrown: '+errorThrown);
            }
        });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

php服务端:

public function index(){
    $id = 1;
    $t = 't';

    $id = $_GET['id'];
    $t = $_GET['t'];
    $jsonp = $_GET['jsonpcallback'];//get接收jsonp自动生成的函数名

    $arr = array(
        'id' => $id,
        't' => $t
    );
    echo $jsonp.'('. json_encode($arr). ')'; //jsonp函数名包裹json数据
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

使用ajax也是可以进行跨域的，只不过需要在跨域的服务端设置一下Access-Control-Allow-Origin

//客户端
$.ajax({
            url:'http://bisheapi.cn/api/v2/indexshow',
            type:'get',
            data:{
                'id':4,
                't':'wen'
            },
            dataType:'json',
            success:function (data) {
                console.log(data)
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                console.log('XMLHttpRequest.status: '+ XMLHttpRequest.status);
                console.log('XMLHttpRequest.readyState: '+ XMLHttpRequest.readyState);
                console.log('textStatus: '+ textStatus);
                console.log('errorThrown: '+errorThrown);
            }
        });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

服务端代码：

 public function show(){
        header("Access-Control-Allow-Origin: *");
        $id = 1;
        $t = 't';

        $arr = array(
            'id' => $id,
            't' => $t
        );
        echo json_encode($arr);
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

与jsonp不一样，该方式可以使用get,post等方式访问