How to Create JSONP-Compatible Endpoints in JavaScript: A Comprehensive Guide

Creating JSONP-Compatible Endpoints in JavaScript

Cross-origin resource sharing (CORS) restrictions can hinder communication between websites hosted on different domains. JSONP (JSON with padding) provides a workaround by leveraging the browser's handling of script tags.

How to Implement JSONP in PHP

To create a JSONP-capable endpoint in PHP, follow these steps:

1. Accept a callback parameter in the GET request, e.g., $callback = $_GET['callback'];.
2. Wrap the callback JavaScript function around the JSON response in the browser, e.g., $callback.'('.$data.');'.
3. Set appropriate HTTP headers for CORS, e.g.:

<code class="php">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');</code>

This code returns a JavaScript file with the JSON object passed as the parameter to the callback function.

Utilizing JSONP-Compatible Endpoints

Use the <script> tag to consume the JSONP service:</script>

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

When the script is executed, the receiver function is called with the JSON response, allowing you to access the data on the client side.

The above is the detailed content of How to Create JSONP-Compatible Endpoints in JavaScript: A Comprehensive Guide. For more information, please follow other related articles on the PHP Chinese website!