Membangun sebuah situs web dari awal Bagian VIII:. Data sebagai layanan.
Apa yang akan kita lakukan
Dalam bab ini kita akan:
- Mengambil data dinamis dari SQL server web yang menjalankan
Menggunakan PHP Server Menjalankan MySQL
Dalam folder demoweb, mengubah customers.html berkas.
Masukan kode berikut di dalam file tersebut:
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>
Cobalah sendiri " Kode di atas adalah sama seperti pada bab JSON.
Hanya saja kali ini XMLHttpRequest membaca data dari "customers_db_mysql.php".
customers_db_mysql.php mengambil data dari "hidup" Database, sementara customers.php menjemput "statis" file teks.
Menggunakan ASP.NET Server Menjalankan SQL Server
Dalam folder demoweb, mengubah customers.html berkas.
Masukan kode berikut di dalam file tersebut:
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>
Cobalah sendiri " Kode di atas adalah sama seperti sebelumnya.
Hanya saja kali ini XMLHttpRequest membaca data dari "customers_db_sql.aspx".
Baca lebih banyak
Baca lebih lanjut tentang SQL di kami SQL Tutorial .