JSONP 和 Ajax
首先二者是完全不同的东西, Ajax 是通过 XMLHttpRequest 来发起请求, 而 JSONP 是利用 script 标签动态添加 src 属性以及附加 callback 函数来请求数据, 在 jQuery 中的 $.Ajax 可以发送 JSONP 请求是因为 jQuery 对 Ajax 进行了封装, 把 JSONP 封装进了他的 Ajax 函数里面
- // jQuery 封装的 JSONP 源码
- <script>
- function Ajax(option){
- var defalus = {
- JSONP:'callback' // 默认发送请求的值是函数名的值
- }
- // 覆盖默认参数
- for(var attr in option){
- defalus[attr] = option[attr];
- }
- var p = '';
- if(defalus.data){
- for(var key in defalus.data){
- p += key+ '='+ defalus.data[key] + '&'
- }
- }
- var cbName ;
- if(defalus.jsonpCallback){
- cbName = defalus.jsonpCallback;
- }else{
- // 回调函数名称
- cbName = 'jQuery' + ('v1.11.1' + Math.random()).replace(/\D/g,'') +'_' + new Date().getTime();
- }
- Windows[cbName] = function (data){
- defalus.success(data);
- }
- // 所以 jsonpCallback 这个参数并不是一个需要自己实现的函数, 只是给出一个名字, jQuery 会帮我们利用 success 来实现这个函数并挂载在 Windows 下面
- var srcipt = document.createElement('script');
- srciptt.src = defalus.url + '?' + p + defalus.JSONP + '=' + defalus.jsonpCallback
- var head = document.getElementsByTagName('head')[0];
- head.appendChild(srciptt);
- }
- Ajax({
- url: 'http://lp.com/jsonp/data1.php',
- dataType: 'jsonp',
- JSONP: 'callback',
- jsonpCallback: 'hi',
- data: {flag:1,abc:'hi'},
- success: function(data){
- console.log(data)
- }
- });
- </script>
- 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!');
来源: http://www.jianshu.com/p/d94fd0d30984