jQuery 1.5 has released a new method jQuery.when(deferreds) {deferreds One or more deffereds objects or plain JavaScript objects} using which multiple Ajax requests can be send at once.
Lets see an example where we get the search results for keyword entered from Yahoo Search and Bing Search at the same time.
Note: You will need Application ID for Yahoo search and Bing Search for this example to work. You can get the Application ID from the following links:
1. Yahoo BOSS Application ID - http://developer.yahoo.com/wsregapp/
2. Bing Application ID - http://www.bing.com/developers/createapp.aspx
Step 1 - Create the HTML having a Text Box which takes in the Search Keyword and 2 Div's for Yahoo and Bing Search Results
Enter search Keyword
<input type="text" class='keyword' />
<div>
<div id="yahoo_search_results" style="background-color:Aqua"></div> <!-- Aqua color identifies results returned from Yahoo -->
<div id="bing_search_results" style="background-color:Gray"></div> <!-- Grey color identifies results returned from Bing -->
</div>
Step 2 -Include the jQuery 1.5 files and set the keyword input in text box to a variable
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".keyword").keyup(function () {
var search_input = $(this).val(); //Set the value of text box to search_input variable
var keyword = encodeURIComponent(search_input); //Make sure the input values encode special characters
Step 3 - Set the URL's for Yahoo and Bing Search API. The APPLICATION_ID replaces the Application ID for your application after you register using the links mentioned above
//Replace APPLICATION_ID with the Application ID you receive from Yahoo and Bing
var yahoo_url = 'http://boss.yahooapis.com/ysearch/web/v1/' + keyword + '?appid=APPLICATION_ID&format=json&callback=myData';
var bing_url = 'http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid=APPLICATION_ID&query=' + keyword + '&sources=web&web.count=10';
Step 4 - Write seperate functions making Ajax calls to Yahoo and Bing Search
// Yahoo API
function yahoo() {
return $.ajax({
type: "GET",
url: yahoo_url,
dataType: "jsonp",
success: function (yahoo_data) {
}
});
}
// Bing API
function bing() {
return $.ajax({
type: "GET",
url: bing_url,
dataType: "jsonp",
success: function (bing_data) {
}
});
}
Step 5 - Now, we call both Yahoo and Bing API at once using the functions written in Step 4
$.when(yahoo(), bing()).done(function (yahoo_data, bing_data) {
var yahoo = yahoo_data[0].ysearchresponse.resultset_web; //Yahoo API specific code
var bing = bing_data[0].SearchResponse.Web.Results; //Bing API specific code
if (yahoo) {
$("#yahoo_search_results").html('');
$.each(yahoo, function (i, data) {
var title = data.title;
var desc = data.abstract;
var titleUrl = data.url;
var descUrl = data.dispurl;
var yahoo_result = "<div class='title'><a href='" + titleUrl + "' target='_blank'>" + title + "</a></div>"
yahoo_result += "<div class='desc'>" + desc + "</div><div class='url'>" + descUrl + "</div>";
$("#yahoo_search_results").append(yahoo_result);
});
}
if (bing) {
$("#bing_search_results").html('');
$.each(bing, function (i, data) {
var title = data.Title;
var desc = data.Description;
var titleUrl = data.Url;
var descUrl = data.DisplayUrl;
var bing_result = "<div class='title'><a href='" + titleUrl + "' target='_blank'>" + title + "</a></div>"
bing_result += "<div class='desc'>" + desc + "</div><div class='url'>" + descUrl + "</div>";
$("#bing_search_results").append(bing_result);
});
}
});
});
});
</script>
In Step 5 we simply make the Ajax calls using $.when() and append the search results to the search engine specific Div's.
After running the above code and typing a keyword in the Text Box you will simply see the search results from Yahoo in Aqua color and from Bing in Grey color.