วิธีการสร้างคำขอ AJAX ด้วย jQuery สำหรับ HTML5 และ CSS3 การเขียนโปรแกรม - dummies

วัตถุประสงค์หลักของไลบรารี AJAX เช่น jQuery คือการทำให้แอ็พพลิเคชัน AJAX ง่ายขึ้นสำหรับโปรแกรมเมอร์ HTML5 และ CSS3 ยากที่จะเชื่อได้ว่าวิธีนี้สามารถทำได้ง่ายกับ jQuery

วิธีใส่ไฟล์ข้อความด้วย AJAX

ดูโค้ดนี้:

ajax html $ (เอกสาร) พร้อม (getAJAX); function getAJAX () {$ ("# output"). โหลด ("hello. txt");}

HTML สะอาดมาก มันก็สร้าง div ว่างเปล่าที่เรียกว่า output

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

กลไก load () ที่อธิบายไว้ที่นี่เหมาะสำหรับสถานการณ์พื้นฐานที่คุณต้องการโหลดข้อความสั้นหรือ HTML ลงในหน้าเว็บของคุณ

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

CMS โดยใช้ AJAX $ (init);

ฟังก์ชัน init () {$ ("# heading") โหลด ("หัว. html"); $ ("# เมนู") โหลด ("เมนู. html"); $ ("# content1") โหลด ("story1. html"); $ ("# content2") โหลด ("story2. html"); $ ("# ท้าย") โหลด ("ท้าย. html");};

หน้าเว็บไม่มีเนื้อหา!


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


ไม่ใช่เนื้อหาใดเนื้อหาหนึ่งหน้าประกอบด้วยตัวยึดตำแหน่งที่มีรหัส ใช้ jQuery


ไลบรารี jQuery ใช้เพื่อลดภาระการโหลดข้อมูลผ่านทางสาย AJAX เนื้อหาทั้งหมดอยู่ในไฟล์แยกต่างหาก


ดูผ่านไดเร็กทอรีและคุณสามารถดูไฟล์ HTML ที่เรียบง่ายซึ่งมีส่วนเล็ก ๆ ของหน้า ตัวอย่างเช่น story1. html มีลักษณะดังนี้: Book I - การสร้างมูลนิธิ HTML
ฐานข้อมูล Sound HTML

การตรวจสอบทั้งหมด
การเลือกเครื่องมือ
การจัดการข้อมูลด้วยรายการและตาราง
การเชื่อมต่อกับลิงค์
การเพิ่มรูปภาพ
การสร้างฟอร์ม




init () วิธีการทำงานบน เอกสารพร้อม เมื่อเอกสารพร้อมแล้วหน้านี้จะรันเมธอด init () วิธีการ


init () ใช้การเรียก AJAX เพื่อโหลดเนื้อหาแบบไดนามิก ไม่มีอะไรมากไปกว่าวิธีการในการโหลด jQuery () วิธีนี้อาจใช้งานได้มาก แต่ก็มีลักษณะที่น่าสนใจมาก:


หากคุณกำลังสร้างเว็บไซต์ขนาดใหญ่ที่มีหน้าเว็บหลายหน้าคุณมักต้องการออกแบบรูปลักษณ์และใช้ซ้ำในลักษณะเดียวกัน แม่แบบซ้ำ ๆ


นอกจากนี้คุณอาจมีบางองค์ประกอบที่จะสอดคล้องกันในหลาย ๆ หน้า คุณสามารถสร้างเอกสารดีฟอลต์และคัดลอกและวางเอกสารลงในแต่ละหน้าได้ แต่วิธีนี้ก็ไม่เป็นระเบียบ เกิดอะไรขึ้นถ้าคุณได้สร้าง 100 หน้าตามเทมเพลตแล้วต้องเปลี่ยนส่วนหัว คุณต้องทำการเปลี่ยนแปลงใน 100 หน้าต่างๆ


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


ต่อไปนี้คือวิธีที่คุณใช้แนวทางแบบนี้:
สร้างเทมเพลตเดียวสำหรับทั้งไซต์ของคุณ


สร้าง HTML และ CSS ขั้นพื้นฐานเพื่อจัดการรูปลักษณ์โดยรวมของเว็บไซต์ของคุณทั้งหมด อย่ากังวลกับเนื้อหา เพียงแค่สร้างตัวยึดตำแหน่งสำหรับส่วนประกอบทั้งหมดของหน้าเว็บของคุณ ตรวจดูให้แน่ใจว่าได้ให้ ID แต่ละองค์ประกอบและเขียน CSS เพื่อให้ได้ตำแหน่งตามที่คุณต้องการ
เพิ่มการสนับสนุน jQuery


สร้างลิงก์ไปยังไลบรารี jQuery และสร้างวิธีการเริ่มต้น init () ใส่รหัสเพื่อจัดการกับส่วนต่างๆของหน้าเว็บที่จะสอดคล้องกัน
ทำซ้ำแม่แบบ


หลังจากที่คุณทราบว่าเทมเพลตจะทำงานอย่างไรให้ทำสำเนาสำหรับแต่ละหน้าในไซต์ของคุณ
ปรับแต่งแต่ละหน้าโดยการเปลี่ยน


init () ฟังก์ชัน ส่วนหนึ่งของเทมเพลตที่เปลี่ยนเป็นฟังก์ชัน init () หน้าเว็บทั้งหมดของคุณจะเหมือนกันยกเว้นจะมีฟังก์ชัน init () ที่ปรับแต่งเองซึ่งจะโหลดเนื้อหาที่แตกต่างกัน
โหลดเนื้อหาแบบกำหนดเองลงใน div ด้วย AJAX


ใช้ฟังก์ชัน init () เพื่อโหลดเนื้อหาลงในแต่ละ div
นี่เป็นวิธีที่ดีในการจัดการเนื้อหา แต่ก็ไม่ใช่ระบบการจัดการเนื้อหาแบบเต็มรูปแบบ แม้ AJAX จะไม่อนุญาตให้คุณ


จัดเก็บเนื้อหา บนเว็บมากนัก ระบบการจัดการเนื้อหาที่ซับซ้อนมากขึ้นยังใช้ฐานข้อมูลแทนไฟล์เพื่อจัดการกับเนื้อหา คุณต้องมีการเขียนโปรแกรมฝั่งเซิร์ฟเวอร์ (เช่น PHP) และมักจะเป็นฐานข้อมูล (เช่น mySQL) เพื่อจัดการงานประเภทนี้