บทช่วยสอนเบื้องต้นอย่างง่ายของ Ajax+PHP

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-05-30 20:05:58

Ajax ประกอบด้วย HTML, เทคโนโลยี JavaScript™, DHTML และ DOM เป็นวิธีที่ยอดเยี่ยมในการแปลงอินเทอร์เฟซเว็บที่ยุ่งยากให้กลายเป็นแอปพลิเคชัน Ajax แบบโต้ตอบ สำหรับ Ajax ออบเจ็กต์หลักคือ XMLHttpRequest และการดำเนินการ Ajax ทั้งหมดจะแยกออกจากการดำเนินการของออบเจ็กต์นี้ไม่ได้

ก่อนอื่นเรามาทำความเข้าใจวิธีการสร้างวัตถุนี้ใน javascript:

varxmlHttp=newXMLHttpRequest();
บรรทัดโค้ดง่ายๆ นี้จะสร้างอ็อบเจ็กต์ XMLHttpRequest ใน Mozilla, Firefox, Safari, Opera และโดยพื้นฐานแล้วเบราว์เซอร์ใดๆ ที่ไม่ใช่ของ Microsoft ที่รองรับ Ajax ในรูปแบบหรือรูปแบบใดๆ แต่สำหรับ IE ซึ่งมีส่วนแบ่งการตลาด 70% วิธีการนี้เป็นไปไม่ได้ และเวอร์ชัน IE ที่แตกต่างกันมีวิธีการสร้างที่แตกต่างกัน ดังนั้นเราจึงจำเป็นต้องใช้สองวิธีต่อไปนี้ในการสร้างวัตถุภายใต้ IE:

ลอง {
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");//สำหรับเบราว์เซอร์รุ่นใหม่
} จับ (ผิดพลาด) {
พยายาม{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");//สำหรับเบราว์เซอร์รุ่นเก่า
} จับ (err2) {
xmlHttp=เท็จ;
-
-
ถึงกระนั้น เราไม่สามารถคาดเดาได้ว่าเบราว์เซอร์บางตัวอาจไม่สามารถสร้างวัตถุนี้ได้ ดังนั้นหากการสร้างไม่สำเร็จ เราจะต้องเพิ่มประโยค:

if(!xmlHttp){
alert("ไม่สามารถสร้างวัตถุ XMLHttpRequest ได้!");
-
การรวมกันคือ:

functiongetInfo(){
varnum=document.getElementById("num").value;//รับข้อมูลแบบฟอร์ม
varurl="/ajax/1.php?n="+หนี(หมายเลข);
xmlHttp.open("GET",url,true);//true ที่นี่แสดงถึงคำขอแบบอะซิงโครนัส
-
เมื่อกำหนดค่าด้วย open() คุณสามารถส่งคำขอได้ แม้ว่าคุณจะสามารถส่งข้อมูลโดยใช้ send() แต่คุณยังสามารถส่งข้อมูลผ่าน URL ได้ด้วย ที่จริงแล้ว ในคำขอ GET ส่วนใหญ่ การส่งข้อมูลโดยใช้ URL นั้นง่ายกว่ามาก ดังนั้นให้ใช้ null เป็นพารามิเตอร์ของ send() ที่นี่ ไฟล์ php ในที่อยู่ url คือไฟล์ php ที่ถูกร้องขอให้ประมวลผลข้อมูลที่ต้องการ เช่นเดียวกับเมื่อเราใช้ PHP ตามปกติ คุณสามารถเพิ่มและคั่นพารามิเตอร์หลายตัวด้วย &
xmlHttp.send(null);
หลังจากส่งข้อมูลแล้ว เราจำเป็นต้องใช้เมธอด callback เพื่อรับสถานะของเซิร์ฟเวอร์ ดังนั้นจึงใช้แอตทริบิวต์ onreadystatechange
xmlHttp.onreadystatechange=updatePage;
ต้องวางคำสั่งนี้ไว้หน้าคำสั่ง send() เพื่อให้คำสั่งดังกล่าวมีผลใช้บังคับ updatePage ที่ตามมาคือฟังก์ชันที่ประมวลผลข้อมูลที่ส่งคืน getInfo() ที่สมบูรณ์มีดังนี้:
functiongetInfo(){
varnum=document.getElementById("num").value;//รับข้อมูลแบบฟอร์ม
varurl="/ajax/1.php?n="+หนี(หมายเลข);
xmlHttp.open("GET",url,true);//true ที่นี่แสดงถึงคำขอแบบอะซิงโครนัส
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(null);
-
เรายังจำเป็นต้องเรียกใช้ฟังก์ชันนี้ใน html:
<inputname="num"id="num"onblur="getInfo()"type="text"/>
ต่อไปเราต้องเขียนฟังก์ชัน updatePage():

functionupdatePage(){
ถ้า(xmlhttp.readyState==4){
varresponse=xmlhttp.responseText;
document.getElementById("เมือง").value=response;
-
-
readyState ในโค้ดด้านบนคือสถานะที่ส่งคืนโดยเซิร์ฟเวอร์ สถานะ 4 นี้บ่งชี้ว่าคำขอถูกส่งและประมวลผลแล้ว responseText คือการได้รับข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์ จากนั้นกำหนดให้กับแบบฟอร์มที่มีรหัสเมืองผ่านจาวาสคริปต์
ณ จุดนี้ โปรแกรม Ajax แบบธรรมดาจะเสร็จสมบูรณ์ โค้ดจาวาสคริปต์ที่สมบูรณ์จะเป็นดังนี้:

varxmlHttp=false;
พยายาม{
xmlHttp=newXMLHttpRequest();
} จับ (ลองใช้ Microsoft){
พยายาม{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
} จับ (microsoft อื่น ๆ ) {
พยายาม{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
} จับ (ล้มเหลว) {
xmlHttp=เท็จ;
-
-
-
ถ้า(!xmlHttp){
alert("ไม่สามารถสร้างวัตถุ XMLHttpRequest ได้!");
-

functiongetInfo(){
varnum=document.getElementById("num").value;//รับข้อมูลแบบฟอร์ม
varurl="/ajax/1.php?n="+หนี(หมายเลข);
xmlHttp.open("GET",url,true);//true ที่นี่แสดงถึงคำขอแบบอะซิงโครนัส
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(null);
-

functionupdatePage(){
ถ้า(xmlhttp.readyState==4){
varresponse=xmlhttp.responseText;
document.getElementById("เมือง").value=response;
-
-
ยังมีไฟล์ php หายไปที่นี่ เนื่องจากวิธีการประมวลผลแตกต่างกันและวิธีการเขียนแตกต่างกันและนี่ไม่ใช่ส่วนหลักของ Ajax โค้ดจะไม่ถูกรวมไว้ที่นี่ เพียงจำไว้ว่า PHP ส่งออกและส่งคืนข้อมูลที่ต้องการ มัน

ไม่ได้รับการอัปเดตมาเป็นเวลานานแล้ว ฉันเห็นบทช่วยสอนนี้และเหมาะสำหรับผู้เริ่มต้น