![Ajax.jpg](https://steemitimages.com/DQmeqVkgyuH87KG1BzrNjmoBEqojVUWKBDQAgVyaMy8DoqE/Ajax.jpg) #### 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" ``` language . ``` **An XMLHttpRequest object creation** here is the code we can use ``` language 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. ``` language 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. ``` language 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. ``` language 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("true"); } else { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("false"); } } ``` **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. ``` language 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. ``` language 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 ``` language

``` #### 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

kookjames