An Introduction to Ajax (with JSON) - JavaScript by Example - page 815

EXPLANATION ( CONTINUED )

3 This function is where the Ajax communication between the browser and server

will happen. It is called when the onKeyUp event handler is triggered; that is,
when the user presses a key and releases it ( line 12).

4 This function will be called every time the user releases a key. It is responsible for

all the Ajax activity, once an XMLHttpRequest object has been created.

5 The callback function (also called inline function) monitors the state of the server.

When the onreadystate event handler sees that the server has changed state, the
callback function is executed.

6 If the readyState property is 4, the HTTP request has completed.

7 If the HTTP server status is 200 OK, then the server was successful and we are

ready to view the response.

8 The getElementById() method will return a reference to the div container name

message (line 13). The ajaxRequest.responseText property contains the ASCII text
that was returned. The value of the innerHTML property contains that returned
text that will be displayed in the <div> container.

9 The getElementById() method will get the name that the user typed in the text

field and assign it to a variable called yourname .

10 The request object's open() method initializes the XMLHttpRequest object. The request

will be sent as an HTTP GET request to start a server-side PHP program on the localhost
(see Example 18.5). The parameters are two URL encoded key/value pairs: The first is
the name of the user (name=yourname) and the second is a random number value.

11 The send() method is responsible for sending the request to the server. When us-

ing the GET method, the argument is set to null .

12 The HTML form has one input device, a textbox. After the user types a character

in the box and releases the key, the onKeyUp event handler will be triggered and
call the goAjax() function.

13 When the server responds, it will send back text that will be displayed in this div

container. The div container will be styled by the class divStyle defined in the ex-
ternal .css file shown next.

The CSS File—“ajaxStyle.css”

EXAMPLE 18.3

body{background-color:aliceblue;}
.divStyle { /* class for the <div> container
background-color:aliceblue;
margin-left:20%
margin-right:20%
border-style:solid;
color:white;
font-size:150%

}