JavaScript:JSONP를 작성하려면 어떻게 해야 하나요?

JavaScript:JSONP를 작성하려면 어떻게 해야 하나요?

example1.com 와 example2.com 의 2 개의 도메인이 있습니다.

example1.com에서 example2.com에 있는 JSON API를 호출하고 싶습니다.이것이 허용되지 않는다는 것을 알고, 그것이 바로 JSONP가 만들어진 이유입니다.

문제는 JSONP를 지원하도록 JSON API를 수정하려면 어떻게 해야 합니까?

기본적으로 callback api를 작성하려면 어떻게 해야 하나요?

갱신하다

서버 측 언어는 PHP입니다.

것은간간 간간간다다 '이렇게 하다'라는 .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;
}

자바스크립트 콜백 함수의 첫 번째 파라미터로 JSON 객체를 사용하여 콜백 함수를 호출하는 자바스크립트 파일을 단순히 반환하는 것이다.

기본 제공 을 사용할 수 .json_encode() 문자열(JSON 문자열 생성)을 생성하는 입니다.$data위의 예에서는 PHP의 어레이와 오브젝트에서)를 사용하고 있습니다.

하려면 , JSONP 를 합니다.<script> 삭제:

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

언어가 파라미터이며 합니다.콜백 파라미터는 단순한 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에서 호스팅됩니다.

마우리스가 이미 너에게 모범을 보여줬어., '아까보다'는 '아까보다'가 이 좋을 뿐입니다.callback 있지 않습니다 않은 반환합니다.존재하지 않을 경우 괄호 없이 json 데이터를 그대로 반환합니다.으로 API는 JSON-P가 될 때.callback어집니니다다

웹등의 한하여 JSON-P를 합니다.src웹 서비스를 포인트 하는 속성입니다.이 동적 스크립트노드는 일회용이므로 반복하기 전에 해당 노드를 돔에서 삭제해야 합니다.

파티에 늦은 거 알아요. 그리고 답 중 하나에 암호 보안에 대한 언급이 있었어요.다음은 이에 대한 좋은 기사입니다.

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

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

/// Callback 스크립트는 Callback 함수의 이름을 반환해야 합니다(예: 브라우저에 입력한 경우).

http://url_to_cript/index.cript&cript=임의

텍스트(기존 처리 함수의 이름)만 반환됩니다.addScriptToHead(any_param)

모든 브라우저에서 시계처럼 작동합니다.

클라이언트 측에서는 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 파라미터를 반환하는 것을 잊지 마십시오.그렇지 않으면 동작하지 않습니다!!!!
그게 다예요.

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

예: 기본적으로 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>

언급URL : https://stackoverflow.com/questions/1678214/javascript-how-do-i-create-jsonp