jsonp跨域

服务端

1
2
3
4
5
6
7
8
9
10
11
var http = require('http');
var url = require('url');

http.createServer(function(req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});

    // 解析 url 参数
    var params = url.parse(req.url, true).query;
    // jsonpCallback 为前后端约定的字段，用于获取回调函数的名称
    res.end(params.jsonpCallback + "('This is JSONP.')");
}).listen(8888);

本地

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
    // 定义回调函数
    var cb = function(data) {
        var oDiv = document.getElementById('content');
        oDiv.innerHTML = data;
    }

    var url = 'http://localhost:8888?jsonpCallback=cb';

    // 创建 script 标签，并设置其 src 属性
    var script = document.createElement('script');
    script.src = url;

    // 插入 body，此时调用开始
    document.body.appendChild(script);
</script>

jquery中使用jsonp

服务端代码不变

本地

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var oDiv = document.getElementById('content');

// 定义回调函数
// 只是用于服务端获取名称，也可以自行实现，从而在 `success` 中进行调用
var cb = function() {};

$.ajax({
    url: 'http://localhost:8888',
    type: 'get',
    dataType: 'jsonp',  // 预期服务器返回的数据类型
    jsonp: 'A_callback',  // 指定回调查询参数的名称，即前后端约定的字段，默认为“callback"
    jsonpCallback: 'cb',  // 指定回调函数名称
    cache: true,
    success: function(data) {   // jQuery 将 JSON 数据剥离出来，传入 success 和 error
        console.log(data);  // 'This is JSONP realized by jQuery.'
        oDiv.innerHTML = data;
    }
});

jsonp的缺点

JSONP 的主要缺点有两个：
一、是只能 GET 不能 POST，因为是通过