Page 284 - Asterisk™: The Future of Telephony

The getElementById() method reads the value of the username and the password fields.
This code then gets an XMLHttpRequest object, which it uses to send these values back
to the server. Note that the kind of object you need depends on whether your users are
using Internet Explorer 7, 5, or Mozilla/Firefox. It’s fairly easy to write code to handle
all of these situations, or to use a library like Prototype to handle platform independence
for you. The username and password are encoded in a URL and sent to the server. The
call to xmlHttp.onreadystatechange registers a handler to process the result that the
server returns to us.
This code only deals with making the XMLHttp request, and it tells the browser to call
the dosomething() function when there is a response from the server. Here’s a
dosomething() function that handles this response:
<script language="javascript" type="text/javascript">
function dosomething() {
if (xmlHttp.readyState == 4) {
var login_response = xmlHttp.responseText;
}
}
</script>

Make sure that each XMLHttp step has completed (with either success
or failure) before performing the next one.

This function is called whenever there’s a change in the state of the HTTP request. The
if statement saves the response only if the request’s readyState is 4, which means that
the request has completed. The JavaScript variable login_response now contains the
response of the login page.
Note that this is very far from being production-ready code. In particular, the simplistic
username and password handling is appropriate for testing, but would be a serious
security problem in a production system—even if the application is used only on a
private network. To build more robust and secure password handling, use the chal-
lenge/response system presented earlier. If you want to learn more about writing Ajax
web applications, we recommend Head Rush Ajax by Brett McLaughlin (O’Reilly).

The Prototype framework
Prototype (http://prototypejs.org) is a JavaScript framework released under an MIT-style
license. Prototype can make your job extremely easy while developing an Ajax appli-
cation. It provides many ways to make your code shorter and clearer. For example, in
the submitform function, the call to document.getElementById() can be replaced by the
$() function. Likewise, the call to value to get the DOM element’s content can be
replaced with a call to $F(). Thus, document.getElementById("username").value be-
comes simply $F('username'); the result is code that’s much simpler and more readable.

256 | Chapter 11: The Asterisk GUI Framework