JavaScript: Nasıl JSONP oluşturabilirim?

5 Cevap php

Ben bir iki etki, example1.com ve example2.com var

Example1.com, ben example2.com üzerinde ben bir JSON API çağrısı istiyorum. Bu izin verilmiyor bilerek, bana öyle geldi - JSON ** P ** oluşturuldu tam olarak budur.

Soru nasıl ben bunu JSONP yetenekli yapmak benim JSON API değiştirmek mi, nedir?

Temelde, nasıl geri API oluşturabilirim?

UPDATE

Benim sunucu tarafı dili PHP

5 Cevap

Bu basit. Sadece GET callback adında bir parametre kabul eder.

Sonra verilerinizin etrafında arama JavaScript işlevi sarın.

PHP Örnek:

<?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;
}

Bu fikir sadece JavaScript geri arama fonksiyonu ilk parametre olarak JSON nesne ile geri arama işlevini çağıran bir JavaScript dosyası iade etmektir bulunuyor.

PHP diziler ve nesnelerden ($data bizim örneğimizde yukarıda içerir) JSON dizeleri oluşturmak için yerleşik json_encode() işlevini kullanabilirsiniz.

JSONP servisini kullanmak için, <script> etiketi kullanabilirsiniz:

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

Sen arama parametresi param okumak, sadece bir GET parametresi olduğunu ve bir fonksiyon çağrısına JSON yanıt sarın ve bu callback(jsonResponse); gibi yazdırmak, bir sunucu tarafı dil gerekir.

Ben herhangi bir sunucu tarafı dili söz yok çünkü Python kullanarak size gerçekten minimalist bir örnek bırakmak:

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

Bu kod küçük bir JSONP service Zach tarafından yapılan istemci IP adresini almak için kullanılan ve Google App Engine barındırılıyor.

Mauris zaten bir çalışma örneği verdi. Ben sadece bir callback param mevcut olmayan boş olup olmadığını kontrol etmelisiniz eklemek, ve eğer parantez olmadan olduğu gibi, json veri dönecekti. Yani temelde API callback verildiğinde JSON-P olma hükmü ile JSON olacak.

, JSON-P webservice tüketmek size YUI veya jQuery gibi bir çerçeve kullanmak sürece, sadece dinamik bir komut dosyası düğüm oluşturmak ve kendi kümesi src webservice işaret bağlıyoruz. Bu dinamik script düğüm sadece tek kullanımlık olduğundan, tekrar tekrarlamadan önce dom gelen düğümünü kaldırmak unutmayın.

// 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');

Eğer tarayıcınızda yazarsanız / / / geri arama komut Geri arama fonksiyonu, yani adını dönmelidir

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

sadece bir metin (Mevcut işleme fonksiyonu adı) dönmelidir: addScriptToHead (any_param)

herhangi bir tarayıcıda bir saat gibi çalışır.

Ben partiye geç kaldım biliyorum, ve cevapları birinde kod güvenliği hakkında bir yorum vardı. İşte bu konuda iyi bir makale:

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

Ve burada çalışıyor olmalıdır kodu:

<?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);