What is AJAX Asynchronous Javascript and XML Not

Purpose of AJAX • Prevents unnecessary reloading of a page. • When we submit

Technologies Used • AJAX uses: – Javascript (for altering the page) – XML (for

Simple Processing • AJAX is based on Javascript, and the main functionality is to

Example • We want to input data into a textbox. • We want the

Example(2) • Another example: http: //www. w 3 schools. com/ajax_database. asp • Therefore, by

History of AJAX • Starts with web pages • Static web pages – Static

Alternative Technologies • Not a technology, but a combination of technologies. • Technologies with

Structure of System • Client/Server architecture • XMLHTTP object is used to make request

C/S Processes • Most of the time client requires two files – Html page:

Examination of Sample • General process will be explained on an example at http:

Html Code of Example <html><head> <script src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="selectcustomer. js"> </script></head><body> <form> Select a Customer: <select

Java. Script of Example function show. Customer(str) { var url="getcustomer. asp? sid=" + Math.

ASP Code of Example sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID=" sql=sql & request. querystring("q").

XMLHTTP Object • The object that is used to connect to the remote server

Creating the object • For IE 5. 5: obj. Xml. Http=new Active. XObject(“Microsoft. XMLHTTP”)

Sending information • After creating the object, we can send information to the web

Retrieving information • We get the returned value with the property “xml. Http. response.

Pros/Cons • Advantages: – Independent of server technology. – Apart from obtaining the XMLHTTP

Slides: 20

Download 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 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. w 3 schools. com/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. w 3 schools. com/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 Java. Script. – Java. Script: handles the business logic of the system • In Java. Script, 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. w 3 schools. com/ajax_database. asp. • In this example, one html page and one Java. Socket reside in Client side of the system while an ASP page resides in Server sides.

Html Code of Example <html><head> <script src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="selectcustomer. js"> </script></head><body> <form> Select a Customer: <select

Html Code of Example <html><head> <script src="selectcustomer. js"> </script></head><body> <form> Select a Customer: <select name="customers" onchange="show. Customer(this. value)"> <option value="ALFKI">Alfreds Futterkiste <option value="NORTS ">North/South <option value="WOLZA">Wolski Zajazd </select></form><p> <div id="txt. Hint"><b>Customer info will be listed here. </b></div> </p></body></html>

Java. Script of Example function show. Customer(str) { var url="getcustomer. asp? sid=" + Math. random() + "&q=" + str xml. Http=Get. Xml. Http. Object(state. Changed) xml. Http. open("GET", url , true) xml. Http. send(null) } function state. Changed() { if (xml. Http. ready. State==4 || xml. Http. ready. State=="complete"){ document. get. Element. By. Id("txt. Hint"). inner. HTML = xml. Http. response. Text } }

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. Move. Next 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: obj. Xml. Http=new Active. XObject(“Microsoft. XMLHTTP”) • For Mozilla: obj. Xml. Http=new XMLHttp. Request()

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: • 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 “On. Ready. State. Change” event handler will be called.

Retrieving information • We get the returned value with the property “xml. Http. response. Text”.

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.