Quick Ajax example using Prototype.js

Posted on Mar 20, 2007 | 7 comments

Overview

UPDATE: Please visit my updated article appropriately named “Quick Ajax Example Using jQuery“.


This example will explain how to use the Prototype.js Javascript library to perform a simple Ajax call from an html page to an ASP.NET page with dynamic info. In this example the dynamic ASP.NET page is getting the current date and time, in a real-world example an ASP.NET page could parse RSS feeds, show stocks quotes, lookup weather, etc.

Requirements

Let’s code!

  1. Create a web form called ShowTime.aspx (ShowTime.cs will be auto created) in Visual Studio 2005 and add a label control as shown below:
  2. Open up ShowTime.cs and declare a DateTime type variable and set it to display the current date and time: 
    DateTime dtRightNow = DateTime.Now;
  3. Inside the Page_Load set the page to not cache itself with the following code: 
    Response.CacheControl = "no-cache";
  4. Assign the current date and time to the lblDateTime control: 
    this.lblDateTime.Text = String.Format("{0:d}", dtRightNow) + " @ " + String.Format("{0:T}", dtRightNow);
  5. Now let’s create ShowTime.html. This page will call the Prototype.js and contain some Javascript to make an Ajax call to ShowTime.aspx
  6. Between the tags, reference the Prototype.js Javascript library like this:
  7. We're almost done! Just need to ad add a few more things between the tags. We will add a link with an ID called showtimelink and a
    with the ID of output.

    


;

    

;
  8. That's it! View the demo.

Download

[del.icio.us] [Digg] [Facebook] [LinkedIn] [MySpace] [StumbleUpon] [Twitter] [Windows Live] [Yahoo!] [Email]

Popularity: 39% [?]

7 comments

  1. Scott
    June 14, 2007

    This does not work in Firefox.

  2. Jerry Sosa
    July 12, 2008

    Eiii! thanx! it does work =) i rather use this option than using those horrible update panel heheh

  3. Jerry Sosa
    July 12, 2008

    it works on both, firefox and ie =)

  4. Jerry Sosa
    July 12, 2008

    One last thing, it is possible to call an specific function?? can you email me ? LOL

    Byee

  5. Thomas
    December 5, 2008

    Thanks for the example.

    Can you tell me why I cannot make this work if I try to do the exact same from an aspx page (instead of the html page), when I click the link nothing gets updated in the aspx page.

    Thanks

  6. Nealosis
    December 13, 2008

    @Scott

    Yes it works (http://dev.hostreaction.net/examples/showtime.html), but the author’s article is all jacked up with step 7 missing half the instructions.

  7. Steve
    March 1, 2009

    Hi Everyone, I apologize if this article may have been confusing for some of you. I have an updated article explaining the same concept but using jQuery a more efficient javascript library. http://stevenng.net/2009/03/01/quick-ajax-example-using-jquery/

Trackbacks/Pingbacks

  1. Steven Ng » Blog Archive » Quick Ajax Example Using jQuery - [...] 2 years ago I posted an article called “Quick Ajax Example Using Prototype.js” and some visitors commented that my ...

Leave a Reply