How Does JSONP Solve Cross-Origin Data Retrieval Problems?

JSONP: Cross-Origin Data Retrieval Simplified

When dealing with cross-origin web requests, the same-origin policy can pose a challenge. JSONP (JSON with Padding) emerged as a solution to address this issue. Here's a step-by-step explanation of how to implement a basic jQuery, PHP, and JSONP request to retrieve data from a different domain:

jQuery Request

$.getJSON('http://www.write-about-property.com/jsonp.php?callback=?', { firstname: 'Jeff' }, function(res) {
  alert('Your name is ' + res.fullname);
});

PHP Response

<?php
  $fname = $_GET['firstname'];
  if ($fname == 'Jeff') {
    echo $_GET['callback'] . '(' . "{'fullname' : 'Jeff Hansen'}" . ')';
  }
?>

Key Modifications:

• ?callback=?: In JSONP, the server includes a callback function in the response. The ?callback=? enables the browser to provide a dynamically generated callback function for the server.
• $_GET['callback'] . '(': The server uses JavaScript to call the callback function provided by the browser.
• res.fullname: The JavaScript code accesses the JSON returned from the server and displays the 'fullname' value.

HTML in Response

Yes, you can store HTML in the result and it will be returned as a string. The JavaScript code will then handle the HTML as appropriate.

Example Usage

This example retrieves the full name of 'Jeff' from a PHP script located at 'http://www.write-about-property.com/jsonp.php'. If the name matches 'Jeff', the full name 'Jeff Hansen' is returned.

The above is the detailed content of How Does JSONP Solve Cross-Origin Data Retrieval Problems?. For more information, please follow other related articles on the PHP Chinese website!