Thursday, August 11th, 2005

ClearNova: Ajax Examples

Category: Examples, Google

ClearNova has some nice ajaxian examples:

  • Ping: Ping sends the current date to the server. Basic AJAX functionality. See server console for date.
  • Track Changes: As each field changes, the change is sent to the server. If all is well, the word OK shows up next to the field along with the text sent to the server.
    The server console shows the values sent to the server.
  • Drop Downs & Form Handling: An AJAX call is made to the server to get the states and populate the select box (drop down). The server dynamically creates Javascript that is executed through an eval statement.The final line of the Javascript calls the onchange event of the state drop down which then retrieves all the cities for that state.

    The city drop down is populated and its onchange event retrieves all the customers for a given city.

    When the customer changes, the server returns Javascript that replaces all customer fields with the appropriate values.If you open the Track Changes section, you’ll notice that both address fields on the page are updated.

    In the samples, if you add a new INPUT field that matches a column in the customer table, it will be populated for you during runtime

    The routines to retrieve the state, city, and customer dropdowns all use variations of encapsulating XMLHTTPRequests instead of using a global XMLHTTPRequest (_ajax).
  • Get Customers By State (Parse Plain Text): This calls the server when the state is changed. The server returns a data set that includes the customer ID and the customer name.

    Each pair is delimited by a comma, and each set is delimited by a !
  • Get Customers By State (Parses XML): This calls the server when the state is changed. The server returns a data set that includes the customer ID and the customer name.

    The data is returned back as an XML document and the returnXML property of the XMLHTTPRequest is parsed to pull out the data.
  • Google Suggest Hack: This fires on each keystroke and calls the server passing the current search field.

    The server in turn calls the google suggest URL and then passes the results back to the user’s browser.

    Google returns a Javascript method call to sendRPCDone(). We have our own sendRPCDone that loops through the results and presents the top 10 hits + # of pages.

    The reason Google is not called directly from the browser is that XMLHTTPRequest can only be used to call the orignal server or a trusted server setup in the Browser settings.
  • Activity Log: Shows various activity logs for each of the examples.

    The log is shown with the most recent log item at the top of the list.

    To write to this log, use the logger() function in the Javascript.

clearnova.jpgClearNova: Ajax Examples

Posted by Dion Almaer at 10:23 am

3.5 rating from 10 votes


Comments feed

How do i use AJAX in a jsp page if I am using a URL to display a table and I am trying to use AJAX to update a column of that table using same parameters but only one parameter change? Is there a way I can display data with change parameter using URL link?

Comment by peace — September 21, 2005

Providers of Moving Help and Moving Labor, for customer who need there Rental Moving Truck Container Pod or Crate Loaded and Unloaded Nationwide

Comment by Operations Department — December 25, 2005

Best games to play, best strategies to win. User ratings & reviews of top online casinos & pokers with largest bonuses & highest payouts.

Comment by Online Casino — August 14, 2006

Leave a comment

You must be logged in to post a comment.