O Create Custom Dynamic Web Applications a Programmer Must Utilize Ajax. Ajax Is a Group

Ajax for Dynamic Web Development Gregory McChesney, Texas Tech-Computer Science

ABSTRACT These applications are usually slower because they require the server to process each request. O create custom dynamic web applications Most web applications require the entire Ta programmer must utilize Ajax. Ajax is a webpage to be processed at once. This means group of technologies that provide asynchronous when a user clicks on a link in a webpage the two-way communication between a server and whole page will be changed. With Ajax a user the web browser. Asynchronous communication can click on a link and have a section of the page allows the user to continue to browse the web recreated for them without changing the whole page as sections of it are being loaded. This also page. [6] This removes a portion of the load from allows the page to display new and updated the server because it only has to parse a section of the page rather than the whole page. information with out refreshing the page. [1] Ajax development has exploded in recent years as companies have found customers prefer pages developed with it. ESPN uses Ajax extensively ORGINS OF AJAX on their website to refresh scores and provide news headlines without the user having to update Even though Ajax wasn’t formally defined until February of 2005 the first Ajax type web the page. [2] Creating an Ajax request requires three application was released in 2000 by Microsoft sections of code, the first section is writing in for use with Outlook. Microsoft was looking to HTML, the second writing in JavaScript and the create a web based version of its popular email client that did not require the page to be third is a server script writing PHP. [3] Each section of code provides a different portion of refreshed to notify the user a new email had the Ajax request, if the request is missing any of arrived. [3] Microsoft created the XMLHttpRequest object which became the basis the sections it will fail. [3] While Ajax is good for many scenarios a programmer must carefully for Ajax traffic. [7] The XMLHttpRequest allows examine its use to prevent problems from a client computer to call a webpage in the arising. background without interfering with the user. [4] This type of transfer is called asynchronous because it passively waits for the server to INTRODUCTION respond. This is the first component in Ajax and is usually called thru JavaScript. [7] The technologies powering the internet are Using the XMLHttpRequest data can be changing at an accelerated rate; one of these gathered from the server. To update the webpage technologies is Ajax. Ajax or Asynchronous to show this new data Dynamic HTML must be JavaScript and XML are a group of technologies used. Dynamic HTML uses CSS, HTML and that provide a rich web development platform. JavaScript to rewrite sections of the webpage Jesse James Garrett introduced the term Ajax in code at the browser instead of regenerating the February of 2005 to describe a new method of page on the server. [8] programming using readily available The term Ajax became widely known after technologies. [5] Ajax requires four distinct the release of Google Maps and Google Suggest. components to provide a rich user interface. The [5] These products showed flexibility never before components are JavaScript, XML, HTML, and seen in a web application and thus spurred CSS. [5] developers to make new and innovative Ajax is unique because it allows for the applications. creation of desktop like applications in a web environment. Typically a “desktop” application AJAX EXAMPLE is very responsive and can have sections of the program change without refreshing the entire A trivial example of Ajax is a name retrieval screen. [6] This occurs because the program is service. The script will suggest names matching running on the local machine. Web applications the letters entered into the box without requiring usually run thru an internet browser like the page to be refreshed. If the script was written Microsoft Internet Explorer or Mozilla Firefox. without Ajax after each letter entered, the page

1 would need to be refreshed. This would create of code var xmlHttp. The three functions excess load on the web server and be distracting are showHint, stateChanged and

to the user. [9] GetXmlHttpObject. [9]

HTML CODE FUNCTION showHint()

Code Sample 1 shows the HTML code that The function showHint is the driver function generates the form. The code is standard of the JavaScript. The function takes the string hypertext markup language (HTML) with a few inputted in the form and creates the request to additions. The first addition is the clienthint.js the server. The function also tells the computer which holds the Ajax calls and declares a to call stateChanged when the request to the function called showHint(). To make the script server has completed. Function showHint is notify the user of new suggestions on each key shown in Code Sample 2. The first line of stroke the input section of the form has the showHint defines the variable xmlHttp as an following code added XmlHttpRequest by calling the onkeyup=”showHint(this.value)”. [6] This piece GetXMLHttpObject function. The second line of code makes the web browser call showHint defines a variable named url which contains the every time the user releases a key in the field. location of the server side script. Url is also The final portion of code required is this labels a section of parameter represents the string being sent to the the code as txtHint. [6] This label will be used server, the sid parameter is used only to make later to output the result of the Ajax query. [9] each request unique. [6] If the sid parameter was not given the web browser may not call the server script and use a cached copy instead. [9] The next three lines setup the XmlHttpRequest parameters and perform the

Suggestions:

Code Sample 2 [9] The JavaScript code (clientthint.js) consists of three functions and a global variable. The FUNCTION stateChanged() global variable is defined as an XMLHttpRequest and is named xmlHttp. The This function processes changes in the state xmlHttp can be defined with the following line of the xml request. The function first checks if

2 the readyState is equal to 4. The readyState Code Sample 4 changes based on the current status of the xml request. A status of 4 indicates the request is SERVER SCRIPT finished and the server’s response is stored in

responseText. [3] If the status is 4, the server’s The server script is the last section needed to response is outputted in the section labeled make the example work properly. The server txtHint. The function stateChanged in shown in script takes input as part of the url and displays Code Sample 3. [9] the output in text. Simply put the server script is merely a webpage. For the example, the server function stateChanged() script will be programmed in PHP an open { source scripting language. The script should use if(xmlHttp.readyState==4) the name that was defined in the JavaScript url

{ of Code Sample 2. [9] The first part of the script is to define the list document.getElementById("txtHint of words to match the input against. This list can ").innerHTML=xmlHttp.responseTex be changed on the fly without the user having to t refresh there webpage. The next step is to take } the input which is stored in $_GET[‘q’] and } store it in a temporary variable named q. The Code Sample 3 [9] next section of code takes the input string and compares it against each entry listed in the word FUNCTION GetXmlHttpObject() list. Each entry that matches is concatenated on the hint variable. If no entries are found the The function GetXmlHttpObject creates an server’s response is “no suggestions”. If a hint is XMLHttpRequest based on which browser is found but the hint is not the word typed in, the used. The function returns a valid hint is returned in bolded letters. If the hint is the XMLHttpRequest. The first line of the function word typed in then the response is html code to creates a temporary variable. The first if output “we have got a match” in big red letters. statement checks to see if the browser supports The final step of the server script is to output the window.XMLHttpRequest, if the browser does response that was generated. The server script is

support it then the variable is initialized to a new displayed in Code Sample 5. [9] XMLHttpRequest. The second if statement is only used when the previous check fails. This ". objXMLHttp=new $hint."<--We got a match"; ActiveXObject("Microsoft.XMLHTTP") else } $response="".$hint.""; return objXMLHttp echo $response; //output the response } ?>

3 Code Sample 5 [9] nightmare. One issue with Ajax is that if the browser denies the Ajax request for any reason

SAMPLE OUTPUT the users application loses all functionality. [6] The second issue involves executing malicious The example presented will now operate code. Developers often “clean” the input they properly if each of the files is placed on a web are sending to the server. The input must be server. As text is entered into the First name field “cleaned” to prevent the server from accidentally the suggestions box will change. A sample executing a command an attacker tries to run. [4] output is shown in Figure 2 and Figure 3. [9] With Ajax it’s tempting to clean the input on the client side using JavaScript and then not clean it on the server side. The problem with this is an attacker could call the server script without using the client script and compromise the server. Another issue with Ajax is that it can be Figure 2 – Suggesting ‘Greg’ [9] used maliciously without the user discovering it. Since Ajax is designed to run without user interaction it can easily be run on a webpage hijacking session information and sending it to

an attacker. [4]

SUMMARY/CONCLUSIONS Figure 3- No Suggestion [9] Ajax provides functionality to create a AJAX BENEFITS robust web application. If an Ajax web application is coded properly it will run faster The main benefit of the Ajax suite is its than and as secure as a non-Ajax program. Ajax ability to provide a robust interactive web also allows websites to reduce their overall application. Ajax also removes the time the user bandwidth usage and server load by reducing the spends waiting on a web page because the page amount of full page loads. can be loaded in sections. [10] Ajax is used in One major advantage of Ajax is that it very areas where large amounts of data need to be easy to learn if you understand html. Since Ajax available to the user quickly but without the user is a mixture of technologies a developer will having to wait for a new page to load. An learn how to write web pages and server scripts example of this scenario is a calendar. The all while learning Ajax. The example shown in calendar will show all events but when the user this paper could be written by an experienced moves their mouse over an event an Ajax call Ajax developer in under ten minutes. As Ajax is could load information on the particular event. becoming more popular many toolkits have been This reduces the load on the server and the produced that allow developers to utilize Ajax amount of traffic sent each time a user requests functionality without having to code the actual the calendar. Instead of sending the user the requests. These toolkits are extremely useful calendar and the information on each event when when coding large projects because they provide the page is loaded the user would only receive a standard that is well defined and easy to use. the calendar and the information about each event would be loaded as the user requests it. [10] References: The XMLHttpRequest was designed using a sandbox model. This means the 1. W3Schools. 15 March 2006. Refsnes Data. XMLHttpRequest runs in a locked down mode 10 November 2006. where it can only access websites that are located . from. [8] This prevents Ajax from being used in 2. Rubel, Steve. “MyEPSN will Change the cross-site-scripting. Game for Start Pages.” 27 October 2006. 10 November 2006. AJAX PROBLEMS/ISSUES . Ajax can provide rich web applications but 3. Asleson, Ryan. Foundations of Ajax. if used improperly can create a security Berkeley, Calif.: Apress, 2006.

4 4. Stamos, Alex. “Attacking AJAX Web Applications.” Black Hat USA 2006. 3 August 2006. ISEC Partners. 9 November 2006. . 5. Garrett, Jesse James. “ajax: a new approach to web applications.” 18 February 2005. 10 November 2006. . 6. McLaughlin, Brett. “Mastering Ajax.” 06 December 2005. 10 November 2006. . 7. Machanic, Adam. “HTTPRequest-enabled RS.” Online Posting. 18 June 2002. Microsoft Scripting. 11 November 2006. . 8. Gehtland, Justin. Pragmatic Ajax. Raleight, NC: Pragmatic Bookshelf, 2006. 9. McChesney, Gregory. “Ajax Code Sample.” 11 November 2006. . 10. Taft, Darryl. “Ajax, SOA to merge.” eWeek 2 October 2006:18.