Asynchronous JavaScript and XML (AJAX) should be used whenever possible to minimize the number of page refreshes on websites. The following example illustrates the use of AJAX to search a database of books.1

  1. Open the books example. You may want to do it in a new tab or another window so that you can refer to the instructions that follow.
  2. Search for a book by entering an ISBN number. (Hint: Try 978-0470624708, which is the ISBN of Fundamentals of Database Management Systems.)

  3. Find the use of AJAX by viewing the source of the web page.

    Step through the execution of the AJAX request and response handler. In Google Chrome, you can step through JavaScript execution by opening the Developer Console, selecting the “Sources” tab and viewing the source of the web page. (If the page source is empty, refresh the web page.) Click on the line number to the left of the first line of the JavaScript function to set a breakpoint. Type a single character in the input text field and Chrome should pop up options to continue executing or to step line-by-line through the function.

  4. View the JSON “database” by opening the file in your web browser. Can you figure out how JSON encodes objects, arrays, strings, and numbers?

  1. The “database” in this example is a simple JSON file, which is transferred in its entirety to the client. While JSON is commonly used to encode data (see REST and JSON), an actual web service would not return everything in the database to clients – the response would be much too large. ↩