JSONP with cross browser domain

creatorDotJS

Is there any updated documentation on JSONP with cross browser domain? Or any advice where I'm going wrong?

I found this example: http://datatables.net/beta/1.8/examples/server_side/jsonp.html and this example for remote domain: http://www.datatables.net/examples/server_side/jsonp.html. I'm a front-end developer that received a URL that outputs JSON from the server-side developer and I'm unsure where I'm going wrong and how to use columns appropriately.

Any help is greatly appreciated.

My code:

 $('table.display').dataTable( {
            "scrollY": "500px", 
            "scrollCollapse": true,
            "paging": true,
            "jQueryUI": true,
            stateSave: true, 
            "dom": 'C<"clear">Rlfrtip',
         "processing": true,
            "serverSide": true,
            $.ajax( {
        "url": "http://jsonoutput", //the URL will only work on my computer, but the output is below
                "dataType": "jsonp",
        "data": {
                 "columns": [
                   {"data": 'leadNum'},
                   {"data": 'lastName'},
                   {"data": 'firstName'}
                ] }, 
                "dataType": "jsonp",
                "cache": false
            } );
    } );

The URL points to JSON is in this format:

[{"LeadNum":1,"LastName":"Smith and another long name","FirstName":"Bill and another long name","Address":"4321 Kirkwall St","City":"South Jordan","State":"California","Zip":"12345","Phone":"987-654-3210","Cell":"012-345-6789","Email":"anthonydfabrizio@somelongname.com","CreationDate":"2014-08-06 10:54:56","ProjectedCloseDate":"2014-10-15 00:00:00","SalesRep1":1,"SalesRep2":2,"Type":1,"Priority":5,"ContactType":123,"ContactID":123456,"PaymentMethod":3,"EstimatedTotal":10000,"WonLost":123,"Status":null,"Comments":"","Notes":"","Location":3,"InvoiceNum":17890,"Advertising":"Radio Ad Group Number5","Advertising2":"","StreetLine2":"43211 Kirkwall Drive","CallBackDate":"0000-00-00 00:00:00","Snik1":"","Snik2":"","Snik3":"","SubmitTime":"1970-01-01","StyleName":"","ColorName":"","SampleEmployeeNum":0}]

creatorDotJS

Sorry, I just updated the code to be a bit more readable.

creatorDotJS

I was a little confused on what was meant with cross browser domain and remote domain. I believe http://www.datatables.net/examples/server_side/jsonp.html is what I'm needing to do.

allan

Hi,

The name "JSONP" is slightly confusing - simply enabling jsonp on the client doesn't automatically mean that you can do cross domain requests in order to get the same data from the remote server, you need to also modify the script on the remote server.

The way JSONP works is that a new script tag is added to the document (which allows the cross domain loading) and a callback function name is given in the GET parameters. The script being loaded would then execute that function, passing in the required data. For example:

callback_123456( {
  "name": "...",
  "occupation": "..."
} );

The callback_123456 function is registered on the client-side to then execute the ajax callback.

jQuery handles all of that transparently for you, but the one thing it can't do is the modifying of the remote script.

If you have a look at the end of the PHP script in the example you linked to (click the "Server-side script" tab below the table), right at the end you will see how the example does the P part of JSONP:

echo $_GET['callback'].'('.json_encode(
   ...
).');';

i.e. it uses the callback name and encodes the object inside it.

It is worth noting that this also limits JSONP to GET. You can't do POST with it (you probably could thinking about it, but you'd need to hack the browser to send the script src request as POST...!).

If you aren't able to modify the script on the remote server, you need to use a proxy script that will make the remote request for you and then return the data, making it look local.

The final option, although it again requires control of the remote server, is to use CORS which involves setting and http header.

Regards,
Allan