Click here to Skip to main content
Click here to Skip to main content
Go to top

JSONP a way to AJAX request across domains

, 22 Aug 2014
Rate this:
Please Sign up or sign in to vote.
example to request a JSON data

Introduction

If you try to request to other domain different from that comes the request, exist a Policy for browsers that not allow you to do this. There are two main techniques to do this: JSONP or CORS. This example that I want to share is about how to use JSONP AJAX request.

Background

We were trying to integrate with a service provider (SP) that perfectly complements ours to show it to our customers as an extra and to obtain an extra benefit, extending the final package. These SPs have their own public webservice to make the requests and get the necessary information, GREAT!!, half work done Smile | :) .

Let's do AJAX asynchronous requests and so we do not overload the page that allready takes enough. And so it began headache Frown | :( Buildin the JSON for the request, done! Do AJAX request with JQuery, done! There is no JSON in return, but open the Fiddler and surprise exist response!!, If I can see the response, why is not in my succes function?

I learn about Same-origin policy.

Google this, google that and finally build my JS to finish my task, and now I share a simple example.

Using the code

With the following code you will be able to obtain a JSON response from other domain that allow callback parameter.

If you need to request with another JSON just add to the data parameter as I show commented in the sample file.

jQuery.ajax({
        url: URL,
        type: "GET",
        jsonpCallback: "callback",
        contentType: "application/javascript",
        dataType: "JSONP",
        beforeSend: function () {
            //Do your stuff before send, ussually a loading image.
        },
        error: function () {
            //Control the error.
        },
        success: function (data) {
            //Parse the data or do whatever you need.
                }
            }
        }

Callbacks

For JSONP applications to work, they need to be able to specify a callback parameter. You can specify a callback parameter by appending ?callback=[function_name], where [function_name] represents the Javascript function name to send the JSON object to. In AJAX request you must set it in JsonCallback.

Example calling:

http://echo.jsontest.com/Habana/Gropius?callback=callback

The response:

callback({"Habana": "Gropius"});

Thanks

http://json-p.org/

http://www.jsontest.com/

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Alexander Parra Lorenzo
Software Developer (Senior)
Spain Spain
“Before software can be reusable it first has to be usable.”
- Ralph Johnson

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 22 Aug 2014
Article Copyright 2014 by Alexander Parra Lorenzo
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid