AJAX หรือ Ajax คือ JavaScript และ XML แบบอะซิงโครนัส ใช้สำหรับแลกเปลี่ยนข้อมูลกับเซิร์ฟเวอร์และอัปเดตส่วนหนึ่งของหน้าเว็บโดยไม่ต้องโหลดหน้าเว็บใหม่ทั้งหมดทางฝั่งไคลเอ็นต์ การแสดงและการทำงานของหน้าเว็บที่มีอยู่จะไม่ถูกรบกวนเลยในขณะที่ทำการแลกเปลี่ยนและอัปเดตข้อมูล Ajax ยังถือเป็นกลุ่มของเทคโนโลยีที่มี HTML, CSS, DOM และ JavaScript ที่ใช้ในการมาร์กอัป จัดรูปแบบ และอนุญาตให้ผู้ใช้โต้ตอบกับข้อมูลบนเว็บเพจ ในบทความนี้จะแสดงวิธีการเขียนโปรแกรมอย่างง่ายใน Ajax ทีละขั้นตอนโดยใช้ Notepad++ จำเป็นต้องมีความรู้พื้นฐานเกี่ยวกับ HTML, DOM, JavaScript และเว็บเซิร์ฟเวอร์ภายในเครื่องหรือเว็บเซิร์ฟเวอร์ระยะไกล WampServer ใช้ในบทความนี้สำหรับการทดสอบ
ขั้นตอน
วิธีที่ 1 จาก 2: การเข้ารหัส
ขั้นตอนที่ 1. เตรียมรูปภาพสำหรับเขียนโปรแกรม Ajax
บันทึกรูปภาพในโฟลเดอร์เดียวกับที่คุณจะบันทึกไฟล์ html และข้อความที่แสดงโปรแกรม Ajax ในบทความนี้ ไดเร็กทอรี "ProgramInAjax" ได้รับการตั้งค่าภายในโฟลเดอร์ "wamp" ใต้ไดเร็กทอรี "www" ที่คุณติดตั้ง WampServer
ขั้นตอนที่ 2 เปิดตัวแก้ไขข้อความใด ๆ
Notepad++ ถูกใช้เป็นตัวแก้ไขข้อความในบทความนี้
ขั้นตอนที่ 3 สร้างไฟล์ใหม่ในโปรแกรมแก้ไขข้อความ
พิมพ์ต่อไปนี้:
โอ้โอ้! ดอกไม้สีเหลืองหายไปไหน?
คุณสามารถพิมพ์สิ่งที่คุณต้องการภายในแท็ก html
ขั้นตอนที่ 4. บันทึกไฟล์เป็นเอกสารข้อความชื่อ “ajax-data.txt
” ที่จริงแล้ว คุณสามารถตั้งชื่อไฟล์อะไรก็ได้ที่คุณต้องการ แต่ต้องแน่ใจว่าคุณป้อนชื่อไฟล์เดียวกันกับการเข้ารหัสในบรรทัดนี้:
xmlhttp.open("GET", "ajax-data.txt", จริง);
อย่างไรก็ตาม แท็ก HTML ใช้สำหรับส่วนหัวเพื่อให้ดูใหญ่ขึ้นและมองไม่เห็นมากขึ้น
ขั้นตอนที่ 5. สร้างไฟล์ใหม่สำหรับหน้าเว็บ
ไฟล์นี้ใช้สำหรับไฟล์ HTML เพื่อดูโปรแกรม Ajax ในเว็บเบราว์เซอร์
ขั้นตอนที่ 6 คัดลอกรหัสต่อไปนี้:
โปรแกรม Ajax แรกของฉันโดย Me ใส่รหัส Ajax ด้านล่างคลิกที่ปุ่มด้านล่างเพื่อทำให้ดอกไม้หายไป
ขั้นตอนที่ 7 บันทึกไฟล์
คลิกปุ่มบันทึกบนแถบเมนู กล่อง "บันทึกเป็น" เปิดขึ้น ป้อนชื่อสำหรับเอกสารของคุณ ในบทความนี้ ชื่อของไฟล์คือ “index”
ขั้นตอนที่ 8 คลิกลูกศรแบบเลื่อนลงเพื่อเลือกนามสกุลไฟล์
ที่ช่อง "บันทึกเป็นประเภท" ให้คลิกลูกศรแบบเลื่อนลงเพื่อเลือกนามสกุลไฟล์
ขั้นตอนที่ 9 เลือก “ไฟล์ภาษามาร์กอัปข้อความไฮเปอร์
” ตรวจสอบให้แน่ใจว่ามี “html” อยู่ในวงเล็บ คลิกบันทึกหลังจากเลือก "html"
ขั้นตอนที่ 10. ทดสอบไฟล์ HTML ในเว็บเบราว์เซอร์
เปิดหน้าเว็บในเว็บเบราว์เซอร์ ไปที่ "เรียกใช้" ที่แถบเมนูด้านบน คลิกและเลือก "เปิดใน Chrome" หรือเบราว์เซอร์ที่ติดตั้งในระบบของคุณ Google Chrome ใช้สำหรับการทดสอบในบทความนี้ คุณอาจมีเบราว์เซอร์อื่นติดตั้งอยู่ใน Notepad++ คุณสามารถเลือกเบราว์เซอร์ที่คุณชื่นชอบได้ อีกทางเลือกหนึ่งคือ คุณสามารถคลิกไอคอน WampServer ที่ทาสก์บาร์ที่ด้านล่างของหน้าจอและเลือก "Localhost" คุณควรเห็นไดเร็กทอรีของคุณที่นั่น และคลิกไฟล์ดัชนี
ขั้นตอนที่ 11 คลิกที่ปุ่มด้านล่างภาพเพื่อทดสอบสคริปต์
ขั้นตอนที่ 12. หน้าเว็บสุดท้ายของคุณ
หน้าเว็บของคุณควรได้รับการรีเฟรชด้วยข้อมูลที่คุณป้อนลงในไฟล์ข้อความในตอนเริ่มต้น ดอกไม้และส่วนหัวควรแทนที่ด้วยส่วนหัวใหม่ที่เรียกว่า “โอ้ โอ้! ดอกไม้สีเหลืองหายไปไหน”
วิธีที่ 2 จาก 2: คำอธิบายโค้ด
ขั้นตอนที่ 1. ส่วนของร่างกาย
เนื้อหาของ HTML มีส่วน "div" และปุ่มเดียว ส่วนนี้จะใช้เพื่อแสดงข้อมูลที่ส่งคืนจากเซิร์ฟเวอร์ ปุ่มเรียกใช้ฟังก์ชันชื่อ “loadXMLDoc(),” หากมีการคลิก
โปรแกรม Ajax แรกของฉันโดย Me รูปภาพไปที่นี่เพื่อทดสอบโปรแกรม Ajaxคลิกที่ปุ่มด้านล่างเพื่อทำให้ดอกไม้หายไป
ปุ่มไปที่นี่
ขั้นตอนที่ 2. ส่วนหัว
ส่วนหัวของไฟล์ HTML มีแท็กสคริปต์ซึ่งมีฟังก์ชัน “loadXMLDoc()”
โปรแกรม Ajax แรกของฉันโดย Me ใส่รหัส Ajax ด้านล่าง
ขั้นตอนที่ 3 คำอธิบายเพิ่มเติม
สิ่งที่สำคัญที่สุดของ Ajax คือวัตถุ XMLHttpRequest มันถูกใช้เพื่อแลกเปลี่ยนข้อมูลกับเซิร์ฟเวอร์และเบราว์เซอร์ที่ทันสมัยทั้งหมดรองรับวัตถุ
- ไวยากรณ์ในการสร้างวัตถุ XMLHttpRequest() คือ variable=new XMLHttpRequest(); แต่ในขณะเดียวกัน ไวยากรณ์ในการสร้างเวอร์ชันเก่าของ Internet Explorer (IE5 และ IE6) ที่ใช้วัตถุ ActiveX คือ variable=new ActiveXObject("Microsoft. XMLHTTP");
- เพื่อจัดการกับเบราว์เซอร์สมัยใหม่ทั้งหมด จำเป็นต้องตรวจสอบว่าเบราว์เซอร์สนับสนุนอ็อบเจ็กต์ XMLHttpRequest หรือไม่ ถ้าเป็นเช่นนั้น จะสร้างวัตถุ XMLHttpRequest หากไม่เป็นเช่นนั้น มันจะสร้างวัตถุ ActiveX สำหรับมัน
- จากนั้นจะส่งคำขอไปยังเซิร์ฟเวอร์ วิธีการของวัตถุ XMLHttpRequest ที่เรียกว่า “open()” และ “send()” จะถูกใช้ xmlhttp.open("GET", "ajax_info.txt", จริง); xmlhttp.send();.
เคล็ดลับ
- อีกตัวเลือกหนึ่งในการดูตัวอย่างผลลัพธ์ คุณสามารถเปิดเบราว์เซอร์ที่คุณชื่นชอบและพิมพ์ “localhost/ProgramInAjax” ในแถบที่อยู่เว็บเพื่อแสดงหน้าเว็บ คุณควรจะสามารถเห็นหน้าเว็บได้หากคุณตั้งชื่อไฟล์ HTML เป็น “index.html”
- บันทึกไฟล์ html ของคุณบ่อยขึ้นระหว่างการทำงาน การกด Ctrl และ S พร้อมกันสำหรับผู้ใช้ Window จะช่วยประหยัดเวลามากขึ้น
- อย่าลืมเพิ่มไฟล์ HTML ที่บันทึกไว้ในตำแหน่งเดียวกันกับไฟล์ข้อความรูปภาพและข้อมูลของคุณ
- เมื่อคุณตั้งชื่อไฟล์ จะคำนึงถึงขนาดตัวพิมพ์เมื่อคุณเพิ่มชื่อเหล่านั้นลงในโค้ด ตัวอย่างเช่น “myImage” ต่างจาก “MyImage” หรือ “myimage”
