Implementing Cross-Domain Communication with PHP: JSONP Example

1. What is Cross-Domain Communication?

Cross-domain communication refers to the process of transferring data between different domain names in web development. Because of the same‑origin policy, browsers normally block requests to or responses from a different domain, so developers must use techniques to bypass this restriction.

2. Methods of Cross-Domain Communication

JSONP: Dynamically create a <script> tag; the server returns JavaScript that calls a specified callback function, allowing the page to receive data.

CORS: Cross‑Origin Resource Sharing is a standard method where the server sends specific response headers to indicate that cross‑origin requests are allowed.

iframe + window.postMessage : Embed an <iframe> from another domain and use the HTML5 messaging API to exchange messages securely.

Proxy: The same‑origin server fetches data from the target domain and returns it to the client, effectively bypassing the restriction.

3. Implementing JSONP Cross-Domain Communication with PHP

JSONP is a simple technique suitable for lightweight data exchange. The following PHP code demonstrates how to receive a callback name, prepare data, and output a JSONP response.

<code>&lt;?php
// Get the callback function name passed from the client
$callback = $_GET['callback'];

// Data to be returned
$data = ['name' => 'John', 'age' => 25];

// Output JSONP formatted data
echo $callback . '(' . json_encode($data) . ')';
?&gt;</code>

In the code above, $_GET['callback'] retrieves the callback name, json_encode() converts the data array to JSON, and the callback name is concatenated with the JSON string to form the response.

On the client side, a <script> tag is created with its src attribute pointing to the PHP endpoint, including the callback parameter. When the server returns the JSONP response, the specified JavaScript function is executed with the data.

<code>&lt;script&gt;
function handleData(data) {
    console.log(data);
}

var script = document.createElement('script');
script.src = 'http://example.com/api.php?callback=handleData';
document.getElementsByTagName('head')[0].appendChild(script);
&lt;/script&gt;</code>

This client script creates a <script> element, sets its src to the API URL with the callback name handleData , and appends it to the document head. When the server response arrives, the browser executes handleData with the returned data.

Conclusion

By using various cross‑domain communication techniques, developers can transfer data between different domains in web applications. This article presented a PHP‑based JSONP solution with complete code examples, helping you choose the appropriate method based on project requirements.

PHP Learning Recommendations

Vue3+Laravel8+Uniapp Beginner to Advanced Development Tutorial

Vue3+TP6+API Social E‑Commerce System Development Course

Swoole From Beginner to Master Course

Workerman+TP6 Real‑Time Chat System Limited‑Time Offer