AJAX !!!

It's a way to communicate with server(s) without reloading the page

  • turned_in_notAjax ?
    • Asynchronous JavaScript and XML
    • It provides functionality to load data in background without reloading the whole page
    • Data can be exchange in any text format like plain-text, JSON, XML, HTML
    • It depends on XMLHttpRequest object which is supported by all modern browsers now a days
    • It only cares what it's sending on the server &, what it's receiving from the server
  • It's a part of JavaScript & you must know basic JAVASCRIPT
  • Great for developing user interactive web-pages


Write Your First Ajax Script!

ajax_demo.txt file used in below example

<p>AJAX full form is Asynchronous JavaScript and XML</p>
<p className="abc">Hope You enjoy using AJAX</p>

Copy the full code in a new file
Save it with any html extension (.htm or .html)
In this case 'ajax_demo.txt' & your saved file are in the same folder
Run your saved file in any browser

Ajax Codesubject
Ajax Codeclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <div id="myText"></div>
  <button onclick="runAjax()">Load (ajax_demo.txt)</button>
<script>
function runAjax() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("myText").innerHTML = this.responseText;
    }
  };
  xhr.open("GET", "ajax_demo.txt", true);
  xhr.send();
}
</script>
</body>
</html>
  • trending_downExample Explained
    On the click of a button it triggers the function containing AJAX code which requests for the 'ajax_demo.txt' file to the server & loads its content as mentioned
  • Remember! If you request for the server side executable pages (like .php, .asp, .jsp), It will response back with the executed result, not the whole server side code

  • XMLHttpRequest
Next ❯XMLHttpRequest
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯