In this example I will show you how to call the webservice
http://itunes.apple.com/search?term=
using jquery ajax.
The return from this webservice is a json resultset that has the structure shown in the image below
To make this call just copy paste the text below into notepad and save it with a .html extension
http://itunes.apple.com/search?term=
using jquery ajax.
The return from this webservice is a json resultset that has the structure shown in the image below
To make this call just copy paste the text below into notepad and save it with a .html extension
<html>
<head>
<title>Ajax webservice example</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//This means when the button btnWebserviceCaller is
clicked the call the function CallWebService
$("#btnWebserviceCaller").click(CallWebService);
//This code means when user presses enter in the text
box txtSearch then click the button btnWebserviceCaller
$("#txtSearch").keyup(function (event) {
if (event.keyCode == 13) {
$("#btnWebserviceCaller").click();
}
});
function CallWebService() {
$("#divResults").text("Please Wait...");
var searchTerm = $("#txtSearch").val();
var webMethod = "http://itunes.apple.com/search?term="
+ searchTerm;
//This is where the ajax call is made
$.ajax({
type: "GET",
url: webMethod,
contentType: "application/x-www-form-urlencoded",
//this is format to sent to the server
dataType: "jsonp", //format to expect back from the server
success: function (msg) {
//if success, come in here
var dislplayHtml = "<br/>";
$.each(msg.results, function () {
//come in here for every result in the array
msg.results
$.each(this, function (key,
value) {
//come in here for every key value pair with in a
result
dislplayHtml =
dislplayHtml + key + ":" + value + "<br/>";
});
dislplayHtml =
dislplayHtml + "<br/><br/>";
});
$("#divResults").html(dislplayHtml);
}, //success function ends here
error: function (xhr, msg) {//if fail, come in here
$("#divResults").text(msg);
} //error function ends here
}); //ajax function ends here
}
//function
CallWebService ends here
});
</script>
</head>
<body>
Enter
Search Term:
<input type="text" id="txtSearch"
value="Metallica"
/>
<button id="btnWebserviceCaller"
type="button">
Search Itunes</button>
<br />
Results:
<div id="divResults">
</div>
</body>
</html>
Note: If you are making jquery ajax call to an external domain, the only call you can make is a GET call with dataType: "jsonp". POST calls are possible only if you are making a call within the domain in which your ajax page is hosted. This is a security restriction enforced by the browser.
Note: If you are making jquery ajax call to an external domain, the only call you can make is a GET call with dataType: "jsonp". POST calls are possible only if you are making a call within the domain in which your ajax page is hosted. This is a security restriction enforced by the browser.
Check this out for more info on jquery ajax.
No comments:
Post a Comment
Comments will appear once they have been approved by the moderator