Scribd
Upload
19 views6 pages

AJAX

AJAX allows web pages to be more interactive by exchanging data with a server behind the scenes without reloading the entire page. It uses JavaScript and XMLHttpRequest objects to send and receive data from a web server asynchronously in the background. This improves responsiveness and allows web applications to retrieve data from the server on demand.

Uploaded by

Karthick Sundaram
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
19 views6 pages

AJAX

AJAX allows web pages to be more interactive by exchanging data with a server behind the scenes without reloading the entire page. It uses JavaScript and XMLHttpRequest objects to send and receive data from a web server asynchronously in the background. This improves responsiveness and allows web applications to retrieve data from the server on demand.

Uploaded by

Karthick Sundaram
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 6

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.

You might also like