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
Your contribution cannot be approved because it does not follow the Utopian Rules.
You can contact us on Discord.
[utopian-moderator]