JSONP

JSONP和AJAX

首先二者是完全不同的东西，AJAX是通过XMLHttpRequest来发起请求，而JSONP是利用script标签动态添加src属性以及附加callback函数来请求数据，在jQUery中的$.ajax可以发送JSONP请求是因为jQuery对ajax进行了封装，把JSONP封装进了他的ajax函数里面

    // jQuery封装的JSONP源码

    

JSONP原理

1. script标签的src不受跨域限制
2. script标签可以把返回的字符串当做代码来执行

JSONP后端代码的实现，需要约定好callback的key，此处使用的key就是‘callback’

    var http = require('http');

    var url = require('url');

    var querystring = require('querystring');

    var server = http.createServer();

    server.on('request',function(req, res){
    var urlPath = url.parse(req.url).pathname;
    var qs = querystring.parse(req.url.split('?')[1]);
    if(urlPath === '/jsonp' && qs.callback){
        res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});
        var data = {
            "name": "Monkey"
        };
        data = JSON.stringify(data);
        var callback = qs.callback+'('+data+');';
        // 发送过来的请求的callback名字为show，则返回的数据就是'show(...)'
        res.end(callback);
    }
    else{
        res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
        res.end('Hell World\n');
    }
    });
    server.listen('8080');
    console.log('Server running!');