Ajax Presentation

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
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 Javascripts 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 Javas 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 objects functions:
GET METHOD: POST METHOD: xmlhttp.open(GET, url, true) xmlhttp.send() 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.

Ajax Presentation

Uploaded by

Copyright:

Available Formats

Ajax Presentation

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ajax Presentation

Uploaded by

Copyright:

Available Formats

What is AJAX ?

Data Exchange in AJAX

Dynamic web pages

Not many changes in Server side

Html Code of Example

ASP Code of Example

Creating the object

You might also like