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.
