HOW AJAX WORKS? <ul><li>When user first visits the page, the Ajax engine is initialized and loaded. From that point of time user interacts with Ajax engine to interact with the web server. The Ajax engine operates asynchronously while sending the request to the server and receiving the response from server. Ajax life cycle within the web browser can be divided into following stages: </li></ul><ul><li>User Visit to the page : </li></ul><ul><li>User visits the URL by typing URL in browser or clicking a link from some other page. </li></ul><ul><li>Initialization of Ajax engine : </li></ul><ul><li>When the page is initially loaded, the Ajax engine is also initialized. The Ajax engine can also be set to continuously refresh the page content without refreshing the whole page. </li></ul><ul><li>Event Processing Loop: </li></ul><ul><li>Browser event may instruct the Ajax engine to send request to server and receive the response data </li></ul>
DATA EXCHANGE IN AJAX <ul><li>XML : </li></ul><ul><li>In AJAX, data is exchanged with the help of XML files, there are many alternate techniques are also available like CSV, JSON etc. Because of the simplicity of XML, it is becoming the new standard of exchanging data between server and browser. XML is very easy to reformat, reuse. </li></ul><ul><li>DOM : </li></ul><ul><li>The DOM (Document Object Model) is the object oriented representation of XML & HTML documents, and provides an API for changing the content, structure, and style. The DOM represents HTML & XML documents as object hierarchy, which is easy to parse by XML tools. </li></ul><ul><li>CSS : </li></ul><ul><li>CSS (Cascading Style Sheet) is used in web site for designing purpose, we can use CSS in almost all aspects of the way the web pages look, size, color, width, length etc. of text box, input area,..etc. that means every attribute of every user interface. In AJAX it is very useful to use CSS, you can implement CSS as color changing on validation checking in a registration form and other. </li></ul>
XML HTTP REQUEST OBJECT <ul><li>As the use of XML and web services is increasing day by day, it is good to connect an HTML page with XML, with the help of that we can get interim updates so easily without reloading the page. It is possible due to the XMLHttpRequest object, which is responsible for retrieving and submitting the XML data directly from the client side. It relies on Document Object Model (DOM) to convert the retrieved XML data into HTML. </li></ul><ul><li>XMLHttpRequest object facilitates the web developer a lot because with the help of this object you can update the page with new data without reloading the page, communicate with server in the background, request and receive data from the web server. </li></ul>
XML HTTP REQUEST OBJECT (Contd...) CREATING XML HTTP REQUEST OBJECT : We can create an instance of the XMLHttpRequest in most of the modern popular browsers, and in the old versions of the browsers we need to create an object of ActiveXObject. var xmlobj=new XMLHttpRequest (); var activeobj=new ActiveXObject("Microsoft.XMLHTTP"); We need to create an XMLHttpRequest, after that we will use few important functions like: (1) onreadystatechange property : After submitting the request to the server, we need to store the response from the server. onreadystatechange property stores the response from the function which process the server.
XML HTTP REQUEST OBJECT (Contd...) (2) Readystate property : eadystate property holds the state of the server response, every time readystate property change , onreadystatechange function executes. Possible values and their meaning are given below: STATE REQUEST 0 Not initialized 1 Has been set up 2 Has been sent 3 In process 4 Is complete
XML HTTP REQUEST OBJECT (Contd...) (3) Response text property: The data sent back from the server is stored and retrieved later with the help of responseText property.