Make cross-domain ajax JSONP request with jQuery

by

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});

More Related Contents:

  1. jQuery AJAX cross domain
  2. Serializing to JSON in jQuery [duplicate]
  3. AJAX cross domain call
  4. Post data to JsonP
  5. Convert JSON array to an HTML table in jQuery
  6. No ‘Access-Control-Allow-Origin’ header is present on the requested resource error
  7. Ajax request returns 200 OK, but an error event is fired instead of success
  8. Chrome refuses to execute an AJAX script due to wrong MIME type
  9. Why is it a bad practice to return generated HTML instead of JSON? Or is it?
  10. Jquery getJSON populate select menu question
  11. jQuery AJAX polling for JSON response, handling based on AJAX result or JSON content
  12. send json object from javascript to php
  13. AJAX call and clean JSON but Syntax Error: missing ; before statement
  14. jQuery AJAX Call to PHP Script with JSON Return
  15. console.log(result) prints [object Object]. How do I get result.name? [duplicate]
  16. Execute function after Ajax call is complete
  17. SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
  18. creating highchart with ajax json data
  19. How to return an array from an AJAX call?
  20. JQuery getJSON – ajax parseerror
  21. jQuery AJAX submit form
  22. How to send a JSON object using html form data
  23. Getting all selected checkboxes in an array
  24. JQuery Ajax – How to Detect Network Connection error when making Ajax call
  25. cross-origin ‘Authorization’-header with jquery.ajax()
  26. How do I abort image load requests without using window.stop()
  27. Cross-origin resource sharing (CORS) concept
  28. How to load all server side data on initial vue.js / vue-router load?
  29. Get JSON in a Chrome extension
  30. Parsing returned HTML from jQuery AJAX request

Leave a Comment