Learn AJAX - Action, Asynchronous JavaScript and XML

What Will I Learn?

• How client event occurs
• An XMLHttpRequest object creation
• The XMLHttpRequest object configuration
• The XMLHttpRequest object makes an asynchronous request to the Webserver
• The Webserver returns the result containing XML documentation
• The XMLHttpRequest object calls the callback() function and processes the result
• How we can update the HTML DOM

Requirements

All the available browsers cannot support AJAX. Here is a list of major browsers that support AJAX.

• Mozilla Firefox 1.0 and above.
• Netscape version 7.1 and above.
• Apple Safari 1.2 and above.
• Microsoft Internet Explorer 5 and above.
• Konqueror.
• Opera 7.6 and above.

Difficulty

• Intermediate

Tutorial Contents

AJAX remains for Asynchronous JavaScript and XML. AJAX is another method for making better, quicker, and more intelligent web applications with the assistance of XML, HTML, CSS, and Java Script.

Rich Internet Application Technology

AJAX is the most feasible Rich Internet Application (RIA) innovation up until this point. It is getting enormous industry energy and a few toolbox and systems are rising. In any case, in the meantime, AJAX has program incongruence and it is upheld by JavaScript, which is difficult to keep up and investigate.

How client event occurs

A JavaScript work is called as the consequence of an occasion.

Case − validateUserId() JavaScript work is mapped as an occasion handler to an onkeyup occasion on input frame field whose id is set to "userid"

<input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId();">.

An XMLHttpRequest object creation

here is the code we can use

var ajaxRequest;  // The variable that makes Ajax possible!
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
   
      // Internet Explorer Browsers
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
      
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
}

An XMLHttpRequest object creation

In this progression, we will compose a capacity that will be activated by the customer occasion and a callback work processRequest() will be enrolled.

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

Making Asynchronous Request to the Webserver

Source code is accessible in the above bit of code. Code written in intense typeface is capable to make a demand to the webserver. This is all being finished utilizing the XMLHttpRequest question ajaxRequest.

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id = " + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

The Webserver returns the result containing XML documentation

You can execute your server-side content in any language, however its rationale ought to be as per the following.

.Get a demand from the customer.

.Parse the contribution from the customer.

.Do required handling.

.Send the yield to the customer.

On the off chance that we expect that you will compose a servlet, at that point here is the bit of code.

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>");
   }
}

Callback Function processRequest() is Called

The XMLHttpRequest question was designed to call the processRequest() work when there is a state change to the readyState of the XMLHttpRequest protest. Presently this capacity will get the outcome from the server and will do the required preparing. As in the accompanying case, it sets a variable message on evident or false in light of the returned an incentive from the Webserver.

function processRequest() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var message = ...;
...
}

How we can update the HTML DOM

This is the last advance step in this progression, your HTML page will be refreshed. It occurs in the accompanying way −

-JavaScript gets a reference to any component in a page utilizing DOM API.

-The prescribed method to pick up a reference to a component is to call.

ocument.getElementById("userIdMessage"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document

JavaScript may now be utilized to alter the component's qualities; adjust the component's style properties; or include, evacuate, or change the kid components. Here is a case

<script type = "text/javascript">
   (html comment removed: 
   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 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>

Curriculum

In the event that you have comprehended the previously mentioned seven stages, at that point you are relatively finished with AJAX. In the following section, we will see XMLHttpRequest protest in more detail in next Tutorial.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---