Ajax - SPLessons
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

AJAX With HTML

AJAX With HTML

shape Description

The AJAX code will use the HTML syntax. HTML is a Language which is used to create a specific part of the web page by using code editors and web browsers.HTML can be defined as “Hyper Text Markup Language.” Which is used to demonstrates the web pages with ordinary text. Every web page is HTML page. HTML pages are described by HTML tags.

HTML Structure

shape Description

In order to build the web page HTML language is the easiest way. To build the HTML page user need to use the HTML tags these tags are denoted by the angular brackets like as shown below. [html] <!DOCTYPE html> <html> <head> <title>HTML Page</title> </head> <body bgcolor="skyblue"> <center> WELCOME TO SPLESSONS</br> </br> <img src="../splessons.png"> </center> </body> </html> [/html] A HTML document is a plain text file which is encoded in HTML language. A browser is used to decode the HTML text file and establish (or translate) it to the user. An HTML document is built by the HTML tags, by using these tags browser can determine the format of the text. The following is the structure of the HTML code. When compile the above code following is the result will be displayed.

By Callback Function

shape Description

A callback is a function go as a argument to other function. In the event that client has more than one AJAX assignment in a site, client ought to make the single function for implementing the XMLHttpRequest protest, and one callback work for every AJAX undertaking. The call of the function ought to contain the URL and what capacity to call when the reaction is prepared. The following is an example. [html] <!DOCTYPE html> <html> <body bgcolor="skyblue"> <div id="demo"> <h1>Welcome To SPlessons</h1> <h2>The XMLHttpRequest Object</h2> <button type="button" onclick="loadDoc('ajax_info.txt', myFunction)">Splessons Info</button> </div> <script> function loadDoc(url, cFunction) { var xhttp; xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { cFunction(this); } }; xhttp.open("GET", url, true); xhttp.send(); } function myFunction(xhttp) { document.getElementById("demo").innerHTML = xhttp.responseText; } </script> </body> </html> [/html] The onreadystatechange function will be put away and will be called naturally every time readyState property changes. The XMLHttpRequest protest is utilized to trade information with a server. This implies it is conceivable to overhaul parts of a page, without disturbing the entire page. The readystate essentially implies that the demand has got done with preparing. 200 is the http status for OK. The getElementById() strategy gives back the component that has the ID quality with the predetermined esteem. This strategy is a standout amongst the most widely recognized strategies in the HTML DOM, and is utilized practically every time user need to control, or get information from, a component on the archive. Output: Now compile the code result will be as follows.

Summary

shape Key Points

  • HTML stands for Hyper Text Markup Language.
  • The disadvantage of AJAX is dependent of Javascript.
  • The XMLHttpRequest will send the data in background and it can get the data also.