web-dev-qa-db-ja.com

JavaScript：JSONPを作成するにはどうすればよいですか？

Example1.comとexample2.comの2つのドメインがあります

Example1.comから、example2.comにあるJSON APIを呼び出したいです。これが許可されていないことを知って、それが私に起こりました-これがまさにJSON [〜＃〜] p [〜＃〜]が作成された理由です。

質問は、JSON APIをJSONP対応にするにはどうすればよいですか？

基本的に、コールバックAPIを作成するにはどうすればよいですか？

[〜＃〜] update [〜＃〜]

私のサーバーサイド言語はPHPです

phpjavascriptjsoncross-domainjsonp
40
Teddi

それは単純だ。 GETでcallbackというパラメーターを受け入れるだけです。

次に、コールバック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;
}
_

JSONオブジェクトをJavaScriptコールバック関数の最初のパラメーターとして使用して、コールバック関数を呼び出すJavaScriptファイルを単純に返すことです。

組み込みのjson_encode()関数を使用して、PHPの配列とオブジェクトからJSON文字列（上の例の_$data_に含まれる）を作成できます。

JSONPサービスを使用するには、_<script>_タグを使用できます。

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

サーバー側の言語が必要です。コールバックパラメーターは単純に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

これは、小さな JSONPサービス のコードです- Zach によって作成されたクライアントIPアドレスの取得に使用され、 Google App Engine でホストされます。

26
CMS

マウリスはすでにあなたに実例を示しました。 callback paramが存在し、空でないかどうかを確認する必要があることだけを追加し、そうでない場合は、jsonデータをそのまま括弧なしで返します。したがって、callbackが指定されている場合、基本的にAPIはJSONになり、JSON-Pになります。

JSON-P Webサービスを使用するには、YUIやjQueryなどのフレームワークを使用しない限り、スクリプトノードを動的に作成し、src属性をWebサービスを指すように設定するだけです。この動的スクリプトノードは1回限りの使用であるため、再度繰り返す前に、domからノードを削除することを忘れないでください。

6
Joy Dutta

私はパーティーに遅れていることを知っており、答えの1つにコードのセキュリティに関するコメントがありました。これに関する良い記事があります：

http://www.geekality.net/2010/06/27/php-how-to-easily-provide-json-and-jsonp/

そして、実行する必要があるコードは次のとおりです。

<?php header('content-type: application/json; charset=utf-8');

function is_valid_callback($subject)
{
    $identifier_syntax
      = '/^[$_\p{L}][$_\p{L}\p{Mn}\p{Mc}\p{Nd}\p{Pc}\x{200C}\x{200D}]*+$/u';

    $reserved_words = array('break', 'do', 'instanceof', 'typeof', 'case',
      'else', 'new', 'var', 'catch', 'finally', 'return', 'void', 'continue', 
      'for', 'switch', 'while', 'debugger', 'function', 'this', 'with', 
      'default', 'if', 'throw', 'delete', 'in', 'try', 'class', 'enum', 
      'extends', 'super', 'const', 'export', 'import', 'implements', 'let', 
      'private', 'public', 'yield', 'interface', 'package', 'protected', 
      'static', 'null', 'true', 'false');

    return preg_match($identifier_syntax, $subject)
        && ! in_array(mb_strtolower($subject, 'UTF-8'), $reserved_words);
}

$data = array(1, 2, 3, 4, 5, 6, 7, 8, 9);
$json = json_encode($data);

# JSON if no callback
if( ! isset($_GET['callback']))
    exit($json);

# JSONP if valid callback
if(is_valid_callback($_GET['callback']))
    exit("{$_GET['callback']}($json)");

# Otherwise, bad request
header('status: 400 Bad Request', true, 400);
4
Joel Kinzel
// Adds script tag to head of the page
function addScriptToHead(source, code, type) {
    var script = document.createElement('script');
    if (type === 'js') {
        script.setAttribute('type', 'text/javascript');
    }
    if (source !== '') {
        script.setAttribute('src', source);
    }
    if (code !== '') {
        if (document.all && !window.opera)  {
            script.text = code;
        } else {
            script.innerHTML = code;
        }
    }
    document.getElementsByTagName('head')[0].appendChild(script);
}


// Callback function
function addScriptToHead(any_param) {

// do whatever needs to be done

}

//call example

addScriptToHead('http://url_to_receiver_script/index.php&param=anything', '', 'js');

///コールバックスクリプトは、コールバック関数の名前を返す必要があります。つまり、ブラウザに入力した場合

http：//url_to_receiver_script/index.php&param=anything

テキスト（既存の処理関数の名前）のみを返す必要があります：addScriptToHead（any_param）

どのブラウザでも時計のように機能します。

3
Dmitriy Naumov

JQuery、つまりクライアント側で簡単：

  $.ajax({
        dataType: 'jsonp',
        data: "somedata="+somevalue,
        //this is very important since it's the callback we will and that allow cross domain
        jsonp: 'jsonp_callback',
        url: 'http://example2.com',
        //function we trigger on success
        success: ParseJson
         //error handling not working with jsonP
         //error: handleError
        });

function ParseJson(data)
{
for (var key in data) {
  if (data.hasOwnProperty(key)) {
    alert(key + " -> " + data[key]);
  }
}
}

サーバー側から適切なjsonを取得するようにしてください。
jsonp_callback paramを返すことを忘れないでください。そうしないと動作しません!!!!!
それは本当にそれです。

2
Tom

ここの例 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>
0
asdf

Simple JSON for PHP を使用して偽造できます！それはすべてを簡素化します！

<?php

  include('../includes/json.php');

  $json = new json('callback', 'myCallback');

  $object = new stdClass();
  $object->FirstName = 'John';
  $object->LastName = 'Doe';
  $array = array(1,'2', 'Pieter', true);
  $jsonOnly = '{"Hello" : "darling"}';
  // Add objects to send
  $json->add('status', '200');
  $json->add("worked");
  $json->add("things", false);
  $json->add('friend', $object);
  $json->add("arrays", $array);
  $json->add("json", $jsonOnly, false);

  /*
  Expected result : 
  myCallback({
    "status": "200",
    "worked": true,
    "things": false,
    "friend": {
        "FirstName": "John",
        "LastName": "Doe"
    },
    "arrays": [
        1,
        "2",
        "Pieter",
        true
    ],
    "json": {
        "Hello": "darling"
    }
  });

  */
  $json->send();
?>
0
Alexis Paques