Page 283 - Asterisk™: The Future of Telephony

Back on the browser, the result is handled by a callback: whatever the server returns
can be stored and used to update the page being displayed. For Internet Explorer 5 or
later, the XMLHttp ActiveX object serves the same purpose.

Form processing in a traditional web application
HTML forms are usually submitted by using a submit button (type=submit). When the
user clicks the submit button, processing stops, and doesn’t continue until the server
returns a new page:
<FORM action="login.php" method="POST">
<input type=text name="username">
<input type=password name="password">
<input type=submit>
</FORM>
Before going any further with Ajax or JavaScript, let’s take a look at how a traditional
web application works. Traditional web applications use HTML’s <FORM> element to
define a form in which all of the parameters a user needs to send to the server are defined.
In addition the action="login.php" informs the browser where to send all of these
variables. The method="POST" tells the browser how to send these variables to the server.

Form processing in an Ajax application
An Ajax application uses JavaScript to send the contents of a form to the server. If you
have made the request asynchronously, your JavaScript code doesn’t wait for the server
to respond. This also means that you can let the users continue to interact with the
page, even though a request may be taking place in the background. This can be dan-
gerous and, thus, you may want to restrict certain actions until a request has completed.
The browser, by default, gives no visual indication that a request is being made in the
background. It is your responsibility to inform the user of the progress of a request.
Here’s the code for submitting the contents of the username and password fields via
Ajax:
<script language="javascript" type="text/javascript">
function submitform(){
var uname = document.getElementById("username").value;
var pwd = document.getElementById("password").value;
// xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // IE 7
// xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE 5
xmlHttp = new XMLHttpRequest(); // Mozilla or Firefox

var url = "/rawman?action=login&username=" + escape(uname) + "&secret=" + escape(pwd);

xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = dosomething;
// dosomething() would be another JavaScript function
xmlHttp.send(null);
}
</script>

Developing for the Asterisk GUI | 255