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.

What is AJAX ?

  • Upload
    karsen

  • View
    22

  • Download
    0

Embed Size (px)

DESCRIPTION

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. Purpose of AJAX. - PowerPoint PPT Presentation

Citation preview

Page 1: What is AJAX ?

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.

Page 2: What is AJAX ?

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.

Page 3: What is AJAX ?

Technologies Used

• AJAX uses:– Javascript (for altering the page)– XML (for information exchange)– ASP or JSP (server side)

Page 4: What is AJAX ?

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.

Page 5: What is AJAX ?

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.

Page 6: What is AJAX ?

Data Exchange in AJAX

• In AJAX:

Page 7: What is 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

Page 8: What is AJAX ?

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

Page 9: What is AJAX ?

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

Page 10: What is AJAX ?

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

Page 11: What is AJAX ?

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

• Only requested data is returned

Page 12: What is AJAX ?

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.

Page 13: What is AJAX ?

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>

Page 14: What is AJAX ?

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

}

}

Page 15: What is AJAX ?

ASP Code of Examplesql="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>")

Page 16: What is AJAX ?

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.

Page 17: What is AJAX ?

Creating the object

• For IE 5.5:

objXmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”)

• For Mozilla:

objXmlHttp=new XMLHttpRequest()

Page 18: What is AJAX ?

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.

Page 19: What is AJAX ?

Retrieving information

• We get the returned value with the property “xmlHttp.responseText”.

Page 20: What is AJAX ?

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.