AJAX สามารถใช้เพื่อสื่อสารโต้ตอบกับฐานข้อมูลได้
อินสแตนซ์ฐานข้อมูล AJAX
ตัวอย่างต่อไปนี้จะแสดงให้เห็นว่าหน้าเว็บอ่านข้อมูลจากฐานข้อมูลผ่าน AJAX อย่างไร:
ไฟล์ SQL ตารางเว็บไซต์ที่ใช้ในบทช่วยสอนนี้: sites.sql
คำอธิบายตัวอย่าง - ฐานข้อมูล MySQL
ในตัวอย่างข้างต้น ตารางฐานข้อมูลที่เราใช้มีลักษณะดังนี้:
mysql> เลือก * จากเว็บไซต์;+----+-------------------+---------------------- -----+--+---+|. ชื่อ |. alexa |. -----+----------------------------+--------+-------- -+|.1 |. Google |. CN || http://www.codercto.com/ |. CN ||. 4 | |. สหรัฐอเมริกา |+----+---------------+------------------------- - -+-------+---------+5 แถวในชุด (0.01 วินาที)
คำอธิบายตัวอย่าง - หน้า HTML
เมื่อผู้ใช้เลือกผู้ใช้ในรายการแบบเลื่อนลงด้านบน ฟังก์ชันชื่อ "showSite()" จะถูกดำเนินการ ฟังก์ชั่นนี้ถูกทริกเกอร์โดยเหตุการณ์ "onchange":
รหัสไฟล์ test.html:
< ! ด็อกไทป์ html > <html> <หัว> < เมตาดาต้า ชุดอักขระ = " utf-8 " > <title> บทช่วยสอน การเขียนโค้ด ( codercto.com ) </title> <สคริปต์> ฟังก์ชั่น showSite ( str ) - ถ้า ( str == " " ) - เอกสาร . getElementById ( " txtHint " ) innerHTML = " " ; ถ้า ( หน้าต่าง . XMLHttpRequest ) - // IE7+, Firefox, Chrome, Opera, รหัสดำเนินการเบราว์เซอร์ Safari xmlhttp = ใหม่ XMLHttpRequest ( ) ; อื่น - // IE6, รหัสดำเนินการเบราว์เซอร์ IE5 xmlhttp = ใหม่ ActiveXObject ( " Microsoft.XMLHTTP " ) ; xmlhttp.onreadystatechange = ฟังก์ชัน ( ) - ถ้า ( xmlhttp . readyState == 4 && xmlhttp . สถานะ == 200 ) - เอกสาร . getElementById ( " txtHint " ) innerHTML = xmlhttp ; - xmlhttp . open ( " GET " , " getsite_mysql.php ? q = " + str , true ) ; xmlhttp</ หัว > <ร่างกาย> <แบบฟอร์ม> < เลือก ชื่อ = " ผู้ใช้ " onchange = " showSite(this.value) " > < ตัวเลือก value = " " > เลือกเว็บไซต์: </ option > < ตัวเลือก ค่า = " 1 " > Google </ ตัวเลือก > < ตัวเลือก ค่า = " 2 " > Taobao </ ตัวเลือก > < ตัวเลือก value = " 3 " > บทช่วยสอน Coder </ ตัวเลือก > < ตัวเลือก value = " 4 " > Weibo </ ตัวเลือก > < ตัวเลือก ค่า = " 5 " > Facebook </ ตัวเลือก > </เลือก> </แบบฟอร์ม> <br> < กอง id = " txtHint " > < b > ข้อมูลเว็บไซต์จะแสดงที่นี่... </ b > </ div > </ร่างกาย> </html> ฟังก์ชัน showSite() ดำเนินการตามขั้นตอนต่อไปนี้:
ตรวจสอบว่าได้เลือกเว็บไซต์แล้ว
สร้างวัตถุ XMLHttpRequest
สร้างฟังก์ชันที่ดำเนินการเมื่อการตอบสนองของเซิร์ฟเวอร์พร้อม
ส่งคำขอไปยังไฟล์บนเซิร์ฟเวอร์
โปรดทราบว่าพารามิเตอร์ (q) ถูกเพิ่มต่อท้าย URL (ประกอบด้วยเนื้อหาของรายการแบบเลื่อนลง)
ไฟล์ PHP
หน้าเซิร์ฟเวอร์ที่เรียกข้างต้นผ่าน JavaScript เป็นไฟล์ PHP ชื่อ "getsite_mysql.php"
ซอร์สโค้ดใน "getsite_mysql.php" เรียกใช้แบบสอบถามกับฐานข้อมูล MySQL และส่งกลับผลลัพธ์ในตาราง HTML:
รหัสไฟล์ getsite_mysql.php:
<?php $ q = isset ( $ _GET [ " q " ] ) ?- เสียงสะท้อน ' โปรด เลือก เว็บไซต์ ' ; $ con = mysqli_connect ( ' localhost ' , ' root ' , ' 123456 ' ) ; ( ! $คอน ) - die ( ' ไม่สามารถเชื่อมต่อ: ' . mysqli_error ( $ con ) ) ; // เลือกฐานข้อมูล mysqli_select_db ( $con , " test " ) ; // ตั้งค่าการเข้ารหัสเพื่อป้องกันอักขระที่อ่านไม่ออก mysqli_set_charset ( $ con , " ' " ) ; $ sql = " SELECT * จาก เว็บไซต์ โดย ที่ $ q . " ' " ; " <table border='1'><tr><th>ID</th><th>ชื่อเว็บไซต์</th><th>URL เว็บไซต์</th><th>การจัดอันดับของ Alexa</th><th> ประเทศ</th></tr> " ; while ( $row = mysqli_fetch_array ( $result ) ) - เสียงสะท้อน " <tr> " ; " <td> " . $ row [ ' id ' ]" <td> " . $ row [ ' ชื่อ ' ]" <td> " . $ row [ ' url ' ]" <td> " . $ row [ ' alexa ' ]" <td> " . $ row [ ' ประเทศ ' ]" </tr> " ; } เสียงสะท้อน " </table> " ; mysqli_close ( $ con ) ; คำอธิบาย: เมื่อแบบสอบถามถูกส่งจาก JavaScript ไปยังไฟล์ PHP จะเกิดอะไรขึ้น:
PHP เปิดการเชื่อมต่อกับฐานข้อมูล MySQL
ค้นหาผู้ใช้ที่เลือก
สร้างตาราง HTML เติมข้อมูลลงในตาราง และส่งตัวยึดตำแหน่ง "txtHint" กลับมา
