Ajax

Introduction Traditional Web Application Model AJAX Web Application Model Is It New ? Flash vs. AJAX XML Http Objects Pros Cons

Asynchronous JavaScript And XML Ajax is combination of following web technologies HTML and CSS JavaScript and the DOM XML and the XMLHttpRequest object Became popular with Google applications

Not Really Hidden Frames IE5+, Mozilla 1.0+, Safari 1.2+, and Opera 7.6+ Some Code <frameset rows="100%,0" frameborder="0"> <frame name=" displayFrame" src=" display.htm" noresize=" noresize" /> <frame name=" hiddenFrame" src=" about:blank" noresize=" noresize" /> </frameset>

<p>Enter customer ID number to retrieve information:</p> <p>Customer ID: <input type=" text" id=" txtCustomerId" value="" /></p> <p><input type=" button" value=" Get Customer Info" onclick=" requestCustomerInfo()" /></p> <div id=" divCustomerInfo"></div>

function requestCustomerInfo() { var sId = document.getElementById("txtCustomerId").value; top.frames["hiddenFrame"].location = "getcustomerdata.aspx?id=" + sId; }

function displayCustomerInfo(sText) { var divCustomerInfo = document.getElementById("divCustomerInfo"); divCustomerInfo.innerHTML = sText; }

<html> <head> <title>Get Customer Data</title> <% //asp.net code %> </head> <body> <div id=" divInfoToReturn"> <% Response.write(sInfo); ?> </div> </body> </html>

window.onload = function () { var divInfoToReturn = document.getElementById("divInfoToReturn"); top.frames["displayFrame"].displayCustomerInfo(divInfoToReturn.innerHTML); };

Pros Maintains Browser History Cons If the hidden frame page failed to load, there is no notification to the user that a problem has occurred; the main page will continue to wait until the appropriate JavaScript function is called

No plug-in for AJAX Flash development tools cost money Flash typically has slower page load time Flash can work on older browsers ActionScript doesn't have a cross browser issues Flash can access other domains if there is a crossdomain.xml file

XMLHttpRequest A JavaScript Class that lets you make asynchronous HTTP requests from JavaScript Make an HTTP request from a JavaScript event A call back JavaScript function is invoked at each state of the HTTP request and response

XMLHttpRequest Properties onreadystatechange - call back function for state changes Ready State - the current state of the HTTP call Response Text - the text result of the request Response XML - DOM xml object from the request Status - HTTP status code of the response Status Text - HTTP status text

function disable() { var btnSignUp = document.getElementById("Button1"); btnSignUp.disabled = true; }

function validateField(txtField) { var url= "working.aspx"; url=url+"?username=" url=url+ txtField.value; var oXmlHttp = createXMLHttp(); oXmlHttp.open("get", url, true);

oXmlHttp.onreadystatechange = function () { if (oXmlHttp.readyState == 4) { if (oXmlHttp.status == 200) { var arrInfo = oXmlHttp.responseText.split("||"); var Error = document.getElementById(txtField.id + "err"); var btnSignUp = document.getElementById("Button1"); if (!eval(arrInfo[0])) { Error.innerHTML = "User Alredy Exists"; Error.style.display = "block"; txtField.valid = false; btnSignUp.disabled = true; } else { Error.style.display = "none"; //imgError.style.display = "none"; txtField.valid = true; btnSignUp.disabled = false; }

//document.getElementById("Button1").Enable=false; } else { alert("An error occurred while trying to contact the server."); } } }; oXmlHttp.send(null); }

Google helped popularize and legitimize by implementing it in GMail Increase Usability of Web Applications Rich Internet Applications without Flash Save Bandwidth Download only data you need Faster interfaces (sometimes)

Breaks back button support URL's not change as state changes Cross Browser Issues can be a pain JavaScript may tax older machines CPU Can't access domains other than the calling domain May be disabled (for security reasons) or not available on some browsers Debugging is difficult

Ajax

More Related Content

What's hot (19)

Viewers also liked (7)

Similar to Ajax (20)

Recently uploaded (20)

Ajax