Your SlideShare is downloading. ×
AJAX/JavaScript csc667/867 Spring 2006 Ilmi Yoon
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AJAX/JavaScript csc667/867 Spring 2006 Ilmi Yoon

949
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
949
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. AJAX/JavaScript csc667/867 Spring 2006 Ilmi 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. 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
  • 5. Ajax: A New Approach to Web Applications by Jesse James Garrett
    • http://www.adaptivepath.com/publications/essays/archives/000385.php
  • 6.  
  • 7.  
  • 8.  
  • 9. <script language=&quot;Javascript&quot; type=&quot;text/javascript&quot;> function xmlhttpPost(strURL) { var xmlHttpReq = false; var self = this; // Mozilla/Safari if (window.XMLHttpRequest) { self.xmlHttpReq = new XMLHttpRequest(); //self.xmlHttpReq.overrideMimeType(&quot;text/xml&quot;); } // IE else if (window.ActiveXObject) { self.xmlHttpReq = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } 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
  • 10. 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(&quot;result&quot;).innerHTML = str; } </script> <h2>Simple Ajax Demo</h2> <blockquote> <form name=&quot;f1&quot; action=&quot;&quot;> <p>word: <input name=&quot;word&quot; type=&quot;text&quot; /> <input value=&quot;Go&quot; type=&quot;button&quot; onclick='JavaScript:xmlhttpPost(&quot;/cgi-bin/simple-ajax-example.cgi&quot;)' /></p> <div id=&quot;result&quot;></div> </form> </blockquote> Client Side II
  • 11. 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 &quot;<p>The secret word is <b>$secretword</b> Server Side
  • 12. Another Example
  • 13.  
  • 14.  
  • 15.  

×