跨域之JSONP

JSONP : (json with Padding) 是一种借助于 script标签发送跨域请求的技巧.

原理 : 就是在客户端借助script标签请求服务端的一个动态网页(php文件),服务端的这个动态网页返回一段带有函数调用的javaScript全局函数调用的脚本,将原来需要返回给客户端的数据传递出去.(随机创建一个函数,把函数名传给服务端,避免客户端多次调用重名导致的问题).

jsonp简单的说就是 : 通过script标签请求一个服务端的php文件,这个文件返回的结果是一段js代码,作用是调用我们事先定义好的一个函数,从而将服务端想要给客户端发过去的数据发送给客户端.

客户端部分代码目录: jsonp/client.html

服务端部分代码目录: jsonp/server.php

client 端:

首先为每一个请求创建一个唯一的函数,目的让函数名不重复
毫秒数+随机数(在同一毫秒的随机数),substr(2)去掉小数点及前两位 
var funcName = 'haha_' + Date.now() + Math.random().toString().substr(2);
var script = document.createElement('script');
script.src = 'http://localhost/jsonp/server.php?callback=' + funcName;
document.body.appendChild(script);
window[funcName] = function(data){
    console.log('1111',data);
}

server 端

// $data = php二维数组;
// php二维数组 => json格式字符串
// json_encode($data)
// 如果客户端采用的是script标记对我服务端发送的请求,一定要返回一段JavaScript.
响应头:
    header('Content-Type:application/json');
    $result = json_encode($data);
    echo "{$GET['callback']}({$result})";

使用JSONP解决跨域问题:

使用时注意: 
    1. jquery已经封装好了,jQuery中使用JSONP,就是将dataType 设置为 jsonp.
    2. JSONP需要服务端配合,服务端按照客户端的要求返回一段javaScript调用客户端的函数.
    3. 只能发送GET请求.
    4. 注意: JSONP用的是script标签,和ajax提供的XMLHttpRequest没有任何关系.
    
    总结: 因为XMLHttpRequerst这个对象不支持对不同源地址之间的请求,所以我们找到了script标记,借助于script这个标记,可以发送不同源地址请求的一个特性去完成跨域请求.

猜你喜欢