Scribd
Upload
68 views5 pages

Steps of AJAX Operation

The document outlines the steps of an AJAX operation including creating an XMLHttpRequest object, configuring it to make an asynchronous request, processing the response, and updating the HTML DOM. It also describes how to use the XMLHttpRequest and DOM APIs to validate a user ID and display the results. The recommendations provided include using innerText instead of innerHtml and encoding data before use to help secure AJAX applications.

Uploaded by

Venkatesh Mamidi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
68 views5 pages

Steps of AJAX Operation

The document outlines the steps of an AJAX operation including creating an XMLHttpRequest object, configuring it to make an asynchronous request, processing the response, and updating the HTML DOM. It also describes how to use the XMLHttpRequest and DOM APIs to validate a user ID and display the results. The recommendations provided include using innerText instead of innerHtml and encoding data before use to help secure AJAX applications.

Uploaded by

Venkatesh Mamidi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Prepared by Krishna Srikanth M

Ajax Flow

Steps of AJAX Operation


1.A client event occurs
2.An XMLHttpRequest object is created
3.The XMLHttpRequest object is configured
4.The XMLHttpRequest object makes an async. request
5.The ValidateServlet returns an XML document containing the result
6.The XMLHttpRequest object calls the callback() function and processes the result
7.The HTML DOM is updated

function initRequest() {

if (window.XMLHttpRequest) {

req = new XMLHttpRequest();

} else if (window.ActiveXObject) {

isIE = true;

req = new ActiveXObject("Microsoft.XMLHTTP");

}}

function validateUserId() {

initRequest();

req.onreadystatechange = processRequest;

if (!target) target = document.getElementById("userid");

var url = "validate?id=" + escape(target.value);

req.open("GET", url, true);

req.send(null);
Prepared by Krishna Srikanth M
}

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws IOException, ServletException {

String targetId = request.getParameter("id");

if ((targetId != null) && !accounts.containsKey(targetId.trim())) {

response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-cache");

response.getWriter().write("<valid>true</valid>");

} else {

response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-cache");

response.getWriter().write("<valid>false</valid>");

XMLHttpRequest object calls callback()

function and processes the result The XMLHttpRequest object was configured to call

the processRequest() function when there is a state change to the readyState of the
XMLHttpRequest object

function processRequest() {

if (req.readyState == 4) {

if (req.status == 200) {

var message = ...;

JavaScript technology gets a reference to any element in a page using DOM API

• The recommended way to gain a reference to an element is to call

document.getElementById("userIdMessage"), where "userIdMessage" is the ID


attribute of an element appearing in the HTML document

JavaScript technology may now be used to modify the element's attributes; modify
the element's style properties; or add, remove, or modify child elements

<script type="text/javascript">

function setMessageUsingDOM(message) {

var userMessageElement = document.getElementById("userIdMessage");

var messageText;

if (message == "false") {

userMessageElement.style.color = "red";
Prepared by Krishna Srikanth M
messageText = "Invalid User Id";

} else {

userMessageElement.style.color = "green";

messageText = "Valid User Id";

var messageBody = document.createTextNode(messageText);

// if the messageBody element has been created simple replace it otherwise

// append the new element

if (userMessageElement.childNodes[0]) {

userMessageElement.replaceChild(messageBody,

userMessageElement.childNodes[0]);

} else {

userMessageElement.appendChild(messageBody);

</script>

<body>

<div id="userIdMessage"></div>

</body>

<script type="text/javascript">

function setMessageUsingDOM(message) {

var userMessageElement = document.getElementById("userIdMessage");

var messageText;

if (message == "false") {

userMessageElement.style.color = "red";

messageText = "Invalid User Id";

} else {

userMessageElement.style.color = "green";

messageText = "Valid User Id";

var messageBody = document.createTextNode(messageText);

// if the messageBody element has been created simple replace it otherwise


Prepared by Krishna Srikanth M
// append the new element

if (userMessageElement.childNodes[0]) {

userMessageElement.replaceChild(messageBody,

userMessageElement.childNodes[0]);

} else {

userMessageElement.appendChild(messageBody);

</script>

<body>

<div id="userIdMessage"></div>

</body>

XMLHttpRequest Methods

open(“HTTP method”, “URL”, syn/asyn)

Assigns HTTP method, destination URL, mode

send(content)

Sends request including string or DOM object data

abort()

Terminates current request

getAllResponseHeaders()

Returns headers (labels + values) as a string

getResponseHeader(“header”)

Returns value of a given header

setRequestHeader(“label”,”value”)

Sets Request Headers before sending

XMLHttpRequest Properties

onreadystatechange

Set with an JavaScript event handler that fires at each state

change

readyState – current status of request

0 = uninitialized

1 = loading
Prepared by Krishna Srikanth M
2 = loaded

3 = interactive (some data has been returned)

4 = complete

status

HTTP Status returned from server: 200 = OK

responseText

String version of data returned from the server

responseXML

XML document of data returned from the server

statusText

Status text returned from server

Recommendations from OWASP

1. Use .innerText instead of .innerHtml


2. Don't use eval
3. Encode data before its use
4. Avoid serialization
5. Avoid building XML dynamically

Development Tools on Mozilla

Mozilla FireBug debugger (add-on) : This is the most comprehensive and most
useful JavaScript

debugger

This tool does things all other tools do and more

Mozilla JavaScript console

Mozilla DOM inspector (comes with Firefox package)

Mozilla Venkman JavaScript debugger (add-on)

Mozilla LiveHTTPHeaders HTTP monitor (similar to NetBeans HTTP monitor)

You might also like