1. บทนำ
ปัจจุบันมีเว็บแอปพลิเคชันจำนวนไม่น้อย เช่น Backpack, Blinksale และ Gmail ที่รวมเทคโนโลยีฐานข้อมูลเข้ากับ AJAX การบูรณาการนี้มีผลกระทบอย่างมากต่อเว็บแอปพลิเคชันและประสบการณ์ผู้ใช้ โดยการนำเสนอเทคโนโลยีที่มีประสิทธิภาพสำหรับการสื่อสารกับฐานข้อมูลโดยไม่ต้องรีเฟรชเบราว์เซอร์ ซึ่งหมายความว่าข้อมูลสามารถถ่ายโอนได้แบบเรียลไทม์ในขณะที่ผู้ใช้ยังคงโต้ตอบอื่นๆ ต่อไป
บทความนี้จะเน้นไปที่กลไกการบูรณาการเทคโนโลยีข้างต้น นอกจากนี้ยังมีซอร์สโค้ดอ้างอิงที่สมบูรณ์อีกด้วย ตัวอย่างนี้เป็นแอปพลิเคชันบันทึกงานอย่างง่าย โดยแต่ละตำแหน่งงานประกอบด้วยตำแหน่ง คำอธิบาย และวันที่ ซึ่งช่วยให้ผู้ใช้สามารถเพิ่ม แก้ไข และลบตำแหน่งงานได้ ทั้งหมดนี้เป็นการดำเนินการพื้นฐานที่คุณทำเมื่อทำงานกับข้อมูลบันทึกฐานข้อมูล แต่แอปพลิเคชันนี้ก้าวไปอีกขั้นหนึ่ง ตำแหน่งงานสามารถเปลี่ยนแปลงเป็นรูปแบบที่แก้ไขได้ โดยจะถูกบันทึกหรือลบออกจากฐานข้อมูลและแสดงในสถานะใหม่โดยไม่รีเฟรชเบราว์เซอร์และรบกวนการทำงานของผู้ใช้
ในบทความนี้ ฉันถือว่าคุณมีความเข้าใจพื้นฐานเกี่ยวกับ AJAX, MySQL และ PHP หรือภาษาฝั่งเซิร์ฟเวอร์ที่คล้ายกัน หากคุณยังไม่ได้สร้างออบเจ็กต์คำขอ XML HTTP คุณสามารถอ่านบทความของฉัน "วิธีใช้ AJAX" ก่อนได้ ต่อไป ให้เราหารือเกี่ยวกับปัญหาฐานข้อมูลก่อน
2. สร้างฐานข้อมูล
สิ่งแรกที่คุณต้องทำคือสร้างตารางฐานข้อมูลเพื่อจัดเก็บข้อมูลสำหรับตำแหน่งเหล่านี้ ฉันสร้างตาราง MySQL ชื่อ informit_ajax ซึ่งมีฟิลด์ ID, หัวเรื่อง, คำอธิบาย และวันที่ ซึ่งเป็นตัวแปรทั้งหมดที่จะปรากฏซ้ำๆ ในบทความนี้ นี่คือโค้ดสำหรับสร้างตาราง:
CREATE TABLE ′informit_ajax′ (
′id′ int(11) ไม่เป็นโมฆะ การเพิ่มอัตโนมัติ
'วันที่' วันที่และเวลาไม่เป็นค่าเริ่มต้น '0000-00-00 00:00:00'
ข้อความยาว 'คำอธิบาย' ไม่เป็นโมฆะ
′title′ varchar(100) ไม่ใช่ค่าเริ่มต้นที่เป็นโมฆะ '',
คีย์หลัก (′id′)
) TYPE=MyISAM;
คุณสามารถรันโค้ดนี้โดยใช้เครื่องมือสืบค้น MySQL หรือภาษาที่ใช้ในการพัฒนาแอปพลิเคชัน เมื่อเตรียมฐานข้อมูลแล้ว ขั้นตอนต่อไปคือการสร้างไฟล์ส่วนหน้าที่ส่งคำขอไปยังแบ็กเอนด์ PHP
3. ทำการร้องขอ
ไฟล์ดัชนี HTML ที่นี่เป็นตัวยึดข้อมูลอย่างง่าย - มันจะถูกวิเคราะห์จากฐานข้อมูล ไฟล์นี้มีการอ้างอิงถึงไฟล์ JavaScript และ CSS นอกจากนี้ยังมีตัวจัดการ onload ที่สร้างคำขอแรกและแท็ก div สามแท็ก:
เค้าโครง - ใช้เพื่อจัดกึ่งกลางการโหลดเนื้อหาของหน้า
- โหลดข้อความระหว่างการโหลดข้อมูลที่ร้องขอ ซึ่งจะได้รับโดย วัตถุ HTTPRequest
· โพสต์ที่ใช้เพื่อแสดงข้อมูลงานที่วิเคราะห์แต่ละรายการ
<head>
＜title><วิธีรวมฐานข้อมูลเข้ากับ AJAX</title>
＜link href="css/layout.css" rel="stylesheet" type="text/css" />
＜script src="js/request.js"></script/script>
＜script src="js/post.js"></script>
＜/หัว><
<body onload="javascript:makeRequest('services/post.php?method=get');">
<div id="layout" align="center">
＜div id="โพสต์"></div>
＜p＞＜input type="button" value="add a post" onmousedown="javascript:makeRequest('services/post.php?method=save');" />＜/p>
＜p＞＜div id="loading"＞＜/div><＜/p>
＜/div>
< ＜/body>
คำขอแรกจะถูกสร้างขึ้นเมื่อมีการโหลดเพจ คำขอนี้จะส่งข้อความ get ไปยังคลาส PHP ที่เราจะสร้างในภายหลัง แต่ก่อนอื่น เราจำเป็นต้องสร้างวิธีการวิเคราะห์สำหรับการตอบกลับของคำขอ ไฟล์คำขอ JavaScript จัดการงานพื้นฐานทั้งหมด เช่น การสร้างออบเจ็กต์ การส่งคำขอ และการตรวจสอบสถานะความพร้อม เมื่อได้รับการตอบกลับจากอ็อบเจ็กต์ Request ฉันจะใช้ไฟล์งาน JavaScript นี้เพื่อจัดการการสร้าง HTML ของงานเหล่านี้ วิธี onResponse ค่อนข้างมีประสิทธิภาพเนื่องจากจัดการการสร้างเพจ HTML สำหรับแต่ละตำแหน่งงานทั้งในเวอร์ชันข้อความและแบบฟอร์ม และวางตำแหน่งงานเหล่านั้นลงในแท็ก div ที่กำหนดเอง ด้วยวิธีนี้เราจึงสามารถสร้างตำแหน่งงานเหล่านั้นได้อย่างง่ายดายระหว่างการโต้ตอบกับผู้ใช้ วิธีนี้ทำให้เราสามารถสลับระหว่างเวอร์ชันข้อความและแบบฟอร์มของแต่ละโพสต์ ซึ่งสามารถทำได้โดยการคลิกลิงก์ "แก้ไขโพสต์นี้" ต่อไปนี้เป็นโค้ดสำหรับหน้า HTML ที่สร้างขึ้นสำหรับแต่ละตำแหน่ง คุณสามารถดูวิธีการทั้งหมดได้ในไฟล์ต้นฉบับดาวน์โหลดที่เกี่ยวข้องของบทความนี้
var html = "<div class='post' id='post_"+ i +"' "+ postDisplay +">"
+ "＜div class='title' id='title_"+ i +"'>"+ _title +"＜/div>"
+ "<div class='description' id='description_"+ i +"'>"+ _description +"＜/div>"
+ "＜div class='date' id='date_"+ i +"'>"+ _date +"＜/div>"
+ "＜a href="javascript:toggle('"+ i +"');"><แก้ไขโพสต์นี้</a><br/>"
+ "</div>"
+ "<div class='post' id='formPost_"+ i +"' "+ formPostDisplay +">"
+ "＜div class='title'＞＜input type='text' name='title' id='formTitle_"+ i +"' size='60' value='"+ _title +"'>＜/div >"
+ "<div class='description'>＜textarea type='text' id='formDescription_"+ i +"' wrap='virtual' cols='60' rows='15'>"+ _description +"＜/ พื้นที่ข้อความ>＜/div>"
+ "<div class='date'>"+ _date +"＜/div>"
+ "＜input type='button' name='cancel' value='cancel' onclick="javascript:toggle('"+ i +"');">"
+ "＜input type='button' name='delete' value='delete this post' onclick="javascript:deletePost("+ _id +");">"
+ "<input type='button' name='submit' value='save this post' onclick="javascript:saveNewPost("+ _id +","+ i +");">"
+ "</div>"
+ "<p>"nbsp;＜/p>";
เวอร์ชันข้อความของแต่ละโพสต์จะแสดงชื่อเรื่อง คำอธิบาย และวันที่ และลิงก์ "แก้ไขโพสต์นี้" เวอร์ชันแบบฟอร์มของแต่ละโพสต์มีปุ่มสามปุ่ม:
·"ยกเลิก ปุ่ม " - เพียงเปลี่ยนสถานะของโพสต์กลับไปเป็นเวอร์ชันข้อความ
· ปุ่ม "ลบโพสต์นี้" - ส่ง ID ของโพสต์ปัจจุบันไปยังออบเจ็กต์ PHP เพื่อลบออกจากฐานข้อมูล
· ปุ่ม "บันทึกโพสต์นี้" - อนุญาตให้ผู้ใช้บันทึกงานใหม่หรืองานแก้ไขลงในเซิร์ฟเวอร์
วิธีการหลักสำหรับการจัดการการสื่อสารคำขอฝั่งเซิร์ฟเวอร์คือวิธี onResponse, saveNewPost, DeletePost และ getPost นอกจากนี้ยังมีวิธี getter และ setter ที่เก็บดัชนีงานปฏิบัติการในปัจจุบัน . วิธีการจัดเตรียมค่าดัชนีปัจจุบันให้กับวิธีการหลักเหล่านี้เพื่อให้สามารถอัปเดตตำแหน่งที่ถูกต้องด้วยข้อมูลที่ถูกต้องตามดัชนีนั้น ต่อไปนี้เป็นข้อมูลสรุปโดยย่อสำหรับแต่ละวิธีหลัก (ไม่รวม onResponse เนื่องจากเราได้ดูฟังก์ชันการทำงานมาก่อนแล้ว) . คำอธิบายและตัวอย่างโค้ด:
· เมธอด saveNewPost ต่อไปนี้จะบันทึกโพสต์ใหม่โดยรวบรวมและส่งค่าอินพุตของฟอร์มไปยังออบเจ็กต์ PHP และตั้งค่าเมธอด getPost เป็นเมธอด onreadystatechange:
function saveNewPost(_id, _index){
var newDescription = document.getElementById("formDescription_"+ _index).value;
var newTitle = document.getElementById("formTitle_"+ _index).value;
setIndex(_ดัชนี);
sendRequest("services/post.php?method=save"id="+ _id +""title="+ newTitle +""description="+ newDescription, getPost);
}
· เมธอด getPost ด้านล่างเป็นวิธีการโทรกลับ - มีหน้าที่ในการอัปเดตโพสต์เดียวเมื่อได้รับการตอบกลับจากออบเจ็กต์ PHP:
function getPost(){
ถ้า (checkReadyState (คำขอ)) {
การตอบสนอง var = request.responseXML.documentElement;
var _title = response.getElementsByTagName('title')[getIndex()].firstChild.data;
var _description = response.getElementsByTagName('คำอธิบาย')[getIndex()].firstChild.data;
var _date = response.getElementsByTagName('date')[getIndex()].firstChild.data;
document.getElementById("title_"+ getIndex()).innerHTML = _title;
document.getElementById("คำอธิบาย_"+ getIndex()).innerHTML = _description;
document.getElementById("date_"+ getIndex()).innerHTML = _date;
สลับ(getIndex());
-
}
· เมธอด DeletePost ด้านล่างนี้จะส่งดัชนีปัจจุบันเป็นการร้องขอไปยังออบเจ็กต์ PHP ซึ่งท้ายที่สุดจะลบบันทึกในฐานข้อมูลและตอบสนองด้วยตำแหน่งที่อัปเดต:
function DeletePost(_id){
sendRequest("services/post.php?method=delete"id="+ _id, onResponse);
-
น่าแปลกที่ส่วนที่ซับซ้อนที่สุดได้จบลงแล้ว มาวิเคราะห์ส่วนที่สำคัญที่สุด - การโต้ตอบของฐานข้อมูล
4. โต้ตอบกับฐานข้อมูล
ในการโต้ตอบกับฐานข้อมูล คุณต้องสร้างวิธีการในการดึงข้อมูล การแทรก การแทนที่ และการลบตำแหน่ง ฉันเลือกสร้างคลาสโพสต์ด้วยวิธีรับ บันทึก และลบเพื่อจัดการกับการโต้ตอบเหล่านี้ คลาสนี้ยังมีการอ้างอิงถึงไฟล์การเชื่อมต่อฐานข้อมูล (ใช้เพื่อเชื่อมต่อกับฐานข้อมูล) คุณต้องแทนที่ล็อกอิน รหัสผ่าน และชื่อฐานข้อมูลด้วยข้อมูลฐานข้อมูลของคุณเอง
กำหนด ('DB_USER', 'USERNAME');
กำหนด ('DB_PASSWORD', 'รหัสผ่าน');
กำหนด ('DB_HOST', 'localhost');
กำหนด ('DB_NAME', 'ฐานข้อมูล');
$dbc = @mysql_connect (DB_HOST, DB_USER, DB_PASSWORD) OR die ('ไม่สามารถเชื่อมต่อกับ MySQL: ' . mysql_error() );
การอ้างอิงถึงไฟล์การเชื่อมต่อและชื่อของฐานข้อมูลอยู่ในตัวสร้างของคลาสนี้ Constructor ของคุณควรมีลักษณะคล้ายกับโค้ดต่อไปนี้:
function Post(){
need_once('mysql_connect.php');
$this->table = "informit_ajax";
}
วิธีการ dbConnect ต่อไปนี้มีหน้าที่ในการสร้างการเชื่อมต่อ - โดยส่งข้อมูลการเข้าสู่ระบบไปยังฐานข้อมูล วิธีการนี้จะถูกนำมาใช้ซ้ำในวิธีการหลักทั้งหมดก่อนที่จะทำการสืบค้นฐานข้อมูล:
function dbConnect(){
กำหนด ('LINK', mysql_connect (DB_HOST, DB_USER, DB_PASSWORD));
}
เมธอด get ต่อไปนี้จะวนซ้ำผ่านตารางฐานข้อมูล สร้างสตริง XML ตามแถวฐานข้อมูล และส่งกลับสตริงไปยังผู้ร้องขอ:
function get(){
$นี่->dbConnect();
$query = "SELECT * จาก $this->ตาราง เรียงตาม id";
$result = mysql_db_query (DB_NAME, $query, LINK);
$xml = "＜?xml version="1.0" encoding="ISO-8859-1" ?>n";
$xml .= "<โพสต์>n";
ในขณะที่($row = mysql_fetch_array($result)) {
$xml .= "<โพสต์>n";
$xml .= "＜id><" . $row['id'] .
$xml .= "<วันที่>" . $row['date'] .
$xml .= "＜title><![CDATA[" . $row['title'] . "]]>＜/title>n";
$xml .= "<คำอธิบาย>＜![CDATA[" . $row['description'] . "]]>＜/คำอธิบาย>n";
$xml .= "</โพสต์>n";
-
$xml .= "</โพสต์>";
mysql_close();
header("ประเภทเนื้อหา: application/xml; charset=UTF-8");
เสียงสะท้อน $xml;
}
วิธีการบันทึกต่อไปนี้บรรลุวัตถุประสงค์สองประการโดยจัดการกับการอัปเดตและตำแหน่งการแทรก:
function save($id, $title, $description){
$นี่->dbConnect();
$query = "SELECT * จาก $this->table โดยที่ id='$id'";
$result = @mysql_query ($แบบสอบถาม);
ถ้า (mysql_num_rows($ผล) > 0)
-
$query = "อัปเดต $this->table SET title='$title', description='$description', date=NOW() WHERE id='$id'";
$result = @mysql_query($query);
-
อื่น
-
$query = "ใส่ค่าลงใน $this->table (ชื่อ, คำอธิบาย, วันที่) ('$title', '$description', NOW())";
$result = @mysql_query($query);
-
mysql_close();
$นี่->รับ();
}
วิธีการลบด้านล่างมีหน้าที่รับผิดชอบในการลบตำแหน่งตามรหัสที่ส่งเป็นพารามิเตอร์ จากนั้นเรียกใช้เมธอด get เพื่อส่งคืนข้อมูลใหม่ไปยังไฟล์คำขอ:
function Delete($id){
$นี่->dbConnect();
$query = "ลบออกจาก $this->ตาราง โดยที่ id='$id'";
$result = @mysql_query($query);
mysql_close();
$นี่->รับ();
}
5. แอปพลิเคชันที่ครอบคลุม
เพื่อรวมส่วนต่างๆ ข้างต้นเข้าด้วยกัน จำเป็นต้องสร้างไฟล์อย่างง่ายเพื่อใช้เป็นสะพานเชื่อมการสื่อสารระหว่างคำขอ XML HTTP และออบเจ็กต์ PHP หน้าเว็บ ณ จุดนี้ไม่เพียงแต่สร้างออบเจ็กต์ PHP เท่านั้น แต่ยังรับการสืบค้นและส่งตัวแปรไปยังวิธีการที่สร้างขึ้นแบบไดนามิก - ในกรณีนี้ รับ บันทึก หรือลบ ตัวอย่างแบบสอบถามด้านล่างประกอบด้วย $method และตัวแปร $id, $title และ $description ที่เชื่อถือได้
need_once("../classes/Post.class.php");
$โพสต์ = โพสต์ใหม่();
$post->$method($id, $title, $description);
เราจะหารือเกี่ยวกับเทคนิคเหล่านี้เพิ่มเติมในอนาคต การพัฒนาเว็บไซต์ในปัจจุบันดูอ่อนเยาว์และมีชีวิตชีวาอีกครั้ง และเราโชคดีที่ได้เป็นส่วนหนึ่งของยุคเทคโนโลยีใหม่นี้