AJAX is a web development technique that uses JavaScript and XML to make web pages feel more responsive by exchanging data with the server asynchronously in the background without reloading the entire page. It allows updating parts of a web page by retrieving data from the server and rendering it without disrupting the user experience. Some key technologies used in AJAX are XHTML, CSS, DOM, XML, and JavaScript. AJAX provides benefits like faster interactions and response times, real-time data validation, and reduced bandwidth usage compared to traditional page reloads.
5. Classic Web Application Architecture user interface Web server Server-side logic and data Browser client Server-side system HTTP request HTML + CSS data
6. AJAX Architecture user interface Web and/or XML server Server-side logic and data Brower client Server-side system HTTP request XML data AJAX engine JavaScript call HTML + CSS data
7.
8. Implementation of AJAX <html> <body> <form name = “myForm”> Name:<input type=“text”name=“username”/> Time:<input type=“text” name=“time”/> </form> </body> </html>
9.
10. Properties of XMLHttpRequest OnReadyStateChange ReadyState ResponseText stores your function that will process the response from a server. holds the status of the server's response. It is always changing State Description 0 The request is not initialized 1 The request has been set up 2 The request has been sent 3 The request is in process 4 The request is complete data sent back from the server can be retrieved from this property
11. Updated Ajax Application <html> <body> <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer 6.0+
12. try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { // Internet Explorer 5.5+ try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } } // end of outer catch