jQuery AJAX Cross-Domain Issue
In the provided scenario, where two PHP files (test.php and testserver.php) communicate using jQuery's AJAX, cross-domain restrictions arise when they reside on separate servers. Server A hosts test.php (e.g., localhost), while server B hosts testserver.php (e.g., web server).
Problem:
Despite successful execution of the AJAX request when the files are on the same server, it fails with an error when they are on different servers. This is due to the Same-Origin Policy (SOP).
Solution:
To address this cross-domain issue, JSONP (JSON with Padding) is employed. JSONP leverages callbacks to bypass browser restrictions.
Implementation:
jQuery (test.php):
$.ajax({
url: "http://domain.example/path/to/file/testserver.php",
dataType: 'jsonp', // Notice! JSONP (lowercase 'P')
success: function(json){
// Handle JSON response (an array)
alert("Success");
},
error: function(){
alert("Error");
}
});PHP (testserver.php):
<?php
$arr = array("element1","element2",array("element31","element32"));
$arr['name'] = "response";
$callbackName = $_GET['callback']; // Get the callback name from GET params
echo $callbackName."(".json_encode($arr).");";
?>Explanation:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
