Scribd
Upload
45 views20 pages

AJAX

AJAX is a technique for creating faster and more interactive web pages. It uses a combination of technologies including JavaScript, XML, and server-side technologies. AJAX allows updating parts of a web page asynchronously by exchanging data with a web server behind the scenes, without reloading the entire page. This improves usability and performance.

Uploaded by

binzbinz
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
45 views20 pages

AJAX

AJAX is a technique for creating faster and more interactive web pages. It uses a combination of technologies including JavaScript, XML, and server-side technologies. AJAX allows updating parts of a web page asynchronously by exchanging data with a web server behind the scenes, without reloading the entire page. This improves usability and performance.

Uploaded by

binzbinz
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/ 20

What is AJAX ?

• Asynchronous Javascript and XML.


• Not a stand-alone language or technology.
• It is a technique that combines a set of
known technologies in order to create faster
and more user friendly web pages.
• It is a client side technology.

THETOPPERSWAY.COM
Purpose of AJAX
• Prevents unnecessary reloading of a page.
• When we submit a form, although most of the
page remains the same, whole page is reloaded
from the server.
• This causes very long waiting times and waste of
bandwidth.
• AJAX aims at loading only the necessary
innformation, and making only the necessary
changes on the current page without reloading the
whole page.
Technologies Used
• AJAX uses:
– Javascript (for altering the page)
– XML (for information exchange)
– ASP or JSP (server side)
Simple Processing
• AJAX is based on Javascript, and the main
functionality is to access the web server inside the
Javascript code.
• We access to the server using special objects; we
send data and retrieve data.
• When user initiates an event, a javascript function
is called which accesses server using the objects.
• The received information is shown to the user by
means of the Javascript’s functions.
Example
• We want to input data into a textbox.
• We want the textbox to have intellisense
property; guess entries according to input.
• http://www.w3schools.com/ajax/ajax_example.asp
• Only the ‘span’ part of the html code is changed.
Data Exchange in AJAX
• In AJAX:
Example(2)
• Another example:
http://www.w3schools.com/ajax/ajax_database.asp
• Therefore, by using AJAX, unnecessary
exchange of data is prevented, web pages
become:
– More interactive
– Faster
– More user friendly
History of AJAX
• Starts with web pages
• Static web pages
– Static html page is loaded
– No interaction with user
• Dynamic web pages
– Html page is generated dynamically
– Interaction with user
– Becomes slower as functionality increases
– Speed becomes untolerable, so AJAX has been
born
Alternative Technologies
• Not a technology, but a combination of
technologies.
• Technologies with similar tasks:
URLConnection, ASP and JSP
• Other technologies returns whole page and
client loads it.
• Only necessary data is returned and that part
is updated
Structure of System
• Client/Server architecture
• XMLHTTP object is used to make request
and get response in Client side
• Request can be done via “GET” or “POST”
methods
– “GET”: parameters are attached to the url used
to connect.
– “POST”: parameters are sent as parameters to a
function
• Not many changes in Server side
– Response is a combination of xml tags
C/S Processes
• Most of the time client requires two files
– Html page: handles GUI and calls a function of
JavaScript.
– JavaScript: handles the business logic of the
system
• In JavaScript, a request is sent to client and
response is taken from server via XMLHTTP
object
• Response of server should be returned in xml
file structure
Examination of Sample

• General process will be explained on an


example at http://www.w3schools.com/ajax/ajax_database.asp.
• In this example, one html page and one
JavaSocket reside in Client side of the
system while an ASP page resides in Server
sides.
Html Code of Example
<html><head>
<script src="selectcustomer.js">
</script></head><body>
<form> Select a Customer:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste
<option value="NORTS ">North/South
<option value="WOLZA">Wolski Zajazd
</select></form><p>
<div id="txtHint"><b>Customer info will be listed here.</b></div>
</p></body></html>
JavaScript of Example
function showCustomer(str) {
var url="getcustomer.asp?sid=" + Math.random() + "&q=" + str
xmlHttp=GetXmlHttpObject(stateChanged)
xmlHttp.open("GET", url , true)
xmlHttp.send(null)
}
function stateChanged() {
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("txtHint").innerHTML = \
xmlHttp.responseText
}
}
ASP Code of Example
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & request.querystring("q")
............ Open Connection to the DB
rs.Open sql, conn

response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td> & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
XMLHTTP Object
• The object that is used to connect to the
remote server is called XMLHTTP.
• It resembles the Java’s URL object that is
used to access a specific URL and get the
contents.
Creating the object
• For IE 5.5:
objXmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”)
• For Mozilla:
objXmlHttp=new XMLHttpRequest()
Sending information
• After creating the object, we can send information to the
web server and get the answer using this object’s
functions:
• GET METHOD: xmlhttp.open(“GET”, url, true)
xmlhttp.send()
• POST METHOD: xmlhttp.open("POST", url, true)
xmlhttp.send(“date=11-11-2006&name=Ali")

• Third argument tells that data will be processes asynchronously. When


server responds, the “OnReadyStateChange” event handler will be
called.
Retrieving information
• We get the returned value with the property
“xmlHttp.responseText”.
Pros/Cons
• Advantages:
– Independent of server technology.
– Apart from obtaining the XMLHTTP object, all processing is same
for all browser types, because Javascript is used.
– Permits the development of faster and more interactive web
applications.
• Disadvantages:
– The back button problem. People think that when they press back
button, they will return to the last change they made, but in AJAX
this doesn not hold.
– Possible network latency problems. People should be given
feedback about the processing.
– Does not run on all browsers.

THETOPPERSWAY.COM

You might also like