For this article I have created a web application from scratch that will pull data from Google/Yahoo and will display in user interface using jQuery Ajax and Web service. For your reference I have attached the source code with this article. Your votes, suggestions and feedbackare highly appreciated to improve the quality of this and upcoming articles, please don't forget.

Google is using their own hidden API for showing the real-time currency rate in their search engine. Why it's hidden,because this API doesn't come with an official document. If you haven’t checked this service yet then click here or else see the below given screen-shot.

Yahoo’s real-time currency converter API will give you a .csv file with the currency conversion rate.Click here to see Yahoo’s Online Currency Converter or else see the below given screen-shot.

As you can see from below given screen shot , The UI contains very less controls.Two dropdowns, one text box and one button, the result is just displayed in a table cell <td>.

<o:p />

Here Textbox is used to capture the amount which needs to be converted to the desired currency from the current currency and two drop downs are prefilled with the Currency Code and Country Names. Once you click on the Convert button it will call a jQuery Ajax method which calls a webmethod internally. You can get the country list and codes from the attached file.

In the above code, the click() event is tied to the submit button and jQuery val() function is used to retrieve the control values and its passed to the webservice method. By using $.ajax we are making a jQuery Ajax call to a .NET webservice. here before initiating the ajax call I'm setting the result value as "Converting..." using the beforeSend setting of $.ajax. If the call is success then the currency rate will display in the result cell else the error will display.

We can call the Yahoo Web Method by setting the url setting of jQuery Ajax call as below.

url: "WebService.asmx/ConvertYHOO",

When the element with ID “submit” (Convert button) is clicked then this method will get called. By using val() function of jQuery the html controls values are stored to a variable and that variable is passed to the Web service method. We are calling the jQuery Ajax call by the $.ajax , the web service name and method are mentioned in url setting of jQuery.ajax() function. So when we click the result cell will display “Converting...”, if the call is success then the expected output will be shown in the result <td> otherwise it will display an Error Description and a hyperlink that will show the error cause in detail. I have tried to handle some of the errors in jQuery Ajax Call.

Error Setting of jQuery Ajax call.

This block is used to catch the jQuery ajax call to the Web Method, This code will set the error description and will add a hyperlink for more error details, you can see the sample output below.

ConvertGOOG Web Method is used to handle the Google API call to return the currency rate. The recieved response is parsed and only the rate part is returned from this function. For your quick reference I have given the Debugging Screen shot below.So that you can see the response and the url passed from this method.

ConvertYHOO Web Method is used to handle the Yahoo API call to return the currency rate. The recieved response is parsed and only the rate part is returned from this function. For your quick reference I have given the Debugging Screen shot below.So that you can see the response and the url passed from this method.

The expected format of the rate is a proper decimal number, if any other format (eg: 9 433.56 - space came in between number) comes then we need to handle the same in Web Method.