บทนำสู่ Ajax Calls

เผยแพร่แล้ว: 2021-11-01

ยินดีต้อนรับสู่การแนะนำ Ajax ของเรา! ในบทความนี้เราจะพูดถึงพื้นฐานของ Ajax และวิธีการใช้ในตัวอย่างในโลกแห่งความเป็นจริง เราจะดูตัวอย่างการโทร Ajax-PHP ด้วย แม้ว่าเราได้พยายามอย่างเต็มที่เพื่อทำให้บทช่วยสอนนี้ง่ายขึ้น แต่ความรู้เกี่ยวกับ Javascript, PHP และ WordPress นั้นสำคัญมากในการทำความเข้าใจสิ่งต่อไปนี้อย่างถ่องแท้ ด้วยสิ่งนี้ เรามาเริ่มกันเลย!

อาแจ็กซ์คืออะไร?

Ajax ย่อมาจาก JavaScript และ XML แบบอะซิงโครนัส

Ajax ไม่ใช่ภาษาโปรแกรม แต่เป็นอาร์เรย์ของเทคนิคที่รวมเทคโนโลยีเว็บที่มีอยู่เพื่อสร้างเว็บแอปพลิเคชันที่ดีขึ้น

ปรับปรุงเว็บไซต์ด้วย Ajax

Ajax มีประโยชน์มากมาย หนึ่งในฟังก์ชันยอดนิยมเหล่านี้คือการโทร Ajax การเรียก Ajax อนุญาตให้เว็บไซต์อัปเดตเนื้อหาบางส่วนตามการกระทำของผู้ใช้โดยไม่จำเป็นต้องโหลดหน้าซ้ำ ในทางตรงกันข้ามกับคำขอ HTTP ปกติ เราไม่ต้องรอให้เซิร์ฟเวอร์ตอบกลับเพื่อโต้ตอบกับเว็บไซต์ต่อไป

ตามเนื้อผ้า การร้องขอ HTTP จะทำไปยังเว็บเซิร์ฟเวอร์และหลังจากประมวลผลแล้ว เซิร์ฟเวอร์จะส่งคืนเอาต์พุตที่อัปเดตในการโหลดหน้าใหม่ ในคำขอ Ajax ลำดับของการกระทำนี้จะเกิดขึ้นเบื้องหลังแบบอะซิงโครนัสเพื่อไม่ให้ผู้ใช้ถูกขัดจังหวะ ที่ปรับปรุงการโต้ตอบและการตอบสนองและทำให้เว็บไซต์มีไดนามิกมากขึ้น

ฟังก์ชัน Ajax Call ทำงานอย่างไร?

การโทร Ajax เริ่มต้นด้วยผู้ใช้ปลายทางดำเนินการที่ส่วนหน้าของเว็บไซต์ (เช่น การคลิกปุ่ม) เมื่อดำเนินการดังกล่าว เหตุการณ์ Javascript จะถูกทริกเกอร์และผู้ฟังจะเรียกใช้ฟังก์ชัน

ภายในฟังก์ชัน การเรียก Ajax เริ่มทำงาน และด้วยความช่วยเหลือของ XML ข้อมูลจะถูกจัดแพ็คเกจและคำขอจะถูกส่งไปยังสคริปต์เซิร์ฟเวอร์

ไม่มี OTE: ปัจจุบันนี้ JSON เป็นที่ต้องการมากกว่า XML ในเกือบทุกโอกาส เนื่องจากเร็วกว่า อ่านและตั้งโปรแกรมได้ง่ายขึ้น และอื่นๆ

ภายในสคริปต์ คำขอจะได้รับการประมวลผลโดยใช้ภาษาสคริปต์ฝั่งเซิร์ฟเวอร์ เช่น PHP, Java, Ruby, Python เป็นต้น

การตอบสนองจะถูกส่งกลับไปยังไคลเอ็นต์ และฟังก์ชันการเรียกกลับจะอัปเดตส่วนเนื้อหาที่สอดคล้องกับข้อมูลที่ได้รับ

มาดูกันว่ามันทำงานอย่างไรในตัวอย่าง

ตัวอย่างการโทร Ajax อย่างง่าย

มาสร้างแอปพลิเคชั่น Search ที่ให้คุณดูผลการค้นหาแบบเรียลไทม์เมื่อค้นหาผ่านรายชื่อบทความ

เราจะใช้ PHP เป็นภาษาสคริปต์ฝั่งเซิร์ฟเวอร์ และจะแนะนำคุณเกี่ยวกับเรื่องนี้ จากมุมมองของผู้ใช้ปลายทาง

ขั้นตอนที่ 1: แบบฟอร์ม HTML

อันดับแรก เราต้องการกล่องข้อความที่ผู้ใช้จะกรอกข้อความและแสดงผลลัพธ์ที่ไหนสักแห่ง มาสร้างรูปแบบ HTML อย่างง่าย และองค์ประกอบที่จะแสดงผล

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> </body> </html>

ขั้นตอนที่ 2: ฟังก์ชัน Javascript

เมื่อผู้ใช้ป้อนข้อความ เราต้องการดูผลลัพธ์แบบเรียลไทม์ หากมี เราจะใช้เหตุการณ์ onkeyup Javascript ที่เรียกใช้ฟังก์ชันเมื่อผู้ใช้ปล่อยคีย์บนแป้นพิมพ์

ฟังก์ชันจะต้องรับข้อความปัจจุบันเป็นพารามิเตอร์เพื่อดำเนินการต่อ

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> <script type="text/javascript"> function foundArticles(str) { } </script> </body> </html>

มาเติมฟังก์ชันกัน

ขั้นตอนที่ 3: คำขอ

ภายในฟังก์ชัน ก่อนอื่นเราต้องสร้างวัตถุ XMLHttpRequest เพื่อโต้ตอบกับเซิร์ฟเวอร์ จากนั้นเรียกใช้ฟังก์ชันอื่นที่จะทำบางสิ่งด้วยค่าที่ส่งผ่านใน foundArticles()

ในกระบวนการที่อธิบายไว้ข้างต้น การโต้ตอบกับเซิร์ฟเวอร์ทำได้โดยใช้ตัวจัดการเหตุการณ์ Javascript XMLHttpRequest.onready statechange ซึ่งจะถูกเรียกเมื่อคุณสมบัติ readyState เปลี่ยนไป ขอชี้แจงขั้นตอนเหล่านี้เพิ่มเติม:.

  • คุณสมบัติ readyState ส่งคืนสถานะ XMLHttpRequest ที่ไคลเอ็นต์อยู่
  • เมื่อใดก็ตามที่ readyState เปลี่ยนแปลง เหตุการณ์ readystatechange จะเริ่มทำงาน
  • คุณสมบัติ onreadystatechange ประกอบด้วยตัวจัดการเหตุการณ์ที่จะเรียกเมื่อเหตุการณ์ readystatechange เริ่มทำงาน

ขั้นตอนที่ 4: จะทำอย่างไรกับคำขอ

ตอนนี้ เราต้องทำอะไรบางอย่างเมื่อการดำเนินการเสร็จสิ้น และหลังจากปรึกษาว่าสถานะใดบ้างที่พร้อมใช้งาน เราตั้งค่านี้เป็นสถานะ 4

ดังนั้น เมื่อการดำเนินการเสร็จสิ้น ควรแทนที่ข้อความภายในองค์ประกอบ HTML ที่มี id txtHint ด้วยการตอบสนองของเซิร์ฟเวอร์ นี่คือเวลาที่เราต้องใช้คุณสมบัติ responseText ซึ่งส่งคืนข้อความที่ได้รับจากเซิร์ฟเวอร์หลังจากส่งคำขอ

ตอนนี้ มาเพิ่มโค้ดใน foundArticles() ที่สอดคล้องกับสิ่งที่เราเพิ่งอธิบายไปข้างต้น

 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } }

หมายเหตุ: เราต้องชี้ให้เห็นว่าการแสดง HTML แบบนี้โดยไม่หลบหนี ถือเป็นแนวทางปฏิบัติด้านความปลอดภัยที่แย่ และเราทำเช่นนี้เฉพาะเพื่อประโยชน์ของบทช่วยสอนนี้เท่านั้น เพื่อให้โค้ดมีความเรียบง่ายที่สุด เพื่อความปลอดภัย อย่าใช้รหัสใด ๆ ที่ให้ไว้ในบทความนี้เพื่อการใช้งานจริง!

ต่อไปเราต้องส่งคำขอไปยังเซิร์ฟเวอร์และใช้ข้อมูลที่ส่งคืน

ขั้นตอนที่ 5: ข้อมูล

ในตัวอย่างนี้ ข้อมูลจะถูกเก็บไว้ในไฟล์ PHP เราสร้างไฟล์ data.php ภายใต้โฟลเดอร์เดียวกันและรวมรหัสต่อไปนี้:

 <?php // We fill in the posts array with the data to look up to $posts = array( "C Language course", "C++ course", "About Bootstrap", "Learn to write HTML", "All about SS", "CSS3 course", "JAVA course", "JavaScript tutorials", "Learn PHP", "MySQL examples", "Learn Python", "AngularJS", "Photoshop Tutorials", "C#", "ASP.NET", "SAP", "ORACLE", "Wordpress CMS for beginners", "Build your own Android app", "All about SEO", "Illustrator", "Flash", "Action Script" ); // We get the requested value from the URL and store it in a variable $req = $_REQUEST["req"]; $autocomplete = ""; // Iterate $posts if $req is not empty if ($req !== "") { $req = strtolower($req); foreach($posts as $name) { $lowname = strtolower($name); if ( strpos( $lowname , $req ) !== false ) { $autocomplete = $name; } } } // Output echo $autocomplete === "" ? "no suggestion" : $autocomplete;

อย่าสับสนเกี่ยวกับ $req = $_REQUEST["req"]; ไลน์. นี่คือวิธีที่สคริปต์ดึงข้อความค้นหาภายในไฟล์ custom.js ที่เราจะดูในไม่ช้า

ขั้นตอนที่ 6: วิธีการขอ

เราจะใช้เมธอด open() ของออบเจ็กต์ XMLHttpRequest เพื่อเริ่มต้นคำขอ และใช้เมธอด send() เพื่อแลกเปลี่ยนข้อมูลกับเซิร์ฟเวอร์

พารามิเตอร์ที่เราใช้สำหรับเมธอด open() คือ:

  • วิธีการ. หมายถึงวิธีการขอ HTTP ( “GET”, “POST”, “PUT”, “DELETE” เป็นต้น)
  • URL ที่จะส่งคำขอไปที่
 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } xmlhttp.open("GET", "data.php?req=" + str, true); xmlhttp.send(); }

อย่างที่คุณเห็น เมธอด open() เริ่มต้นคำขอ GET ไปยัง “data.php?req=” + str URL

URL จะถูกใช้โดย $req = $_REQUEST[“req”]; ตัวแปรภายในไฟล์ data.php เพื่อดึงค่า

มาดูตัวอย่างคำขอกัน:

ณ จุดนี้แบบฟอร์มควรทำงานอย่างถูกต้อง หากคุณป้อนคำว่า "หลักสูตร" ผลลัพธ์ควรเป็น:

“หลักสูตรภาษาซี”,
“หลักสูตร C++”,
“หลักสูตร CSS3”,
“หลักสูตรจาวา”.

บทสรุป

นี่เป็นตัวอย่างง่ายๆ ของคำขอ Ajax ซึ่งเป็นเทคนิคที่นิยมใช้ในการสร้างเว็บไซต์ แม้ว่าจะเป็นเรื่องง่าย แต่หวังว่าเราจะนำคุณเข้าใกล้การทำความเข้าใจการกำหนดเส้นทางในคำขอดังกล่าวมากขึ้น ซึ่งอาจช่วยให้คุณเริ่มเขียนโค้ดของคุณเองได้ ในบทความถัดไป เราจะกลับมาที่ Ajax อีกครั้งในสภาพแวดล้อมของ WordPress ดังนั้นคอยติดตาม!