在 nodejs 和 origin 中使用 jsonp ajax

Question

我想知道 jsonp 是如何工作的，所以我写了一个在 nodejs 上运行的演示，没有 jQuery。但是，它不起作用。贝娄是我的代码：

views/index.玉

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'})" 到运行函数 abc，参数为 1 个参数（即对象 {a : 'a'}

Answer 2

而且我找到了另一种方法来让它在没有 ajax 的情况下工作：

<script>
   function abc (data) {
    alert('aaa')
    document.getElementById('result').innerHTML = data.name;
  }
</script>
<script type="text/javascript" src="/getjsonp?callback=abc"></script>

在 nodejs 和 origin 中使用 jsonp ajax

Using jsonp in nodejs and origin ajax

javascript

ajax

jquery

jsonp

node.js