The JavaScript Client (Front End)

JavaScript has traditionally had one way of communicating with a server: by submitting a form. Remote scripting allows for much more versatile communication with the server. The A in AJAX stands for asynchronous, which means that the browser (and the user) aren’t left hanging while waiting for the server to respond. Here’s how a typical AJAX request works:

1. The script creates an XMLHttpRequest object and sends it to the web server. The script can continue after sending the request.

2. The server responds by sending the contents of a file or the output of a server-side program.

3. When the response arrives from the server, a JavaScript function is triggered to act on the data.

4. Because the goal is a more responsive user interface, the script usually displays the data from the server by using the DOM (Document Object Model), eliminating the need for a page refresh.

In practice, this happens quickly, but even with a slow server, it can still work. Also, because the requests are asynchronous, more than one request can be in progress at a time.

The Server-Side Script (Back End)

The part of an application that resides on the web server is commonly referred to as the back end. The simplest back end is a static file on the server, such as an XML or text file that holds data; JavaScript can request such a file with XMLHttpRequest and then read and act on its contents. More commonly, the back end is a server-side program running in a language such as PHP, Perl, or Ruby, and these server-side programs output results in XML or JSON (JavaScript Object Notation) format.

JavaScript can send data to a server-side program by using GET or POST methods—the same methods used in an HTML form. In a GET request, the data is encoded in the URL that loads the program. In a POST request, it is sent separately and can contain more data.

XML

The X in AJAX stands for XML (Extensible Markup Language), the universal markup language on which the latest versions of HTML are built. A server-side file or program can send data in XML format, and JavaScript can act on the data by using its methods for working with XML.

Keep in mind that using XML is just one way to send data, and it’s not always the easiest. The server could just as easily send plain text, which the script could display, or HTML, which the script could insert into the page by using the innerHTML property. Some programmers have even used server-side scripts to return data in JavaScript format, which can be easily executed using the eval function.

Popular Examples of AJAX

Whereas HTML and JavaScript are typically used to build web pages and sites, AJAX techniques often result in web applications—web-based services that perform work for the user. Here are a few well-known examples of AJAX:

Google’s Gmail mail client (http://mail.google.com) uses AJAX to make a fast-responding email application. You can delete messages and perform other tasks without waiting for a new page to load.

Amazon.com uses AJAX for some functions. For example, if you click on one of the Yes/No voting buttons for a product comment, it sends your vote to the server, and a message appears next to the button thanking you—all without loading a page.

Facebook (www.facebook.com) and other sites that allow you to “like” something are probably the most prevalent examples of AJAX in our daily lives. Every single time you click to “like” something, either on Facebook or elsewhere, you are using AJAX to communicate that click to a server-side script somewhere, which then seamlessly updates the “like” count—without reloading the page.

These are just a few examples. Subtle bits of remote scripting appear all over the web, and you might not even notice them—although you might be annoyed a little bit less often about having to wait for a page to load.

AJAX Frameworks and Libraries

Remote scripting can be complicated—especially considering the browser differences you’ll learn about briefly in this hour—and several frameworks and libraries have been developed to simplify web application programming that leverages AJAX. Here are a few popular and feature-rich frameworks and libraries:

jQuery (http://jquery.com) is the most popular JavaScript library in use today, with over 90% market share. It serves as the foundation for many of the AJAX functions and applications you encounter on a daily basis. The core library and the user interface extensions library allow you to rapidly build and deploy rich user interfaces and add a variety of attractive effects to existing components.

Prototype (www.prototypejs.org) is another JavaScript library that simplifies tasks such as working with DOM objects, dealing with data in forms, and remote scripting (AJAX). Prototype is also built into the Ruby on Rails framework for the server-side language Ruby, and the Script.aculo.us library plugs in to Prototype for rapid development of visual effects and user interface elements.

Backbone.js (http://backbonejs.org) and Ember.js (http://emberjs.com) are both lightweight but powerful frameworks for rapid development of AJAX-based web applications. They are especially popular for the creation of single-page web applications.

Limitations of AJAX

Remote scripting is powerful, but there are some things it can’t do, and there are some things to watch out for. These are some of the limitations and potential problems of AJAX:

The script and the XML data or server-side program it requests data from must be on the same domain, or steps must be taken to allow and secure cross-domain communication.

Some older browsers and some less common browsers (such as some mobile browsers) don’t support XMLHttpRequest, so you can’t count on its availability for all users. While this is changing, it must still be accounted for.

Requiring AJAX might compromise the accessibility of a site for disabled users.

Users may still be accustomed to seeing a new page load each time they change something, so there might be a learning curve for them to understand an AJAX application. This, too, is changing, through heavy personal use of social media sites, which are heavy users of AJAX.

As with other advanced uses of JavaScript, the best approach is to be unobtrusive; make sure there’s still a way to use the site without AJAX support if possible and use feature sensing to prevent errors on browsers that don’t support it.

Creating a Request

To create an XMLHttpRequest object, you use the new keyword, as with other JavaScript objects. The following statement creates a request object in some browsers:

Click here to view code image

ajaxreq = new XMLHttpRequest();

This example works with Firefox, Chrome, Internet Explorer (versions 7 and later), Microsoft Edge, and other modern browsers, but not with Internet Explorer 5 or 6. It is up to you whether you want to support these older browsers or not. Although the use percentages of the older browsers are very low, some institutions might be stuck with, for example, a lot of Internet Explorer 6 browsers installed at workstations, so your mileage may vary.

ajaxreq = new ActiveXObject("Microsoft.XMLHTTP");

Later this hour you will see how to use the correct method depending on the browser in use. In either case, the variable you use (ajaxreq in this example) stores the XMLHttpRequest object. You can use the methods of this object to open and send a request, as explained in the following sections.

Opening a URL

With the open() method of the XMLHttpRequest object, you specify the filename as well as the method in which data will be sent to the server: GET or POST (the same methods supported by web forms):

Click here to view code image

ajaxreq.open("GET","filename");

For the GET method, the data you send is included in the URL. For example, the following command opens (runs) a script file on the web server called search.php and sends the value John for the query parameter:

Click here to view code image

ajaxreq.open("GET","search.php?query=John");

Sending the Request

You use the send() method of the XMLHttpRequest object to send a request to the server. If you are using the POST method, the data to send is the argument for send(). For a GET request, you can use the null value instead:

ajaxreq.send(null);

Awaiting a Response

After the request is sent, your script continues without waiting for a result. The result could come at any time, and you can detect it with an event handler. The XMLHttpRequest object has an onreadystatechange event handler for this purpose. You can create a function to deal with the response and set it as the handler for this event:

Click here to view code image

ajaxreq.onreadystatechange = MyFunc;

The request object has a property, readyState, that indicates its status, and this event is triggered whenever the readyState property changes. The values of readyState range from 0 for a new request to 4 for a complete request, so your event-handling function usually needs to watch for a value of 4.

Although the request is complete, it might not have been successful. The status property is set to 200 if the request succeeded or an error code if it failed. The statusText property stores a text explanation of the error or OK for success.

Interpreting the Response Data

When the readyState property reaches 4 and the request is complete, the data returned from the server is available to your script in two properties: responseText is the response in raw text form, and responseXML is the response as an XML object. If the data was not in XML format, only the text property will be available.

JavaScript’s DOM methods are meant to work on XML, so you can use them with the responseXML property. For example, you can use the getElementsByTagName() method to extract data from XML.

The ajaxRequest Function

The ajaxRequest function handles all the steps necessary to create and send an XMLHttpRequest Object. First, it creates the XMLHttpRequest object. As noted earlier, this requires a different command for older browsers, and an error occurs if the wrong command executes, so try and catch are used to create the request. First, the standard method is used, and if it causes an error, the ActiveX method is tried. If that also causes an error, the ajaxreq variable is set to false to indicate that AJAX is not supported.

The ajaxResponse Function

The ajaxResponse function is used as the onreadystatechange event handler. This function first checks the readyState property for a value of 4. If it has a different value, the function returns without doing anything.

Next, it checks the status property for a value of 200, which indicates that the request was successful. Upon success, the ajaxResponse function runs the function stored in the ajaxCallback variable. Otherwise, it displays the error message in an alert box.

The HTML File

The HTML for this example, shown in Listing 16.2, is straightforward. It defines a simple form with an Answer field and a Submit button, along with some hooks for the script.

LISTING 16.2 The HTML file for the quiz example

Click here to view code image

<!DOCTYPE html>
<html lang="en">
   <head>
     <title>Ajax Quiz Test</title>
     <script type="text/javascript" src="ajax.js"></script>
     </head>
     <body>
        <h1>Ajax Quiz Example</h1>
        <form method="post" action="">
        <p><input type="button" value="Start the Quiz" id="startq" /></p>
        <p><strong>Question:</strong>
        <span id="question">[Press Button to Start Quiz]</span></p>
        <p><strong>Answer:</strong>
        <input type="text" name="answer" id="answer" /></p>
        <p><input type="button" value="Submit Answer" id="submit" /></p>
        </form>
    <script type="text/javascript" src="quiz.js"></script>
    </body>
</html>

This HTML file includes the following elements:

The <script> tag in the <head> section includes the AJAX library you created in the previous section from the ajax.js file.

The <script> tag in the <body> section includes the quiz.js file, which will contain the quiz script that you’ll create in a moment).

The <span id="question"> tag sets up a place for the question to be inserted by the script.

The text field with the id value "answer" is where the user will answer the question.

The button with the id value "submit" will submit an answer.

The button with the id value "startq" will start the quiz.

You can test the HTML document at this time by placing the file on your web server and accessing it via the URL, but the buttons won’t work until you add the XML and JavaScript files, which you’ll learn about in the next two sections.

The XML File

The XML file for the quiz is shown in Listing 16.3. I’ve filled it with a few JavaScript questions, but it could easily be adapted for another purpose.

LISTING 16.3 The XML file containing the quiz questions and answers

Click here to view code image

<?xml version="1.0" ?>
<questions>
     <q>What DOM object contains URL information for the window?</q>
     <a>location</a>
     <q>Which method of the document object finds the
         object for an element?</q>
     <a>getElementById</a>
     <q>If you declare a variable outside a function,
         is it global or local?</q>
     <a>global</a>
     <q>What is the formal standard for the JavaScript language called?</q>
     <a>ECMAScript</a>
</questions>

The <questions> tag encloses the entire file, and the questions and answer are each enclosed in <q> and <a> tags. Remember that this is XML, not HTML; these are not standard HTML tags but tags that were created for this example. Because this file will be used only by your script, it does not need to follow a standard format.

To use this file, save it as questions.xml in the same folder as the HTML document. It will be loaded by the script you create in the next section.

Of course, with a quiz this small, you could have made things easier by storing the questions and answers in a JavaScript array. But imagine a much larger quiz, with thousands of questions, or a server-side program that pulls questions from a database, or even a hundred different files with different quizzes to choose from, and you can see the benefit of using a separate XML file.

The JavaScript File

Because you have a separate library to handle the complexities of making an AJAX request and receiving the response, the script for this example only needs to deal with the action for the quiz itself. Listing 16.4 shows the JavaScript file for this example.

LISTING 16.4 The JavaScript file for the quiz example

Click here to view code image

// global variable qn is the current question number
var qn=0;

// load the questions from the XML file
function getQuestions() {
   obj=document.getElementById("question");
   obj.firstChild.nodeValue="(please wait)";
   ajaxCallback = nextQuestion;
   ajaxRequest("questions.xml");
}

// display the next question
function nextQuestion() {
   questions = ajaxreq.responseXML.getElementsByTagName("q");
   obj=document.getElementById("question");
   if (qn < questions.length) {
     q = questions[qn].firstChild.nodeValue;
     obj.firstChild.nodeValue=q;
    } else {
     obj.firstChild.nodeValue="(no more questions)";
    }
}

// check the user's answer
function checkAnswer() {
   answers = ajaxreq.responseXML.getElementsByTagName("a");
   a = answers[qn].firstChild.nodeValue;
   answerfield = document.getElementById("answer");
   if (a == answerfield.value) {
       alert("Correct!");
   }
   else {
      alert("Incorrect. The correct answer is: " + a);
    }
    qn = qn + 1;
    answerfield.value="";
    nextQuestion();
}

// Set up the event handlers for the buttons
obj=document.getElementById("startq");
obj.onclick=getQuestions;
ans=document.getElementById("submit");
ans.onclick=checkAnswer;

This script consists of the following:

The first var statement defines a global variable, qn, which will keep track of which question is currently displayed. It is initially set to 0 for the first question.

The getQuestions() function is called when the user clicks the Start Quiz button. This function uses the AJAX library to request the contents of the questions.xml file. It sets the ajaxCallback variable to the nextQuestion() function.

The nextQuestion() function is called when the AJAX request is complete. This function uses the getElementsByTagName() method on the responseXML property to find all the questions (<q> tags) and store them in the questions array.

The checkAnswer() function is called when the user submits an answer. It uses getElementsByTagName() to store the answers (<a> tags) in the answers array and then compares the answer for the current question with the user’s answer and displays an alert indicating whether it was right or wrong.

The script commands after this function set up two event handlers. One attaches the getQuestions() function to the Start Quiz button to set up the quiz; the other attaches the checkAnswer() function to the Submit button.

Testing the Quiz

To try this example, you’ll need all four files in the same folder: ajax.js (the AJAX library), quiz.js (the quiz functions), questions.xml (the questions), and the HTML document. All but the HTML document need to have the correct filenames in order to work correctly, since they are referred to by name within other files. Also remember that because it uses AJAX, this example requires a web server.

Figure 16.1 shows the quiz in action, after a question has been answered.

Quiz

1. What does the acronym AJAX stand for?

2. What is the name of the built-in JavaScript object used to communicate with a web server?

3. Why is it important for connections to be asynchronous?

4. What are two types of back-end data formats that often contain output results that are then used on the front end?

5. True or false: When using AJAX, to support Internet Explorer 5 and 6, you must create an ActiveX object rather than an XMLHttpRequest object.

6. Which JavaScript library currently has the greatest market share?

7. True or false: Requiring AJAX might compromise the accessibility of a site for disabled users.

8. Which method of the XMLHttpRequest object specifies the file to which data will be sent on the server?

9. Which readyState value indicates that a request is complete?

10. Why was it important to create the basic ajax.js library file shown in Listing 16.1?

Answers

1. Asynchronous JavaScript and XML

2. XMLHttpRequest

3. Asynchronous connections provide a better user experience because the browser can continue to display information while waiting for the server to respond to other user interactions, including multiple requests at one time.

4. XML and JSON

5. True

6. jQuery

7. True

8. open()

9. 4

10. Since these basic functions are used every time you want to make an AJAX request and get a response, you would be typing them over and over again unless you created one file that you could just refer to each time.