AJAX/JavaScript csc667/867 Spring 2006 Ilmi Yoon

1. AJAX/JavaScriptcsc667/867Spring 2006Ilmi Yoon Slide Courtesy to ClearNova & degrave.com

2. AJAX for Rich Internet Applications

3. 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 http://www.degraeve.com/reference/simple-ajax-example.php • http://www.clearnova.com/ajax/index.html

4. From Wikipedia The Ajax technique uses a combination of: • XHTML (or HTML), CSS, for marking up and styling information. • The DOM accessed with a client-sidescripting language, especially ECMAScriptimplementations like JavaScript and JScript, to dynamically display and interact with the information presented. • 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. • 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.

5. Ajax: A New Approach to Web Applicationsby Jesse James Garrett • http://www.adaptivepath.com/publications/essays/archives/000385.php

9. Client Side I <script language="Javascript" type="text/javascript"> 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()); }

10. Client Side II 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; } </script> <h2>Simple Ajax Demo</h2> <blockquote> <form name="f1" action=""> <p>word: <input name="word" type="text" /> <input value="Go" type="button" onclick='JavaScript:xmlhttpPost("/cgi-bin/simple-ajax-example.cgi")' /></p> <div id="result"></div> </form> </blockquote>

11. Server Side 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 "<p>The secret word is <b>$secretword</b>

12. Another Example