Web Building - Fetching Data with AJAX
Building a web site from scratch. Part VI:
Fetching data using AJAX.
What We Will Do
In this chapter we will:
- Fetch data from a text file using AJAX
The Text File
The following file is stored on our web server:
http://www.w3schools.com/website/Customers_HTML.php
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: text/html; charset=UTF-8");
?>
<table>
<tr><th>Name</th><th>City</th><th>Country</th></tr>
<tr><td>Alfreds Futterkiste</td><td>Berlin</td><td>Germany</td></tr>
<tr><td>Berglunds snabbköp</td><td>Luleå</td><td>Sweden</td></tr>
<tr><td>Centro comercial Moctezuma</td><td>México
D.F.</td><td>Mexico</td></tr>
<tr><td>Ernst
Handel</td><td>Graz</td><td>Austria</td></tr>
<tr><td>FISSA Fabrica
Inter. Salchichas S.A.</td><td>Madrid</td><td>Spain</td></tr>
<tr><td>Galería
del gastrónomo</td><td>Barcelona</td><td>Spain</td></tr>
<tr><td>Island
Trading</td><td>Cowes</td><td>UK</td></tr>
<tr><td>Königlich
Essen</td><td>Brandenburg</td><td>Germany</td></tr>
<tr><td>Laughing
Bacchus Wine Cellars</td><td>Vancouver</td><td>Canada</td></tr>
<tr><td>Magazzini
Alimentari Riuniti</td><td>Bergamo</td><td>Italy</td></tr>
<tr><td>North/South</td><td>London</td><td>UK</td></tr>
<tr><td>Paris spécialités</td><td>Paris</td><td>France</td></tr>
<tr><td>Rattlesnake Canyon Grocery</td><td>Albuquerque</td><td>USA</td></tr>
<tr><td>Simons bistro</td><td>København</td><td>Denmark</td></tr>
<tr><td>The Big Cheese</td><td>Portland</td><td>USA</td></tr>
<tr><td>Vaffeljernet</td><td>Århus</td><td>Denmark</td></tr>
<tr><td>Wolski Zajazd</td><td>Warszawa</td><td>Poland</td></tr>
</table>
Change the Customers Page to use AJAX
In the DemoWeb folder, change the file Customers.html.
Put the following code inside the file:
Customers.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Web</title>
<link href="Site.css"
rel="stylesheet">
</head>
<body>
<nav id="nav01"></nav>
<div id="main">
<h1>Customers</h1>
<div id="id01"></div>
<footer
id="foot01"></footer>
</div>
<script>
var xmlhttp =
new XMLHttpRequest();
var url = "http://www.w3schools.com/website/Customers_HTML.php";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState
== 4 && xmlhttp.status == 200) {
document.getElementById("id01").innerHTML =
xmlhttp.responseText;
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
</script>
<script src="Script.js"></script>
</body>
</html>
Try it Yourself »
Read More
Read more about AJAX in our AJAX Tutorial.
Color Picker