javascript - 在nodejs和origin ajax中使用jsonp

Question

我想知道 jsonp 是如何工作的，所以我写了一个在 Nodejs 上运行的演示，没有 jQuery。但是，它不起作用。波纹管是我的代码:

<小时/> View /index.jade

doctype html
html
  head
    title Demo of jsonp
  body
    #result
    script.
      var xhr = new XMLHttpRequest();
      var url = '/getjsonp?callback=abc'

      function abc (data) {
        alert('aaa')
        document.getElementById('result').innerHTML = data.name;
      }

      xhr.open('GET', url);
      xhr.send();

<小时/>server.js

var express = require('express');
var bodyParser = require('body-parser');
var path = require('path');

var app = express();
var data = { name: 'jacket', company: 'fdd' };

app.set('views', path.join(__dirname, 'views/'));
app.set('view engine', 'jade');

app.use(bodyParser.urlencoded({ extended: false }))

app.get('/', function (req, res, next) {
  res.render('index');
});

app.get('/getjsonp', function (req, res, next) {
  var callback = req.query.callback;
  res.writeHead(200, { 'Content-Type': 'application/javascript' });
  res.end(callback + '(' + JSON.stringify(data) + ')');
});

app.listen(3000);

<小时/>这是响应:

abc({"name":"jacket","company":"fdd"})

正如我所期望的，我在index.jade中定义了一个方法abc()，然后通过异步ajax请求'/getjsonp?callback=abc'，它将响应一个将执行该方法的javascript:abc()。
但它不是那样工作的，我不知道哪里出了问题，希望你知道的话可以告诉我。
谢谢!

Answer 1

我相信这里一切正常，只是在客户端中，您需要使用以下方法检索从服务器发回的数据:

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        eval(xhr.responseText);
    }
};

希望这有帮助:)

注意:eval 将生成一个类似“abc({a: 'a'})”的字符串，以使用带有 1 个参数的参数(即对象 {a: 'a'})运行函数 abc