jsonp的nodejs实战

我打开了2个web服务，127.0.0.1:3000，127.0.0.1:2999

jsonp首先要求后台提供一个可以返回 fnName(result) 字符串的接口;
然后前端首先定义好fnName(result)的方法，然后使用script的src属性访问此接口。
可以动态和删除script标签，就可以请求跨域的接口了，缺点是要后台提供特定的接口

  1. var http = require("http");
  2. var querystring = require('querystring');
  3. var url = require('url');
  7. var serverHTML = http.createServer((req, res) => {
  9.   var indexHtml =
  10.     '<html>\n'
  11.     + '<meta charset="utf-8">\n'
  12.     + '<head>\n'
  13.     + '<title>跨域请求</title>\n'
  14.     + '<script>\n'
  15.     + 'function abc(result){\n'
  16.     + 'var data = JSON.stringify(result);\n'
  17.     + 'document.getElementById("text").innerHTML = data;\n'
  18.     + '}\n'
  19.     + 'window.onload = function () {\n'
  20.     + 'document.getElementById("btn").onclick = function () {\n'
  21.     + 'var script = document.createElement("script");\n'
  22.     + 'script.src = "http://127.0.0.1:3000?callback=abc";\n'
  23.     + 'document.getElementsByTagName("head")[0].appendChild(script);\n'
  24.     + 'var script2 = document.createElement("script");\n'
  25.     + 'script2.src = "//common.cnblogs.com/scripts/jquery-2.2.0.min.js"\n'
  26.     + 'document.getElementsByTagName("head")[0].appendChild(script2);\n'
  27.     + '}\n'
  28.     + '}\n'
  29.     + '</script>\n'
  30.     + '</head>\n'
  31.     + '<body>\n'
  32.     + '<input id="btn" type="button" value="跨域获取数据" />\n'
  33.     + '<div id="text"></div>\n'
  34.     + '</body>\n'
  35.     + '</html>\n'
  37.   res.writeHead(200, { 'Content-Type': 'text/html' });
  38.   res.write(indexHtml);
  39.   res.end();
  41. }).listen(2999);
  44. var server = http.createServer((req, res) => {
  45.   /*  
  46.   const headers = JSON.stringify(req.headers);
  47.   const cookie = req.headers.cookie;
  48.   res.write('headers:' + headers);
  49.   res.write('\n');
  50.   res.write('\n');   
  51.   res.write('cookie:' + cookie);
  52.   res.write('\n');
  53.   res.write('\n');
  54.   res.write('method:' + JSON.stringify(req.method));
  55.   res.write('\n');
  56.   res.write('\n');
  57.   res.write('url:' + req.url);
  58.   */
  62.   if (req.method === 'GET') {
  63.     console.log('GET');
  64.     var params = url.parse(req.url, true).query;
  66.     var callback = params.callback + '(' + '"aaa"' + ')';
  68.     res.write(callback);
  70.     console.log(params);
  71.     res.end();
  72.   } else if (req.method === 'POST') {
  73.     // 未完待续接收post请求
  74.     console.log('post');
  75.     var body = "";
  77.     req.on('data', function (chunk) {
  78.       body += chunk;  //一定要使用+=，如果body=chunk，因为请求favicon.ico，body会等于{}
  79.       console.log("chunk:", chunk);
  80.     });
  82.     req.on('end', function () {
  83.       // 解析参数
  84.       body = querystring.parse(body);  //将一个字符串反序列化为一个对象
  85.       console.log("body:", body);
  86.       // 设置响应头部信息及编码\<br><br>      res.writeHead(200, {'Content-Type': 'text/html; charset=utf8'});
  87.       if (body.name && body.url) { // 输出提交的数据
  88.         res.write("网站名：" + body.name);
  89.         res.write("<br>");
  90.         res.write("网站 URL：" + body.url);
  91.       } else {  // 输出表单
  92.         res.write();
  93.       }
  94.       res.end();
  95.     });
  97.   }
  99. }).listen(3000);

笔试题四

实现一个jsonp函数，仅需要支持jsonp(url)一种调用方式即可（仅有url一个传参），例如： jsonp(‘//t.alicdn.com/t/gettime?callback=cb’).then(result=>console.dir(result))

未完待续