Ajax คืออะไร แล้วมันใช้ยังไง? – ตอนที่ 1 ภาคทฤษฎี

มันคืออะไรน่ะ?

Ajax (ย่อมาจาก Asynchronous JavaScript and XML) เป็นเทคนิคการเขียนโปรแกรมแบบนึง ไม่ใช่ภาษาโปรแกรมใหม่อย่างที่บางคนเข้าใจ

จากชื่อเต็มของมัน จะสังเกตว่ามีคีย์เวิร์ด 2 ตัวคือ

• (Asynchronous) JavaScript
• XML

ก็คือ

การใช้ JavaScript แบบ Asynchronous (แบบคำสั่งไม่เป็นลำดับขั้นหรือไม่ sync. กันนั่นแหละ) และใช้ XML ด้วย

งงสินะ?

งั้นลองคิดว่าเรากำลังเล่นเว็บอยู่ แล้วเราอยากกดลิงค์ไปอ่านหน้าต่อไป จากหน้า 1 ไปหน้า 2

ขอเทียบการที่เบราเซอร์สามารถแสดงผลเนื้อหาเว็บเป็นคนละกัน มีคน 2 คนกำลังยกป้าย (เว็บ) "เบอร์1" เอาไว้

จากนั้นเราก็บอกได้เจ้าสองนายนี่ไปหยิบป้าย "เบอร์2" ซึ่งมันถูกเก็บอยู่ในบ้านที่ชื่อว่า Server มาให้หน่อย

เจ้าคนแรกเมื่อได้ยินดังนั้น มันก็ทิ้งป้ายที่มันถืออยู่ทันทีเพื่อจะเดินกลับไปเอาป้ายเบอร์ถัดไปในบ้าน Server ในจังหวะนี้ เราจะไม่เห็น Content ของป้าย "เบอร์1" เพราะคนถือมันวิ่งไปโน่นแล้ว

กลับกัน สำหรับคนถือป้ายที่ใช้เทคนิค Ajax! (ถือป้ายก็ต้องมีเทคนิคนะ ฮา) ก็ได้เรียกผู้ช่วยมาอีกคนนึง แล้วเขาก็จะใช้เจ้าผู้ช่วยคนนี้ให้เดินไปเอาของให้หน่อย นั่นคือป้าย "เบอร์2" นั่นแหละนะ

ถ้าคุณดูฝั่งที่เป็นแบบธรรมดา ตอนนี้ก็จะไม่เห็นอะไร (เทียบกับเว็บก็เป็นช่วงที่หน้าเพจกลายเป็นสีขาวในช่วงรอโหลด ซึ่งเราเรียกว่ามัน "กระพริบ" นั่นเอง)

แต่สำหรับฝั่ง Ajax เราจะยังเห็นหน้าเพจเก่าอยู่ (จะขึ้นเป็นสัญลักษณ์ now loading กลมๆ หมุนๆ หรืออย่างไรก็ขึ้นก็การเขียนของเว็บ-โปรแกรมเมอร์เจ้านั้นแล้ว)

แล้วทั้งสองคนก็กลับมา! กลับมาเร็วแค่ไหนก็ขึ้นกับความเร็วเน็ตของคุณนะๆ ลองดูในรูปดีๆ ว่าฝั่งของการโหลดแบบธรรมดานั่นจะถือกลับมาทั้งหน้าเลย กลับกับแบบ Ajax ที่เอากลับมาเฉพาะข้อมูลที่ต้องการก็พอ

นายคนที่เดินกลับไปโหลดแบบธรมดากลับมาถึงปุ๊บก็ทำการชูป้ายขึ้น จังหวะนี้เราจะเห็นว่าเพจ "เบอร์2" ถูกโหลดเสร็จแล้ว

ฝั่งนายที่เรียกใช้ผู้ช่วย เมื่อผู้ช่วยกลับมาถึง (ไม่รู้นะว่าจะกลับมาถึงเมื่อไหร่ แต่เมื่อกลับมาถึงเดี๋ยวผู้ช่วยก็จะส่งข้อมูลให้มันเอง) ก็ส่งข้อมูล Content ของหน้าเพจให้ เราก็จัดการลบ "1" ออกไปจากหน้า แล้วเอา "2" แทนที่ลงไปซะ ไม่ต้องเปลี่ยนทั้งเพจ "เบอร์1" ให้กลายเป็น "เบอร์2"

สรุปก็คือ การโหลดแบบ Ajax ไม่ได้ช่วยอะไรเลยนอกจากทำให้ UX (ย่อมาจาก User experience หรือประสบการณ์ความประทับใจของผู้ใช้) รู้สึก Feel Goood! ขึ้นเท่านั้นเองเพราะตอนที่โหลดหน้าเพจใหม่นั้นหน้าเพจเดิมยังคาอยู่

เอ๊ะ ... แล้วไอ้ Asynchronous-JavaScript กับ XML มันคือตรงไหนน่ะ?

ป.ล.ใครที่ยังไม่ค่อยรู้จักหลักการทำงานของเว็บ ให้กลับไปอ่านที่ Intro JavaScript ก่อนนะ

Asynchronous JavaScript

ปกติเราเขียนโปรแกรม ลำดับการทำงานเราจะทำงานจากบรรทัดบนสุดลงไปล่างเรื่อยๆ (เรียกว่า Synchronous) แต่สำหรับภาษา JavaScript นี้ การทำให้มันแสดงความสามารถออกมาได้สุดๆ นั่นเขาจะเขียนกันแบบ (เรียกว่า Asynchronous) คือเตรียม function ตัวนี้ๆ ไว้แล้วบอกว่าถ้าเราทำ Event เสร็จแล้ว (ไม่รู้ว่ามันจะเสร็จตอนไหน) ให้รัน function ตัวที่เตรียมไว้ให้เมื่อกี้ด้วยนะ อย่าลืมล่ะ

ตัวอย่างเช่น ไม่รู้นะว่าจะกลับมาถึงเมื่อไหร่ แต่เมื่อกลับมาถึงเดี๋ยวผู้ช่วยก็จะส่งข้อมูลให้มันเองเราถือว่าเราไม่รู้ว่าเจ้าผู้ช่วยนั่นน่ะ มันจะไปเอาของกลับมาเมื่อไหร่ แต่บอกมันไว้ว่าถ้ามันวิ่งไปเอาของเสร็จแล้วกลับมาถึงแล้ว เอาของนั้น ปะลงไปในหน้าเพจเลยนะๆ

XML ...แต่ตอนนี้เขาใช้ JSON กันแล้ว

เราบอกว่าให้ผู้ช่วยวิ่งไปเอาข้อมูลจากบ้าน Server กลับมา ในเชิงคอมพิวเตอร์เราต้องการการส่งข้อมูลที่มี Format (เพราะคอมมันไง่ เขียนผิดไปนิดเดียวก็อ่านไม่รู้เรื่องแล้ว)

XML เป็นรูปแบบที่เขาใช้กันในยุคแรกๆ เวลาส่งข้อมูลกันผ่านเน็ตเวิร์ก

แต่ตอนนี้เว็บส่วนใหญ่เปลี่ยนไปใช้ JSON Format กันแทนแล้วเพราะว่าใช้ง่ายๆ แล้วเข้ากับตัวแปรชนิด Object ของ JavaScript พอดี

ตัวอย่าง XML

<breakfast_menu>
    <food>
        <name>ข้าวไข่เจียวหมูสับ</name>
        <price>35฿</price>
        <description>ข้าวสวยพร้อมไข่ที่ตีแล้วเอาไปเจียวในกระทะ</description>
        <calories>1455</calories>
    </food>
    <food>
        <name>ข้าวผัดหมู</name>
        <price>40฿</price>
        <description>ข้าวที่เอาไปผัดพร้อมกับเนื้อหมูแล้วผีกพร้อมเครื่องปรุงรส</description>
        <calories>557</calories>
    </food>
</breakfast_menu>

ตัวอย่าง JSON

breakfast_menu = {
    food: [
        {
            name: "ข้าวไข่เจียวหมูสับ",
            price: "35฿",
            description: "ข้าวสวยพร้อมไข่ที่ตีแล้วเอาไปเจียวในกระทะ",
            calories: 1455
        },
        {
            name: "ข้าวผัดหมู",
            price: "40฿",
            description: "ข้าวที่เอาไปผัดพร้อมกับเนื้อหมูแล้วผีกพร้อมเครื่องปรุงรส",
            calories: 557
        }
    ]
}

แล้วทำไมถึงบอกว่า JSON มันง่ายกว่าน่ะเหรอ เพราะว่าการตอบกลับมาของ Ajax จะอยู่ในรูปของตัวแปร String ตัวหนึ่ง XML มันอ่านยากกว่า ส่วน JSON นั้นมี

var response = JSON.parse(ajax);

จบเลย

เดี๋ยวจะมาต่อตอนที่ 2 ในภาคปฏิบัตินะ ว่าเวลาเขียนโค้ดใช้จริงเขาทำกันยังไง ทั้งการเขียนแบบ JavaScript  ธรรมดาหรือใช้ไลบรารี่ jQuery

อ่านต่อตอนสอง Ajax คืออะไร แล้วมันใช้ยังไง? - ตอนที่ 2 ภาคปฏิบัติ (แบบธรรมดา)

และตอนสาม Ajax คืออะไร แล้วมันใช้ยังไง? – ตอนที่ 3 ภาคปฏิบัติ (ใช้ jQuery)