Cross Origin Resource Sharing using AJAX methods and PHP

Question

I just started to work on calls to a php file which is present in a different server. I am aware of CORS which is essential for cross domain requests. I have been trying to call this file through ajax methods refering to other websites and tutorials and I have seen discussions to find a solution but they are not working for me. Please help.

here is my calling method:

            $.ajax({
                    type: "GET",
                    url: "http://cs-server.usc.edu:27952/ResponseProg.php?callback=?", //Relative or absolute path to response.php file
                    datatype: "jsonp",
                    data: dataInput,
                    jsonp:'jsoncallback',
                    crossDomain:true,
                    success: function(data) 
                    {
                        JSONObj = jQuery.parseJSON(data);
                        contentProvider("#rtrn");
                        if(JSONObj.ack != "No results found")
                        {
                            var paginate=setPager(0);
                            $("#pgn").html(paginate);
                        }
                    },
                    error: function() {
                        $("#rtrn").html("Data not retrieved successfully");
                    }
                });

Here is my PHP code snippet:

<?php
#code for data processing...
$rsltjson = json_encode($result,JSON_UNESCAPED_SLASHES);
echo $_GET['jsoncallback']."(".$rsltjson.");";
?>

I am trying to accomplish this by using JSONP. Should I have any headers? Are there any errors in my code?....How can I accomplish this? dataInput is the serialized form of form data

Answer 1

The CORS way

You need to put the appropriate header in your php script and output only the JSON:

<?php
    header('Access-Control-Allow-Origin: *');

    // rest of the code

    // output JSON only
    echo $rsltjson;
?>

Then using a XMLHttpRequest/ajax call should retrieve the data just fine as JSON without resorting to JSONP.

Mozilla has plenty to read about it

The JSONP way

Since the whole point of JSONP is to bypass cross-domain restrictions, calling a JSONP resource with XMLHttpRequest/ajax, a method in which cross-domain security is fully applied (presumably), is completely useless.

JSONP works by injecting code directly into your page, calling a function that you defined, which is why a JSONP url takes an argument. Therefore, the correct way to call your JSONP url is this:

<script>
function myDataFunc(data) {
    JSONObj = jQuery.parseJSON(data);
    contentProvider("#rtrn");
    if(JSONObj.ack != "No results found") {
        var paginate=setPager(0);
        $("#pgn").html(paginate);
    }
}
</script>
<script src="http://cs-server.usc.edu:27952/ResponseProg.php?jsoncallback=myDataFunc"></script>

The JSONP url will return something that looks like this:

myDataFunc({"a":"fhsfg","b":"qfdgers","c":"difgij"});

Since it is included as a script, it will be executed directly in your page, calling the function myDataFunc() that you defined earlier.

Also note that your php file use the GET parameter jsoncallback while your javascript calls the url with the parameter callback, which would not work.

Finally, you use jQuery.parseJSON(), which produces this error from your code:

SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data

The reason can be found in the jQuery docs:

jQuery.parseJSON( json )
Description: Takes a well-formed JSON string and returns the resulting JavaScript value.
Passing in a malformed JSON string results in a JavaScript exception being thrown.

Your php script feeds your callback with a JSON object

{"a":"fhsfg","b":"qfdgers","c":"difgij"}

rather than a string representing a JSON object

'{"a":"fhsfg","b":"qfdgers","c":"difgij"}'

Note the surrounding quotes, which makes this data a string. We fix this in php by adding the quotes around the data:

echo $_GET['jsoncallback']."('".$rsltjson."');";

Obviously if your JSON data contains single quotes, you will have to escape them.