send(null);
}
(annotation)<#1 IE uses an ActiveX control, everyone else uses a built in object. (IE was the first implementation though)>
(annotation)<#2 Send the request back to the server>
(annotation)<#3 Called by browser when the request object changes state>
(annotation)<#4 If the readyState is ???success??? (4) then update the place holder div with the returned text>
The magic of updating the HTML page with the new data is done by selecting an element on the page
using document.getElementById() and then changing its attributes. In this case we change it entirely by
replacing its innerHTML property with the server??™s response. We could equally have changed its CSS style or
build new child HTML elements such as new li elements, based on the data received from the server.
You should now have an appreciation of what Ajax is and how the various components fit together. This
example is necessarily simplistic as this book is not about Ajax per-se. To really understand what??™s going on
and the full possibilities available with Ajax, I recommend that you take a look at Ajax in Action by Dave
Crane and Eric Pascarello.
The JavaScript code I have presented here looks nice and simple and breaks pretty much every rule of
defensive programming; there is no error checking at all! Other than the fact that it would clutter up the
example, it is hard to get it right for all the browsers out there.
Pages:
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129