XML AJAX SUMMARY

AJAX Introduction

AJAX (Asynchronous JavaScript and XML) is a technique used to create dynamic and interactive web applications. It allows web pages to update asynchronously by exchanging small amounts of data with the server behind the scenes. This makes web pages more responsive without requiring a full page reload.

AJAX XMLHttp

XMLHttpRequest is the key component of AJAX. It is an API used by JavaScript to send and receive HTTP requests asynchronously. It allows web pages to load data in the background without interfering with the current page.

Basic example of creating an XMLHttpRequest object:

var xhttp = new XMLHttpRequest();

AJAX Request

An AJAX request is initiated by calling the open() and send() methods on the XMLHttpRequest object. These methods allow you to send a request to the server and process the response.

Example of making an AJAX request:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.responseText);
  }
};
xhttp.open("GET", "data.xml", true);
xhttp.send();

AJAX Response

When the server responds to an AJAX request, the data is typically returned as a plain text, JSON, or XML. The response can be accessed through the responseText or responseXML properties of the XMLHttpRequest object.

Example of handling the AJAX response:

var response = xhttp.responseText;
console.log(response);

AJAX XML File

AJAX can be used to load and display XML data from a file. Once the XML file is retrieved, you can parse and manipulate its content using JavaScript.

Example of using AJAX to load an XML file:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var xmlDoc = this.responseXML;
    var title = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
    console.log(title);
  }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();

AJAX PHP

AJAX can be integrated with PHP to dynamically update content on the server. PHP can process the request and return the response in formats such as JSON or XML.

Example of using AJAX with PHP:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("content").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "server.php", true);
xhttp.send();

PHP script (server.php):

<?php
  echo "Hello, world!";
?>

AJAX ASP

In ASP (Active Server Pages), AJAX can be used to send requests to a server-side ASP script. The server processes the request and returns a response.

Example of using AJAX with ASP:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("content").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "server.asp", true);
xhttp.send();

ASP script (server.asp):

<% Response.Write("Hello from ASP!"); %>

AJAX Database

AJAX and databases can be integrated by sending a request to the server to fetch or manipulate data stored in a database, and then returning the result to the client.

Example of using AJAX with a MySQL database (via PHP):

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("content").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "fetch_data.php", true);
xhttp.send();

PHP script (fetch_data.php):

<?php
  $conn = new mysqli("localhost", "username", "password", "database");
  $result = $conn->query("SELECT name FROM users");
  while($row = $result->fetch_assoc()) {
    echo $row["name"] . "<br>";
  }
?>

AJAX Applications

AJAX is widely used in creating dynamic web applications such as: - Real-time updates on social media platforms - Autocomplete search boxes - Form validation without page refresh - Chat applications

Example of AJAX in a real-time search application:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("searchResults").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "search.php?query=" + query, true);
xhttp.send();

AJAX Examples

Here are a few practical examples of AJAX:

Simple content update:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("result").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "data.txt", true);
xhttp.send();

Loading data from an XML file:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var xmlDoc = this.responseXML;
    var books = xmlDoc.getElementsByTagName("book");
    var content = "";
    for (var i = 0; i < books.length; i++) {
      content += books[i].getElementsByTagName("title")[0].childNodes[0].nodeValue + "<br>";
    }
    document.getElementById("bookList").innerHTML = content;
  }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();