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

colorpicker