ล่าสุดการพัฒนาเว็บบทเรียน
 

เว็บการก่อสร้างอาคาร - ข้อมูลเป็น Service (DaaS)

❮ ก่อนหน้าบทต่อไป ❯

สร้างเว็บไซต์จากรอยขีดข่วนส่วน VIII:. ข้อมูลเป็นบริการ

สิ่งที่เราจะทำ

ในบทนี้เราจะ:

  • ดึงข้อมูลแบบไดนามิกจาก SQL เว็บเซิร์ฟเวอร์ที่ใช้

การใช้เซิร์ฟเวอร์ที่ใช้ PHP MySQL

ในโฟลเดอร์ demoweb เปลี่ยน customers.html ไฟล์

ใส่รหัสต่อไปนี้ภายในไฟล์:

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>
ลองตัวเอง»

รหัสข้างต้นเป็นเช่นเดียวกับในบท JSON

เพียง แต่เวลานี้ XMLHttpRequest อ่านข้อมูลจาก "customers_db_mysql.php"

customers_db_mysql.php เรียกข้อมูลจากฐานข้อมูล "สด" ในขณะที่ customers.php เรียกว่า "คงที่" แฟ้มข้อความ

การใช้เซิร์ฟเวอร์ ASP.NET ใช้ SQL Server

ในโฟลเดอร์ demoweb เปลี่ยน customers.html ไฟล์

ใส่รหัสต่อไปนี้ภายในไฟล์:

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>
ลองตัวเอง»

รหัสข้างต้นเป็นเช่นเดียวกับก่อนหน้านี้หนึ่ง

เพียง แต่เวลานี้ XMLHttpRequest อ่านข้อมูลจาก "customers_db_sql.aspx"

อ่านเพิ่มเติม

อ่านข้อมูลเพิ่มเติมเกี่ยวกับ SQL ของเรา สอน SQL


❮ ก่อนหน้าบทต่อไป ❯