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)
