Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make cross-domain ajax JSONP request with jQuery

I would like to parse JSON array data with jquery ajax with the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Sample</title> <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript">     var result;     function jsonparser1() {         $.ajax({             type: "GET",             url: "http://10.211.2.219:8080/SampleWebService/sample.do",             dataType: "jsonp",             success: function (xml) {                 alert(xml.data[0].city);                 result = xml.code;                 document.myform.result1.value = result;             },         });     }         </script>     </head> <body> <p id="details"></p> <form name="myform">     <input type="button" name="clickme" value="Click here to show the first name" onclick=jsonparser1() />     <input type="text" name="result1" readonly="true"/>         </form> </body> </html> 

My JSON data is:

{"Data":   [{"Address":"chetpet","FirstName":"arulmani","Id":1,"LastName":"sathish","City":"chennai"},{"Address":"ramapuram","FirstName":"raj","Id":2,"LastName":"nagu","City":"chennai"},{"Address":"ramapuram","FirstName":"raj","Id":2,"LastName":"nagu","City":"chennai"},{"Address":"ramapuram","FirstName":"ramaraj","Id":3,"LastName":"rajesh","City":"chennai"},{"Address":"ramapuram","FirstName":"yendran","Id":3,"LastName":"sathi","City":"chennai"}],"Code":true} 

But i am not getting any output...anybody please help out...

like image 308
prabu R Avatar asked Jul 31 '12 08:07

prabu R


People also ask

Can JSONP be used with Ajax?

JSONP allows you to sidestep the same-origin policy and to some extent make cross-domain Ajax calls. It's not a silver bullet, and it certainly has its issues, but in some cases it can prove invaluable when fetching data from a different origin.

What is JSONP in Ajax?

JSONP stands for JSON with Padding. Requesting a file from another domain can cause problems, due to cross-domain policy. Requesting an external script from another domain does not have this problem. JSONP uses this advantage, and request files using the script tag instead of the XMLHttpRequest object.

Can you do cross domain Ajax?

Browser does not allow cross domain AJAX requests due to security issues. Cross-domain requests are allowed only if the server specifies same origin security policy. To enable CORS, You need to specify below HTTP headers in the server. Access-Control-Allow-Origin – Name of the domain allowed for cross domain requests.

How do I create a JSONP request?

Method to use JSONP: In HTML code, include the script tag. The source of this script tag will be the URL from where the data to be retrieve. The web services allow to specify a callback function. In the URL include the callback parameter in the end.


2 Answers

Concept explained

Are you trying do a cross-domain AJAX call? Meaning, your service is not hosted in your same web application path? Your web-service must support method injection in order to do JSONP.

Your code seems fine and it should work if your web services and your web application hosted in the same domain.

When you do a $.ajax with dataType: 'jsonp' meaning that jQuery is actually adding a new parameter to the query URL.

For instance, if your URL is http://10.211.2.219:8080/SampleWebService/sample.do then jQuery will add ?callback={some_random_dynamically_generated_method}.

This method is more kind of a proxy actually attached in window object. This is nothing specific but does look something like this:

window.some_random_dynamically_generated_method = function(actualJsonpData) {     //here actually has reference to the success function mentioned with $.ajax     //so it just calls the success method like this:      successCallback(actualJsonData); } 

Summary

Your client code seems just fine. However, you have to modify your server-code to wrap your JSON data with a function name that passed with query string. i.e.

If you have reqested with query string

?callback=my_callback_method 

then, your server must response data wrapped like this:

my_callback_method({your json serialized data}); 
like image 56
Abdul Munim Avatar answered Oct 14 '22 12:10

Abdul Munim


You need to use the ajax-cross-origin plugin: http://www.ajax-cross-origin.com/

Just add the option crossOrigin: true

$.ajax({     crossOrigin: true,     url: url,     success: function(data) {         console.log(data);     } }); 
like image 29
Ninioe Avatar answered Oct 14 '22 11:10

Ninioe