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

AJAX/JavaScriptAJAX/JavaScriptcsc667/867csc667/867Spring 2006Spring 2006

Ilmi YoonIlmi Yoon

AJAX/JavaScriptAJAX/JavaScriptcsc667/867csc667/867Spring 2006Spring 2006

Ilmi YoonIlmi 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 http://www.degraeve.com/reference/simple-ajax-example.php

• http://www.clearnova.com/ajax/index.html

The Ajax technique uses a combination of:

• XHTML (or HTML), CSS, for marking up and styling information.

• 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.

• 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.

From Wikipedia

Ajax: A New Approach to Web Applications

by Jesse James Garrett • http://www.adaptivepath.com/

publications/essays/archives/000385.php

<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());}

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;}</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>

Client Side II

CGI ScriptThis 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>

Server Side

Another Example