XML Tutorial

XML หน้าแรก บทนำ XML XML วิธีใช้งาน XML Tree ไวยากรณ์ XML องค์ประกอบ XML คุณสมบัติ XML XML เนมสเปซ จอแสดงผล XML XML HttpRequest XML Parser XML DOM XML XPath XML XSLT XML XQuery XML XLink เครื่องมือตรวจสอบ XML XML DTD XML Schema XML Server ตัวอย่าง XML แบบทดสอบ XML ใบรับรอง XML

XML AJAX

บทนำ AJAX AJAX XMLHttp คำขอ AJAX การตอบสนอง AJAX ไฟล์ AJAX XML AJAX PHP AJAX ASP ฐานข้อมูล AJAX แอปพลิเคชัน AJAX ตัวอย่าง AJAX

XML DOM

บทนำ DOM โหนด DOM การเข้าถึง DOM ข้อมูลโหนด DOM รายการโหนด DOM DOM Traversing การนำทาง DOM DOM รับค่า DOM เปลี่ยนโหนด DOM ลบโหนด DOM แทนที่โหนด DOM สร้างโหนด DOM เพิ่มโหนด DOM โคลนโหนด ตัวอย่าง DOM

บทช่วย สอนXPath

บทนำ XPath โหนด XPath ไวยากรณ์ XPath แกน XPath ตัวดำเนินการ XPath ตัวอย่าง XPath

กวดวิชาXSLT

บทนำ XSLT ภาษา XSL การแปลง XSLT XSLT <แม่แบบ> XSLT <ค่าของ> XSLT <for-each> XSLT <sort> XSLT <if> XSLT <เลือก> ใช้ XSLT XSLT บนไคลเอนต์ XSLT บนเซิร์ฟเวอร์ XSLT แก้ไข XML ตัวอย่าง XSLT

กวดวิชาXQuery

บทนำ XQuery ตัวอย่าง XQuery XQuery FLWOR XQuery HTML ข้อกำหนด XQuery ไวยากรณ์ XQuery XQuery เพิ่ม XQuery Select ฟังก์ชัน XQuery

XML DTD

บทนำ DTD บล็อกตัวต่อ DTD องค์ประกอบ DTD คุณสมบัติ DTD องค์ประกอบ DTD เทียบกับ Attr หน่วยงาน DTD ตัวอย่าง DTD

ส คีมา XSD

บทนำ XSD XSD วิธีการ XSD <schema> องค์ประกอบ XSD แอตทริบิวต์ XSD ข้อจำกัด XSD

XSD Complex

องค์ประกอบ XSD XSD ว่างเปล่า องค์ประกอบ XSD เท่านั้น XSD Text เท่านั้น XSD ผสม ตัวชี้วัด XSD XSD <ใด ๆ> XSD <anyAttribute> การทดแทน XSD XSD ตัวอย่าง

ข้อมูลXSD

XSD สตริง วันที่ XSD XSD ตัวเลข XSD เบ็ดเตล็ด ข้อมูลอ้างอิง XSD

บริการเว็บ

XML Services XML WSDL XML SOAP XML RDF XML RSS

อ้างอิง

ประเภทโหนด DOM โหนด DOM DOM NodeList DOM NamedNodeMap เอกสาร DOM องค์ประกอบ DOM แอตทริบิวต์ DOM ข้อความ DOM DOM CDATA ความคิดเห็นของ DOM DOM XMLHttpRequest DOM Parser องค์ประกอบ XSLT ฟังก์ชัน XSLT/XPath

ตัวอย่างฐานข้อมูล AJAX


AJAX สามารถใช้สำหรับการสื่อสารแบบโต้ตอบกับฐานข้อมูล


ตัวอย่างฐานข้อมูล AJAX

ตัวอย่างต่อไปนี้จะแสดงให้เห็นว่าหน้าเว็บสามารถดึงข้อมูลจากฐานข้อมูลด้วย AJAX ได้อย่างไร:

ตัวอย่าง


Customer info will be listed here...


ตัวอย่างที่อธิบาย - ฟังก์ชัน showCustomer()

เมื่อผู้ใช้เลือกลูกค้าในรายการดรอปดาวน์ด้านบน ฟังก์ชันที่เรียกว่า "showCustomer()" จะถูกดำเนินการ ฟังก์ชั่นถูกเรียกโดยเหตุการณ์ "onchange":

แสดงลูกค้า

function showCustomer(str) {
  var xhttp;
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "getcustomer.php?q="+str, true);
  xhttp.send();
}

ฟังก์ชัน showCustomer() ทำหน้าที่ดังต่อไปนี้:

  • ตรวจสอบว่าลูกค้าได้รับการคัดเลือก
  • สร้างวัตถุ XMLHttpRequest
  • สร้างฟังก์ชันที่จะดำเนินการเมื่อการตอบสนองของเซิร์ฟเวอร์พร้อม
  • ส่งคำขอไปยังไฟล์บนเซิร์ฟเวอร์
  • สังเกตว่ามีการเพิ่มพารามิเตอร์ (q) ลงใน URL (พร้อมเนื้อหาของรายการแบบเลื่อนลง)


หน้าเซิร์ฟเวอร์ AJAX

หน้าบนเซิร์ฟเวอร์ที่เรียกใช้โดย JavaScript ด้านบนเป็นไฟล์ PHP ชื่อ "getcustomer.php"

ซอร์สโค้ดใน "getcustomer.php" เรียกใช้แบบสอบถามกับฐานข้อมูล และส่งคืนผลลัพธ์ในตาราง HTML:

<?php
$mysqli = new mysqli("servername", "username", "password", "dbname");
if($mysqli->connect_error) {
  exit('Could not connect');
}

$sql = "SELECT customerid, companyname, contactname, address, city, postalcode, country
FROM customers WHERE customerid = ?";

$stmt = $mysqli->prepare($sql);
$stmt->bind_param("s", $_GET['q']);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($cid, $cname, $name, $adr, $city, $pcode, $country);
$stmt->fetch();
$stmt->close();

echo "<table>";
echo "<tr>";
echo "<th>CustomerID</th>";
echo "<td>" . $cid . "</td>";
echo "<th>CompanyName</th>";
echo "<td>" . $cname . "</td>";
echo "<th>ContactName</th>";
echo "<td>" . $name . "</td>";
echo "<th>Address</th>";
echo "<td>" . $adr . "</td>";
echo "<th>City</th>";
echo "<td>" . $city . "</td>";
echo "<th>PostalCode</th>";
echo "<td>" . $pcode . "</td>";
echo "<th>Country</th>";
echo "<td>" . $country . "</td>";
echo "</tr>";
echo "</table>";
?>