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.
  2. Search for a book by entering an ISBN number. (Hint: Try 978-0470624708, which is the ISBN of the textbook.)

  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. ↩