Recoger datos con AJAX

La construcción de un sitio web desde cero. Parte VI:
Recoger datos con AJAX.

Lo que haremos

En este capítulo vamos a:

El archivo de texto

El siguiente archivo se almacena en nuestro servidor web:

http://dwva.es//Customers_HTML.php

Este archivo contiene

Datos Clientes
<?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>

Cambiar la pagina clientes para usar Ajax

En la carpeta DemoWeb, editar el archivo llamado datos.html

Insertar el siguiente contenido al archivo datos.html:

datos.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>

Privacidad | Legal | Sitemap | Google+