AJAX example: The phone-book

Programming with BosseThis example was supposed to be included in the previous post, How to use AJAX with JSON and without jQuery, but that post just kept growing, to the point where it got to long be manageable. So what you see here is just the phone-book example that I mentioned in that post.

We will create a simple phone-book web application, consisting of a phone-book database in the form of a JSON file, an HTML web page where you search for people in the database, and a server-side PHP script that responds to the AJAX requests from the JavaScript code in the HTML page.

Please remember that this is about learning how to use AJAX – not about creating a good phone-book. This is a very simple application; The database file contains 50 made-up persons, and there is no functionality for editing the database – you can only search what is already there. That’s the only functionality of the application: searching the database.

The HTML page has a text-box where you type letters. Every time that the contents of that box changes, the associated JavaScript code will send an AJAX request to the server, requesting a list of matching names from the phone-book database. Both first and last names are checked, so if you for example enter “br”, it will match first names like Brad and Bryan, but also last names like Brogden and Breed. The list of matching names will be displayed in a list-box, and clicking on a name there will generate a new AJAX request to get the person’s phone number.

If you don’t feel like implementing the example yourself, you can still try it out on my web site through this link.

If you do want to implement the example yourself, it’s as easy as copying all three files below to the same directory on a web server.

The application components

The application components all reside on the web server, and the only one that you will access directly is phonebook.html, which is the HTML document that you will open in your web browser.

Then there is the PHP script phonebook_connector.php. You can open this directly in your web browser, but that would be pointless. This script is listening for AJAX requests on JSON format, and navigating to it through your browser will just get you a pages with two square brackets, “[]“. If you know a little about the JSON format, you might recognize this as representing an empty JSON array, and that is what the script gives you when you don’t ask for anything in particular.

And finally there is the phone-book database file, people.json.

I have placed the description of each of the three components on a separate page below.


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="">