ผสม Ajax เป็น HTML ด้วย Intercooler.js
มันง่ายกว่าที่เคย เพิ่ม Ajax ในเว็บไซต์ใด ๆ. อันที่จริงมันค่อนข้างธรรมดาในการสร้างเว็บไซต์ทั้งหมด ตามคำขอของ Ajax เรียกว่า แอปหน้าเดียว (หรือ SPA).
อย่างไรก็ตามสิ่งนี้จำเป็นต้องใช้ jQuery นิดหน่อยและการถกเถียงทางเทคนิคบางอย่าง อัปเดตเนื้อหาของหน้า. หากคุณต้องการเพียงบางส่วน ฟังก์ชันพื้นฐานของอาแจ็กซ์ คุณสามารถใช้ได้ intercooler.js เพื่อผสมลงใน HTML ของคุณ.
Intercooler ให้คุณเขียนคุณสมบัติ HTML ที่ โดยทั่วไปจะมี URL คำขอ Ajax. เมื่อผู้ใช้คลิกลิงก์บางลิงค์คุณสามารถกำหนดได้ คำขอ Ajax ทำงาน แทนการกระทำคลิกปกติ.
ทั้งหมดนี้ อาศัยข้อมูล HTML5- * เช่น IC-โพสต์ไป. คุณสามารถเพิ่มแอททริบิวนี้ให้กับปุ่มหรือลิงค์สำหรับเชื่อมโยง เชื่อมต่อกับ jQuery โดยอัตโนมัติ สำหรับคำขอ Ajax POST.
มีหน้าจริง ๆ เต็มไปด้วยคุณสมบัติเหล่านี้ บนเว็บไซต์ปลั๊กอิน นี่เป็นเรื่องเล็กน้อย รหัสตัวอย่าง เพื่อดูว่ามันมีลักษณะ:
คลิกฉัน!
สิ่งนี้จะ ส่งคำขอ Ajax POST ไปยัง URL / buton_click, และ โหลดการตอบสนอง ลงในองค์ประกอบภาชนะ Intercooler เป็นห้องสมุดที่ค่อนข้างเรียบง่ายและทรงพลังอย่างเหลือเชื่อเมื่อคุณเข้าใจวิธีการทำงาน.
ได้รับสิ่งนี้จะไม่แก้ปัญหา Ajax ทั้งหมดของคุณเพราะมัน ไม่สามารถอัปเดตพื้นที่อื่น ๆ ของหน้าโดยอัตโนมัติ. มันยัง ไม่สามารถผนวกคุณสมบัติที่กำหนดเองได้มากเกินไป โดยไม่ทำให้หน้าช้าลงดังนั้นจึงมีรายละเอียด สปา ควรจริง ๆ ใช้รหัส Ajax ที่กำหนดเอง.
Intercooler.js เสนอ วิธี semantic เพิ่มเติมสำหรับการเขียนรหัส Ajax เพื่อให้มันโหลดและยังมีทางเลือกดั้งเดิม.
ไปยัง ติดตั้งอินเตอร์คูลเลอร์ คุณแค่ต้องการ สำเนาของ jQuery พร้อมกับ สำเนาของไลบรารีอินเตอร์คูลเลอร์ ซึ่งสามารถพบได้ใน GitHub คุณสามารถทำได้ ทดสอบโดยไม่ต้องดาวน์โหลด ไฟล์ใด ๆ โดยใช้ jQuery CDN และ Local Intercooler CDN.
ใส่ทั้งสองเข้าไป >
ลองดูที่ หน้าสาธิต เพื่อดู รายการเต็มของการสาธิต คุณสามารถเล่นกับ ฉันชอบการสาธิต 'คลิกเพื่อแก้ไข' โดยเฉพาะเพราะมันแสดงให้เห็นว่าอะไรเป็นไปได้และคุณสามารถใช้ปลั๊กอินนี้ได้ไกลแค่ไหน.
หากคุณสนใจ เรียนรู้เพิ่มเติม ตรวจสอบ คู่มืออ้างอิง เต็มไปด้วยคุณลักษณะ HTML ของอินเตอร์คูลเลอร์ แต่ละอัน, แต่ละคน ทำการกระทำที่แตกต่าง ดังนั้นจึงเป็นสิ่งสำคัญที่จะศึกษาพวกเขาทั้งหมดและดูว่าอะไร เหมาะที่สุด สำหรับสถานการณ์ของคุณ.
โดยธรรมชาติคุณสามารถค้นหา รหัสที่มาทั้งหมด ฟรีที่ GitHub พร้อมกับ คู่มือการติดตั้งโดยย่อ.
