suga ajax training
TRANSCRIPT
SUGA Ajax Knowledge Base
SUGA Consulting Services
Office No.26, TNHB Complex, 180, Luz Church Road, Mylapore, Chennai – 600004
Mob No: 9840114766
Program StructureSNo Topic Duration
1 Introduction to HTML and Javascript 1hr
2 Introduction to WEB 2.0 2hr
3 XML Request and Response 2hr
4 Response types (XML, JSON, CSV) 1hr
5 Reverse AJAX 1hr
6 Lab Exercises 2hr
Introduction to Web 2.0“Web 2.0 is the business revolution in the
computer industry caused by the move to the Internet as a platform, and an attempt to
understand the rules for success on that new platform.”
- Tim O’Reilly
Traditional Media
Social Media
Web 2.0 ConceptsBloggingForumsWikisSocial NetworksBookmarkingFolksonomy =
TaggingE-commerce
SyndicationInstant MessagingMashupRIACollaborative
Software
AJAX Runtime Architecture
Ajax Runtime Architecture
Ajax Runtime ArchitectureIn AJAX-based applications, partial screen updates replace HTML’s “click-wait-
refresh” asynchronous communication replaces synchronous request/response. This decouples user interaction from Server interaction while updating only those user interface elements that contain new information.
19 December 2008EuropeanPWN AmsterdamClara Ko
XML Request and ResponseThe XMLHttpRequest object is used to
exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
19 December 2008EuropeanPWN AmsterdamClara Ko
XML Request and Response<!DOCTYPE html><html><head><script>function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
19 December 2008EuropeanPWN AmsterdamClara Ko
XML Request and Responsexmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();}</script></head><body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div><button type="button" onclick="loadXMLDoc()">Change Content</button>
</body></html>
19 December 2008EuropeanPWN AmsterdamClara Ko
XML Request and ResponseTo send a request to a server, we use the open() and send()
methods of the XMLHttpRequest object:xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();GET is simpler and faster than POST, and can be used in
most cases.However, always use POST requests when:A cached file is not an option (update a file or database on
the server)Sending a large amount of data to the server (POST has no
size limitations)Sending user input (which can contain unknown
characters), POST is more robust and secure than GET
19 December 2008EuropeanPWN AmsterdamClara Ko
XML Request and ResponseThe responseText PropertyIf the response from the server is not
XML, use the responseText property.
19 December 2008EuropeanPWN AmsterdamClara Ko
Ajax Events SNo Property Description
1 onreadystatechange
Stores a function (or the name of a function) to be called automatically each time the readyState property changes
2 readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4: 0: request not initialized 1: server connection established2: request received 3: processing request 4: request finished and response is ready
3 status 200: "OK"404: Page not found
19 December 2008EuropeanPWN AmsterdamClara Ko
Ajax Events xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 &&
xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
} }
19 December 2008EuropeanPWN AmsterdamClara Ko
Reverse AjaxDWR – Direct Web RemotingPolling
Checking with the server every 3 secondsComet
Server to start answering the browser's request for information very slowly, and to continue answering on a schedule dictated by the server
PiggyBackthe server, having an update to send, waits
for the next time the browser makes a connection and then sends it's update along with the response that the browser was expecting.
