How to Overcome Cross-Domain JSON Communication with JSONP?

JSONP: Enabling Cross-Domain JSON Communication

Cross-domain JSON communication poses a challenge due to the Same-Origin Policy. JSONP (JSON with Padding) was introduced as a solution to this problem.

Creating a JSONP Callback API

To create a JSONP callback API, you need to:

1. Accept a Callback Parameter: Accept a "callback" parameter in the GET request.
2. Wrap Data in a Callback Function: Surround your JSON data with the callback function specified in the request parameter.

Example in PHP:

<code class="php"><?php $data = '{}';

if (array_key_exists('callback', $_GET)) {
    header('Content-Type: text/javascript; charset=utf8');
    header('Access-Control-Allow-Origin: http://www.example.com/');
    $callback = $_GET['callback'];
    echo $callback . '(' . $data . ');';
} else {
    header('Content-Type: application/json; charset=utf8');
    echo $data;
}
?></code>

This code sends a JavaScript file that calls the specified callback function with the JSON data as the first argument.

Using the JSONP Service

To use the JSONP service:

1. Define a Callback Function: Create a JavaScript function to process the JSON data.
2. Include the JSONP Service Script: Insert a <script> tag with the service URL and the callback function name as the "callback" parameter.</script>

Example:

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

The above is the detailed content of How to Overcome Cross-Domain JSON Communication with JSONP?. For more information, please follow other related articles on the PHP Chinese website!