In this article I will explain JSONP request with Callback example using jQuery i.e. how to make a Cross Domain JSONP request with Callback using plain jQuery.
Callback means that it will call a function once the response is ready.
In order to explain JSONP Callback request using jQuery, I am making call to a JSON Web Service which returns IP Address in JSON format with Callback.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "GET",
url: "http://www.telize.com/jsonip?callback=?",
dataType: "jsonp",
contentType: "application/json; charset=utf-8",
success: function (response) {
$("#ipaddress").html("Your IP Address is " + response.ip);
},
error: function (e, r, h) {
alert(h.message);
}
});
});
</script>
</head>
<body>
<span id="ipaddress"></span>
</body>
</html>
Explanation
Inside the jQuery document ready event handler, a jQuery AJAX GET call is made to the JSON Web Service.
The data type is set to jsonp to notify jQuery that it is a JSONP request.
Note: When using jQuery AJAX there’s no Callback function as the response will be received in the Success event handler hence we need to pass “?” to the Callback parameter.
The response returned by the JSON Web Service is received in the Success event handler and the IP Address is displayed in HTML Span element.
Demo
Downloads
Download Code
