JavaScript:如何创建JSONP？

Question

我有两个域名,example1.com和example2.com

从example1.com开始,我想在example2.com上调用我的JSON API.知道这是不允许的,它发生在我身上 - 这正是创建JSON P的原因.

问题是,如何修改我的JSON API以使其具备JSONP能力？

基本上,我如何创建回调api？

UPDATE

我的服务器端语言是PHP

Answer 1

很简单.只需接受callbackGET中调用的参数即可.

然后围绕数据包装回调JavaScript函数.

PHP中的示例:

<?php

$data = '{}'; // json string

if(array_key_exists('callback', $_GET)){

    header('Content-Type: text/javascript; charset=utf8');
    header('Access-Control-Allow-Origin: http://www.example.com/');
    header('Access-Control-Max-Age: 3628800');
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');

    $callback = $_GET['callback'];
    echo $callback.'('.$data.');';

}else{
    // normal JSON string
    header('Content-Type: application/json; charset=utf8');

    echo $data;
}

它的想法是简单地返回一个JavaScript文件,该文件使用JSON对象作为JavaScript回调函数的第一个参数来调用回调函数.

您可以使用内置json_encode()函数$data从PHP中的数组和对象创建JSON字符串(在上面的示例中包含).

要使用JSONP服务,您可以使用<script>标记:

<script>
    function receiver(data){
        console.log(data);
    }
</script>
<script src="data-service.php?callback=receiver"></script>

Answer 2

你需要一个服务器端语言,callback参数只是一个GET参数,你读取参数,然后将JSON响应包装到函数调用中,然后像这样打印它callback(jsonResponse);.

我给你留下了一个使用Python的极简主义的例子,因为你没有提到任何服务器端语言:

import os
import cgi

form = cgi.FieldStorage()
callback = form.getvalue('callback','')

address = cgi.escape(os.environ["REMOTE_ADDR"])

json = '{"ip": "'+address+'", "address":"'+address+'"}'

#Allow cross domain XHR
print 'Access-Control-Allow-Origin: *'
print 'Access-Control-Allow-Methods: GET'

if callback != '':
  print 'Content-Type: application/javascript'
  result = callback+'('+json+');'
else:
  print 'Content-Type: application/json'
  result = json

print ''
print result

这是用于检索Zach制作的客户端IP地址的小型JSONP服务的代码,它托管在Google App Engine上.

Answer 3

Mauris已经给你一个有效的例子.我只想补充一点,你应该检查一个callbackparam是否存在且非空,如果不存在,则返回json数据,而不是括号.所以基本上你的api将是JSON,并在callback给出时提供JSON-P .

要使用JSON-P Web服务,除非使用YUI或jQuery之类的框架,否则可以简单地动态创建脚本节点并将其src属性设置为指向Web服务.请记住从dom中删除该节点,然后再重复该节点,因为此动态脚本节点仅供一次性使用.

Answer 4

这里的例子 http://www.insideria.com/2009/03/what-in-the-heck-is-jsonp-and.html 基本上

<script src=".../example2...?output=json;callback=loadit"></script>
<script>
alert( "I got this from example2 " + loadit);
</script>