AJAX Examples

Simple Examples

Request Header Information

Request XML Files

Retrieve Server Data with PHP and ASP

Retrieve Database Information

AJAX Applications

Simple Examples

Request Header Information:

You can request header information from the server using AJAX to get specific details about the response.

Request XML Files:

AJAX can be used to request XML files and parse the response to display data dynamically on a web page.

Retrieve Server Data with PHP and ASP:

AJAX allows you to retrieve data from the server using PHP or ASP to create more interactive web applications.

Retrieve Database Information:

With AJAX, you can fetch information from a database and display it in real-time on your web page.

AJAX Applications:

AJAX can be used for various applications, such as dynamically updating content on a web page without reloading, creating real-time search suggestions, and interacting with server-side scripts and databases.

Code Examples

Request Header Information:

const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

‍

Request XML Files:

function loadXMLDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    const xmlDoc = xhttp.responseXML;
    const cd = xmlDoc.getElementsByTagName("CD");
    displayCDs(cd);
  }
  xhttp.open("GET", "cd_catalog.xml");
  xhttp.send();
}

function displayCDs(cd) {
  let table = "<tr><th>Artist</th><th>Title</th></tr>";
  for (let i = 0; i < cd.length; i++) {
    table += "<tr><td>" +
    cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}

Retrieve Server Data with PHP:

‍

function showHint(str) {  if (str.length == 0) {    document.getElementById("txtHint").innerHTML = "";    return;  } else {    const xmlhttp = new XMLHttpRequest();    xmlhttp.onload = function() {      document.getElementById("txtHint").innerHTML = this.responseText;    }    xmlhttp.open("GET", "gethint.php?q=" + str);    xmlhttp.send();  }}‍

Retrieve Server Data with ASP:

function showHint(str) {  if (str.length == 0) {    document.getElementById("txtHint").innerHTML = "";    return;  } else {    const xmlhttp = new XMLHttpRequest();    xmlhttp.onload = function() {      document.getElementById("txtHint").innerHTML = this.responseText;    }    xmlhttp.open("GET", "gethint.asp?q=" + str);    xmlhttp.send();  }}

‍

Retrieve Database Information:

function showCustomer(str) {  if (str == "") {    document.getElementById("txtHint").innerHTML = "";    return;  }  const xhttp = new XMLHttpRequest();  xhttp.onload = function() {    document.getElementById("txtHint").innerHTML = this.responseText;  }  xhttp.open("GET", "getcustomer.php?q=" + str);  xhttp.send();}

‍

AJAX Applications:

Display XML Data in an HTML Table:<table id="demo"></table>‍<script>function loadXMLDoc() {  const xhttp = new XMLHttpRequest();  xhttp.onload = function() {    const xmlDoc = xhttp.responseXML;    const cd = xmlDoc.getElementsByTagName("CD");    displayCDs(cd);  }  xhttp.open("GET", "cd_catalog.xml");  xhttp.send();}‍function displayCDs(cd) {  let table = "<tr><th>Artist</th><th>Title</th></tr>";  for (let i = 0; i < cd.length; i++) {    table += "<tr><td>" +    cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +    "</td><td>" +    cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +    "</td></tr>";  }  document.getElementById("demo").innerHTML = table;}</script>‍

Display the First CD in an HTML div Element:

<div id="showCD">
</div>‍


<script>const xhttp = new XMLHttpRequest();xhttp.onload = function() {  const xmlDoc = xhttp.responseXML;  const cd = xmlDoc.getElementsByTagName("CD");  displayCD(cd, 0);}xhttp.open("GET", "cd_catalog.xml");xhttp.send();‍

function displayCD(cd, i) 
{  document.getElementById("showCD").innerHTML =  "Artist: " +  cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +  "<br>Title: " + 
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +  "<br>Year: " +  cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;}</script>‍

Navigate Between the CDs:

‍

<button onclick="previous()">Previous</button><button onclick="next()">Next</button>‍<script>let i = 0;const len = cd.length;‍function next() {  // Display the next CD, unless you are on the last CD  if (i < len - 1) {    i++;    displayCD(i);  }}‍function previous() {  // Display the previous CD, unless you are on the first CD  if (i > 0) {    i--;    displayCD(i);  }}‍function displayCD(i) {  document.getElementById("showCD").innerHTML =  "Artist: " +  cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +  "<br>Title: " +  cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +  "<br>Year: " +  cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;}</script>

‍

Show Album Information When Clicking On a CD:

<script>function displayCD(i) {  document.getElementById("showCD").innerHTML =  "Artist: " +  cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +  "<br>Title: " +  cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +  "<br>Year: " +  cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;}</script>

‍

These examples show how to use AJAX to interact with various data sources, including header information, XML files, server data with PHP and ASP, and database information, to create dynamic and interactive web applications.

‍