Los últimos tutoriales de desarrollo web
 

Edificio Web - datos como un servicio (DaaS®)


La construcción de un sitio web desde cero Parte VIII:. Los datos como un servicio.


Lo que haremos

En este capítulo vamos a:

  • Obtener los datos dinámicos desde un servidor web que ejecuta SQL

Uso de un servidor PHP Ejecutar MySQL

En la carpeta demoweb, cambiar el customers.html archivo.

Coloque el código siguiente en el archivo:

customers.html

<!DOCTYPE html>
<html>

<head>
  <title>Customers</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 src="script.js"></script>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://www.w3ii.com/website/customers_db_mysql.php";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
    var obj = JSON.parse(response);
    var arr = obj.records;
    var i;
    var out = "<table><tr><th>Name</th><th>City</th><th>Country</th></tr>";
    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" +
        arr[i].Name +
        "</td><td>" +
        arr[i].City +
        "</td><td>" +
        arr[i].Country +
        "</td></tr>";
    }
    out += "</table>"
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>
Inténtalo tú mismo "

El código de seguridad es el mismo que en el capítulo JSON.

Sólo que esta vez el XMLHttpRequest lee datos de "customers_db_mysql.php".

customers_db_mysql.php obtiene datos de una base de datos "en vivo", mientras que clientes.php obtiene un archivo de texto "estático".


El uso de un servidor SQL Server ASP.NET servidor que ejecuta

En la carpeta demoweb, cambiar el customers.html archivo.

Coloque el código siguiente en el archivo:

customers.html

<!DOCTYPE html>
<html>

<head>
  <title>Customers</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 src="script.js"></script>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://www.w3ii.com/website/customers_db_sql.aspx";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
    var obj = JSON.parse(response);
    var arr = obj.records;
    var i;
    var out = "<table><tr><th>Name</th><th>City</th><th>Country</th></tr>";
    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" +
        arr[i].Name +
        "</td><td>" +
        arr[i].City +
        "</td><td>" +
        arr[i].Country +
        "</td></tr>";
    }
    out += "</table>"
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>
Inténtalo tú mismo "

El código de seguridad es el mismo que el anterior.

Sólo que esta vez el XMLHttpRequest lee datos de "customers_db_sql.aspx".


Lee mas

Más información acerca de SQL en nuestro Tutorial de SQL .