AJAX/JavaScript csc667/867 Spring 2006 Ilmi Yoon Slide Courtesy to ClearNova & degrave.com

AJAX for Rich Internet Applications

AJAX Definition Ajax is the method of using Javascript, DHTML and the XMLHttpRequest object to perform a GET or POST and return a result without reloading the HTML page. Below is a very simple Ajax example that calls a CGI script that prints out the word sent to the CGI script and the remote user's IP address. Check e-ajax-example.php e-ajax-example.php

The Ajax technique uses a combination of: XHTML (or HTML), CSS, for marking up and styling information.XHTMLHTMLCSS The DOM accessed with a client-side scripting language, especially ECMAScript implementations like JavaScript and JScript, to dynamically display and interact with the information presented.DOMclient-sidescripting languageECMAScriptimplementationsJavaScriptJScript The XMLHttpRequest object to exchange data asynchronously with the web server. In some Ajax frameworks and in certain situations, an IFrame object is used instead of the XMLHttpRequest object to exchange data with the web server.XMLHttpRequest asynchronously frameworksIFrame XML is commonly used as the format for transferring data back from the server, although any format will work, including preformatted HTML, plain text, JSON and even EBML.XMLformatJSONEBML From Wikipedia

Ajax: A New Approach to Web Applications by Jesse James GarrettJesse James Garrett /essays/archives/ php

function xmlhttpPost(strURL) { var xmlHttpReq = false; var self = this; // Mozilla/Safari if (window.XMLHttpRequest) { self.xmlHttpReq = new XMLHttpRequest(); //self.xmlHttpReq.overrideMimeType("text/xml"); } // IE else if (window.ActiveXObject) { self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } self.xmlHttpReq.open('POST', strURL, true); self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form- urlencoded'); self.xmlHttpReq.onreadystatechange = function() { if (self.xmlHttpReq.readyState == 4) { updatepage(self.xmlHttpReq.responseText); } self.xmlHttpReq.send(getquerystring()); } Client Side I

function getquerystring() { var form = document.forms['f1']; var word = form.word.value; qstr = 'w=' + escape(word); // NOTE: no '?' before querystring return qstr; } function updatepage(str){ document.getElementById("result").innerHTML = str; } Simple Ajax Demo word: Client Side II

CGI Script This is the CGI script that the JavaScript in the HTML page calls. This CGI script could just as easily be written in Python, Ruby, PHP etc. #!/usr/bin/perl -w use CGI; $query = new CGI; $secretword = $query->param('w'); $remotehost = $query->remote_host(); print $query->header; print " The secret word is $secretword Server Side

Another Example