Transcript Introduction to AJAX

Introduction to AJAX
AJAX Keywords:
•JavaScript and XML
•Web browser technology
•Open web standards
•Browser and platform independent
•Better and faster Internet applications
•XML and HTTP Requests
Introduction to AJAX
• AJAX is an acronym for Asynchronous JavaScript And XML.
• AJAX is not a programming language. but simply a development
technique for creating interactive web applications.
• The technology uses JavaScript to send and receive data between a web
browser and a web server.
• The AJAX technique makes web pages more responsive by exchanging
data with a server behind the scenes, instead of reloading an entire web
page each time a user makes a change.
• With AJAX, web applications can be faster, more interactive, and more
user friendly.
• AJAX uses an XMLHttpRequest object to send data to a web server, and
XML is commonly used as the format for receiving server data, although
any format including and plain text can be used.
Introduction to AJAX
• Conventional HTML + JavaScript
– Functions of JavaScript:
• (Form) checking
• Event handling
• Dynamic presentation and/or content creation
– Where is the data on which dynamic creation is based
» Values of variables that are part of JavaScript code.
» Values of HTML/form elements
• AJAX: HTML + JavaScript + XML
– Dynamic presentation and/or content creation
• Where is the data on which dynamic creation is based
– Values of variables that are part of JavaScript code.
– Values of HTML/form elements
– Get from the server by the JavaScript code.
» Using standard HTTP Get/Post Request/Response protocol
– The returned data in XML
» Data only without presentation – JavaScript code has built in presentation
» Data + presentation with (inline CSS, XSLT, HTML …)
– Bottom line
• No data sent to the client browser more than once from the server
• One page with multiple server accesses (compared to one page one access)
• Extreme case: One AJAX page for interactions of the entire web application
How to AJAX
• Create XMLHttpRequest object
– IE
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP" )
– Mozilla
xmlHttp=new XMLHttpRequest()
• Define response handler function
function responseHandler() {
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
textResponse =xmlHttp.responseText ;
xmlResponse = xmlHttp.responseXML }
}
• Binding XMLHttpRequest handler function to XMLHttpRequest object
– IE
xmlHttp.onreadystatechange=responseHandler
– Mozilla
xmlHttp.onload=responseHandler
• Connect to the server
xmlHttp.open(method, url, asyncFlag, userid, password)
• Send request to the server
xmlHttp.send(requestMessageBody)
AJAX Application Example
• Online test
– Many multiple choice questions
– All questions are displayed on one page
– After the user answers one question, the correct answer and explanation about
why the user answer is wrong is shown on the page
– For all already-answered questions, their correct answers and explanations are
always shown on the page
• Pure sever-side solution using conventional web application
– For each question answer submission, the whole page with most of repeated data
sent to the browser
• Pure client-side solution using conventional JavaScript
– The user can read JavaScript source code to view what is correct answer
– Large amount of explanation data will be carried by the JavaScript code
• AJAX solution
– After the user answers a question, use XmlHttpRequest to ask the server to send
the correct answer and explanation.
– Display the correct answer and explanation received from the server
Software Engineering Challenges
• Software design can be very different from
conventional web applications
• Client-side design
– JavaScript as
• application controller
• (partial) presentation generator
• Server-side design
– XML data item generation instead of HTML page
generation.
– The server provide (small pieces of) data services to the
client.