How to start.. ?
I am working on Ajax and I need to get some data, that is using XML.
If I am working on domain, lets say mysite.com and I need to get some data using xml
from the same domain, where the xml url is mysite.com/myxml.xml , So here you can direct
get the xml from this specific domain using HttpRequest.
But, what if you want data from some other domain, may be othersite.com/.
So, here XML will not be of an use, as XML httpRequest works only for the same domain
i.e. the requester and the responder are the same domains.
So, you may say lets use JSON. But, here JSON is also of no use.
As, JSON is just a formatting of data for (similar to XML)XML.
But it is also of no use for Cross Domain data Access.
What is JSON: JSON is Java Script Object Notaion. It is a lightweight data-interchange format.
The JSON filename extension is .json.
JSON is an alternative to XML and it is more easy to access than XML.
So if XML is as follows:
<?xml version="1.0" encoding="UTF-8"?>
<contacts>
<contact id="1">
<name>Anu Zamwar</name>
<phone>123-456-7890</phone>
<address>
<street>123 JFKStreet</street>
<city>Any Town</city>
<state>Any State</state>
<zipCode>12345</zipCode>
</address>
</contact>
</contacts>
So, JSON for this XML will be as:
{
"contacts" : {
"contact" : {
"@attributes" : {
"id" : "1"
},
"name" : "Anu Zamwar",
"phone" : "123-456-7890",
"address" : {
"street" : "123 JFK Street",
"city" : "Any Town",
"state" : "Any State",
"zipCode" : "12345"
}
}
}
}
|
So, now let me get back to the point, how to overcome the problem of Cross Domain Data Access.
JSONP is a means by which to get JSON data from another
domain than the one your page is on.
If you try and use Ajax to request data from a different
domain than the page, you’ll get a security error.
One way around this is a concept some call “JSONP”.
This is where you include a script tag in your document. This script
tag points to an external javascript source and when the
script tag loads it executes (like any other script tag).
The catch is that you need to be able to tell that server what
to wrap the data with so your functions can handle it.
Let’s say we are on this page at clientcide.com.
Let’s say we want to get some data from the flicker api at flicker.com/services/api.
Here’s a simple request that gets the latest photos:
http://www.flickr.com/services/feeds/photos_public.gne?format=json
To Overcome this problem of Cross Domain Data Access, JSONP comes into picture. What is JSONP?
I asked this to Google and he gave me few answers as always. You can also get some from googly..
So, whats the difference between JSON and JSONP. Both are same, except the difference that in JSONP,
you also include a call back function name. So, when u need to get the data of this JSONP using AJAX,
you need to tell AJAx the name of the call back Function defined in JSONP file.
How will the above JSON look when written as JSONP:
func({
"contacts" : {
"contact" : {
"@attributes" : {
"id" : "1"
},
"name" : "Anu Zamwar",
"phone" : "123-456-7890",
"address" : {
"street" : "123 JFK Street",
"city" : "Any Town",
"state" : "Any State",
"zipCode" : "12345"
}
}
}
});
|
⇒ func is the Callback function, used in the above JSONP file.
Now let this above JSONP file name be myjsonp.json
and it is under domain → http://www.othersdomain.com/myjsonp.json
And you domain is http://www.mydomain.com/
I am using Jquery.ajax to show the working with JSONP. Code is as follows:
$.ajax({
url: "http://www.othersdomain.com/myjsonp.json", //URL of JSONP File
dataType: "jsonp", // Data type is JSONP
processData: false, // No need to process Data, we use it as JSONP
jsonpCallback: "func", // Callback function
success: function(data,textStatus,obj) {
var name = data.contacts.contact.name;
alert("Name is: " + name);
}
});
So, here it is the use of JSONP to over come the problem of Cross Domain Requests..
Helping Hands 