Ajax

AJAX AJAX, or Asynchronous JavaScript and XML, is an integrated method of web development that takes advantage of client-side technology of an individual’s computer system allowing the web developer to create interactive websites. What does it mean to be Asynchronous' Asynchronous communication is where the data can start to be processed before all information is completely received. This helps prevent idle processors. With AJAX, a web site does not have to reload the whole page when retrieving new information, updating content, or opening a new page. Instead, the scripting allows for just the updated content to change while the elements that are unchanged on the page stay and are not reloaded or processed. This cuts down on download time of more complex sites and the processing required to handle the graphical load. Basically, AJAX technology has not come to refer to a large range of web applications that allows the client to communicate with the server in the background while not changing the current page of a website. Jesse James Garret tells us that AJAX technology is an incorporation of HTML (or XHTML with CSS to handle style), Document Object Model (DOM) for interaction with data and dynamic display, XML for the exchange of data (XSLT for its manipulation), XMLHttpRequest object (also known as ActiveX by some browsers) for the asynchronous communication of the data and JavaScript coding to bring all of these technologies together to work properly (w3schools). In essence AJAX is a group of various technologies controlled usually by JavaScript coding, to allow the asynchronous communication of the client and server. AJAX is a server side technology while JavaScript is client side programming language. AJAX uses the concept of sending XMLHttpRequest. Depending on the browser the coding used to send request to the server can vary. Here is a sample of coding that might be used to enable a pop up of a product on a store’s website. The JavaScript coding is using AJAX technology to create anXHTMLRequest that is used to establish an asynchronous connection to the server. bpui.alone.showPopupInternal=function(popupx, productId) { bpui.alone.req=bpui.alone.initRequest(); ... url="../PopupServlet'productId=" + escape(productId); bpui.alone.req.onreadystatechange = bpui.alone.ajaxReturnFunction; bpui.alone.req.open("GET", url, true); bpui.alone.req.send(null); } ... bpui.alone.initRequest=function() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } } Here the JavaScript coding uses the callback function to process data in that asynchronous request. The callback function uses various methods of the DOM API like getElementByTagName to interpret data from the XML response. The DOM representation of the site is updated by using the innerHTML properties. bpui.alone.ajaxReturnFunction=function() { // statically setup popup for simple case var componentId="pop0"; // checks the return of the call to make that sure it is valid if (bpui.alone.req.readyState == 4) { if (bpui.alone.req.status == 200) { // get the results and replace the DOM elements var resultx=bpui.alone.req.responseXML.getElementsByTagName("response")[0]; document.getElementById(componentId + "_name").innerHTML= resultx.getElementsByTagName("name")[0].childNodes[0].nodeValue; document.getElementById(componentId + "_ID").innerHTML= resultx.getElementsByTagName("IS")[0].childNodes[0].nodeValue;; // show popup with the newly populated information document.getElementById(componentId).style.visibility='visible'; } else if (bpui.alone.req.status == 204){ alert("204 returned from AJAX call"); } } } There are several security aspects to look at with AJAX technology. One of the bigger ones is untrusted information sources. Information can be fetched from blogs, mashups, and news feeds that are not validated and therefore have cross-site exploitation. This validation confusion allows holes for viruses and worms to make their way into a site. This is really popular with ad campaigns that a reputable site may use an ad service to place ads on their site that are fetched from an outside source. The source can be infected with virus and spyware thus transferring it to the clean site and infecting its users (Shah, 2006). DHTML One of the most popular roles of JavaScript is in Dynamic HyperText Markup Language (or DHTML) where it uses the JavaScript coding to manipulate the CSS styles of certain HTML elements. Because JavaScript is supported by most major browsers it has become the chosen scripting language to create DHTML. DHTML may be similar to AJAX in the way that is uses server side and client side technologies to call functions that can change HTML DOM objects. There are so many uses of DHTML in a website. Some of the more popular features that the users might see would be mouse rollovers and drop down navigation menus. This animation process that happens after the page has loaded is DHTML created typically with JavaScript. Another great feature that DHTML can provide for a site is a timer that will automatically update the page with all the latest new feeds that it has. DHTML allows for website animation and automation with simple use of JavaScript and not having to have outside plug in sources or use tremendous resources such as a Flash based web site (w3schools). References (2011) W3 Schools. Retrieved February 20, 2011 from http://www.w3schools.com/ Shah, Shreeraj, (Friday, 10 November 2006) Top 10 Ajax Security Holes and Driving Factors.Retrieved February 20, 2011 from http://www.net-security.org/article.php'id=956