AJAX example: The phone-book

The web page: phonebook.html

This is the phone-book application as viewed from a web browser.This is the HTML that the user would navigate to with a web browser. The picture on the left shows what it looks like in a web browser.

Typing letters in the top text-box will immediately send an AJAX request to the server, asking for matching names from the database. The list-box below will be populated with those names as soon as the response is retrieved, and with this tiny example and simple database, that happens pretty much immediately, meaning that the listbox will be updated as soon as you type a letter.

As you can see, I have entered the letters “br” as search pattern, and the list-box below show five matches from the database. Actually, the JavaScript code below asks for six matches, but there are only five “hits” in the database.

Here is the complete contents of phonebook.html:

The HTML code (at the top) is trivial – I have made no effort to make this pretty or cool. Note the assigned event handlers, though; For the keyUp event on the search box so that the handler is invoked after that the value of the text-box has changed, and for the onChange event for the list-box so that the handler is triggered also when switching selection using the arrow keys.

I hope that the code comments together with the description of how to use AJAX in my previous post, How to use AJAX with JSON and without jQuery, is enough to describe the JavaScript code. I realize that some of it may look strange if you are not familiar with JavaScript and JSON, but explaining it further would be outside the scope of the post. Leave a comment if you want me to explain something.


AJAX example: The phone-book — 1 Comment

  1. Pingback: How to use AJAX with JSON and without jQuery | iseborn.eu

Add Comment Register

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">