Multiple Ajax Requests with Jquery
Wall Script
Follow Me:
Wednesday, March 02, 2011

Multiple Ajax Requests with Jquery

Last few days I have been working with APIs for instant search results, I had an idea to implement a super instant search with multiple APIs like twitter, youtube, yahoo and bing. But jquery older versions doesn’t support multiple ajax call-backs, luckily I had found Jquery 1.5 has released a new method called $.when finally I have developed super fast search at kokkoroko.com.

Kokkoroko Super instant search

Download Script     Live Demo

Javascript Code
Contains javascript and HTML code. $.when( yahoo(), bing()) is the method to call multiple ajax requests. Here $.when calling two functions called yahoo() and bing() callback objects $.done(yahoo_data, bing_data)
<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()
{
$(".search_input").keyup(function()
{
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
// Yahoo Search API 
var yahoo_url='http://boss.yahooapis.com/ysearch/web/v1/'+keyword+'?appid=APP_ID&format=json&callback=myData';
var bing_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid=APP_ID&query='+keyword+'&sources=web&web.count=10';
// 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)
{
}
});
}
// Multiple Ajax Requests 
$.when( yahoo(), bing()).done(function(yahoo_data, bing_data)
{
var yahoo=yahoo_data[0].ysearchresponse.resultset_web;
var bing=bing_data[0].SearchResponse.Web.Results;
// Yahoo results
if(yahoo)
{
$("#yahoo_result").html('');
$.each(yahoo, function(i,data)
{
var title=data.title;
var dis=data.abstract;
var url=data.url;
var dispurl=data.dispurl;
var final="<div class='webresult'><div class='title'><a href='"+url+"' target='_blank'>"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+dispurl+"</div></div&gt;";
$("#yahoo_result").append(final); // Result
});
}
// Bing results
if(bing)
{
$("#bing_result").html('');
$.each(bing, function(i,data)
{
var title=data.Title;
var dis=data.Description;
var url=data.Url;
var DisplayUrl=data.DisplayUrl;
var final="<div class='webresult'><div class='title'><a href='"+url+"' target='_blank'>"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+DisplayUrl+"</div></div&gt;";
$("#bing_result").append(final); // Result
});
}

});

});
});
</script>
// HTML code
<input type="text" class='search_input' />

<div>
<div id="yahoo_result"></div>
<div id="bing_result"></div>
</div>

CSS
#yahoo_result, #bing_result
{
float:left;
width:450px;
}
.search_input
{
border:2px solid #333;
font-size:20px;
padding:5px;
width:350px;
font-family:'Georgia', Times New Roman, Times, serif;
-moz-border-radius:5px;-webkit-border-radius:5px;
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


43 comments:

  1. Grande como siempre!

    Gracias por este, y en general por toda la ayuda que sin saberlo nos has prestado.

    Great as always!
    Thanks for this, and in general for all the help you've provided to us.

    ReplyDelete
  2. that is awesome! Nice job. I'm just wondering why you haven't included the Google search results. Would it be possible?

    ReplyDelete
  3. Nice tutorial srinivas .
    visit www.learnveryday.net tutorial for beginners.

    ReplyDelete
  4. nice sir thanks to shere

    ReplyDelete
  5. i think u have a typo on bing_data inside the bing function. -ilyas

    ReplyDelete
  6. @Mister Gingle

    Googe Search API - Per day only 100 callbacks

    ReplyDelete
  7. good idea , but i want google search engine api

    Thank.

    ReplyDelete
  8. Obrigado!
    VocĂȘ me ajuda muito!!!

    Thanks!
    You always help me!

    ReplyDelete
  9. Hi, Could it be possible to cache these results so repeated searches are faster. Also caching from such as client side instead server side. So cache is received from the client side

    ReplyDelete
  10. This is great, BUT how do you make it jump from one page to another, as soon as you start typing???
    I have been trying to figure it out for ages :(

    ReplyDelete
  11. oh my ghost...
    welcome kokkoroko :D

    ReplyDelete
  12. Genial este tutorial, siempre veo el blog, gracias..

    Thak's for tutorial.

    ReplyDelete
  13. OMG, tab... use tab....

    ReplyDelete
  14. Great stuff but wouldn't it be a bit smarter to put a delay before searching. So if the user does not press any key for say a few hundreds of a second it begins searching.
    For me in Chromium the page lags every time I press a key because it does the javascript every time. Have seen other implementing a delay to get much smooter searching, just a thought!

    ReplyDelete
  15. Eres increible Srinivas, gracias por este magnifico blog.

    You are awesome Srinivas, thanks you for this great blog.


    :)

    ReplyDelete
  16. Could you make more than one page?
    And I think the google would be a great idea, and the delay like a Loading Image and it goes away when done.

    Thanks, If you do these ill be very happy!
    :)

    ReplyDelete
  17. You should try to add the delay when the page is loading like suggested, add google (If possible) and make it have more pages? When you search on it only one page is shown.

    Thank you! Please try these ill check back soon.

    ReplyDelete
  18. This is wonderful, thanks so much! :)
    Web Development for beginners: http://codeofaninja.blogspot.com

    ReplyDelete
  19. This is a nice example of latest jquery version 1.5 functionality....Good work...Keep up..:)

    ReplyDelete
  20. Still waiting for them..
    I know you wouldnt have them done by now but could you say if you're going to do them in the future ?
    Thanks

    ReplyDelete
  21. can you make this work with the dailymotion api too?

    ReplyDelete
  22. sounds great
    thanks for sharing

    ReplyDelete
  23. Nice! I was kind of curious about how to implement something similar to this after reading your previous two tutorials. You beat me to it. Great Job & Thanks!

    ReplyDelete
  24. Hello i thing this is an amazing idea, but i would put a search button or wait to the user to press enter for starting the query, because it starts little "agresive". Think the user could misspelled the word and want to correct it before start the query.

    ReplyDelete
  25. Greate Job! However, it doesn't work if there is a timeout or the server is unreachable...

    ReplyDelete
  26. Can u add, as optional, the google api?

    ReplyDelete
  27. dont seems youtube and twitter in js ?

    ReplyDelete
  28. Hey This is really good .. I am really impressed good work!

    ReplyDelete
  29. Can you publish all the code? When i download this i only have 1 index page and when i save the .css file etc.it doesn't work :(

    I will be very happy if you add the following files to the download file:
    - index
    - css
    - javascript

    ReplyDelete
  30. great search engine project.

    ReplyDelete
  31. Sound Great Can you get the google search

    ReplyDelete
  32. Thanks for this great tutorial!

    ReplyDelete
  33. Great idea, unfortunately your website kokkoroko.com expired last month.

    ReplyDelete
  34. Thanks for this great example! Very helpful.

    ReplyDelete
  35. I will use this technique with online translators, the principle will use Google Translate and Bing Translator BeGlobal. Your example code was a great help, and logic When this command is fantastic.

    ReplyDelete

Make in India