ห้องลับ

แหล่งความรู้ที่ไม่มีใครเปิดเผย
Twitter
Follow me on Twitter

AJAX ResponseXML Example

3 เดือนที่ผ่านมา งานเข้า! ครับ ทำให้ไม่มีเวลามาอัพเดตบล็อก แน่นอนว่าผมไม่ลืมสัญญาที่จะทำตัวอย่าง Ajax โดยรับส่งข้อมูลในรูปแบบ XML (responseXml) มาฝากเพื่อนๆ

ขั้นแรก เรามาทำความเข้าใจ โครงสร้างของเอกสาร XML กันก่อน

XML ย่อมาจาก Extensible Markup Language ใช้ในการแลกเปลี่ยนข้อมูลระหว่างคอมพิวเตอร์ ที่มีระบบปฏิบัติการคนละค่ายเช่น Windows, Linux หรือ Mac OS โดยผ่านระบบเครือข่าย (Intranet, Extranet หรือ Internet)

XML แบ่งโครงสร้างออกเป็น 2 ส่วน

  1. Prolog
  2. Document Element (root element)

อ่านต่อ…

First step in Ajax

สวัสดีทุกๆ คน หลังจากหายหน้าหายตาไปหลายเดือน ช่วงที่ผ่านมานี้โปรเจกค่อนข้างเยอะ ไม่ได้อัพเดตบล็อกเลย วันนี้ผมมาพร้อมกับตัวอย่างง่ายๆ ในการเรียกใช้ Ajax

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

สำหรับเพื่อนๆ คนใด อยากอ่านภาพรวม ทำไมต้องใช้ Ajax? คลิกอ่านเพิ่มเติมได้ที่นี่ครับ

ตัวอย่างจะมี 2 ข้อคือ

  1. Prevent duplicate code or text (ป้องกันไม่ให้ข้อมูลซ้ำกัน)
  2. Cascade dropdownlist

อ่านต่อ…

Why use Ajax?

2-3 เดือนที่ผ่านมางานค่อนข้างยุ่งมาก ไม่ได้อัพเดตบล็อกเลย ระหว่างทำโปรเจกใช้ Ajax ค่อนข้างเยอะ และอยากแบ่งปันให้เพื่อนๆ ครับ

Ajax คืออะไร?

Ajax (Asynchronous Javascript and XML) : ไม่ใช่เทคโนโลยีใหม่อะไร เป็นการผสมผสานเทคโนโลยีเก่าเข้าด้วยกัน เพื่อนๆ รู้จักกันเป็นอย่างดี

  1. HTML และ CSS
  2. Javascript และ DOM
  3. ขาดไม่ได้ XMLHttpRequest object ทำหน้าที่ในการอ่านหรือส่งข้อมูลระหว่าง server asynchronously

สามารถเลือกใช้เพิ่มเติม…

  1. DOMParser
  2. PHP หรือภาษาอื่นที่รันบน server เช่น Perl, Python,…
  3. XML หรือ XSLT จัดการข้อมูลให้อยู่ในรูปแบบ XML
  4. JSON จัดการข้อมูลให้อยู่ในรูปแบบ JSON (JavaScript Object Notation)
  5. SOAP

อ่านต่อ…

JSON vs JSONP

ผมใช้ JSON มาก็หลายโปรเจก แต่มีโปรเจกนึงที่ต้องค้นหาและค้นคว้ามากเป็นพิเศษ สังเกตุเห็นโปรแกรมเมอร์หลายๆ คนใช้ JSONP กันแพร่หลาย เกิดความสงสัยว่า JSON กับ JSONP มันต่างกันอย่างไร แล้วจะใช้งานมันเมื่อไร

ผมสรุปสิ่งที่สงสัยเป็นข้อๆ ได้ 3 ข้อครับ

  1. JSON กับ JSONP ต่างกันอย่างไร
  2. ใช้งาน JSONP เมื่อไร
  3. เรียกใช้ JSONP อย่างไร

สำหรับคนที่ยังไม่รู้จัก JSON ผมจะอธิบายโดยคราวๆ เพื่อปรับความเข้าใจให้ตรงกัน :-) อ่านต่อ…

Google Chrome Shortcut Keys

เชื่อว่าหลายๆ คนหันมาใช้ Google Chrome กันมากขึ้น เพราะการใช้งานคล้าย Portal Application (Drag and Drop) ไม่ต้องศึกษาอะไรมาก ก็แค่ลากๆ คลิกๆ และยังรองรับเว็บที่มีรูปแบบ User Interactive ได้ดี เช่น Twitter, Facebook,… โดยจะดึง Real-Time Messages มาแสดงบนเว็บโดยที่เราไม่ต้องกดโหลดหน้าเว็บใหม่ทุกครั้ง เพียงเพื่อดูว่ามีใครส่งข้อความใหม่มาให้เราบ้าง เพราะการจัดการ Resources ของ Google Chrome ที่มีประสิทธิภาพ ทำให้เราเล่นเว็บจำพวก Social Media ไม่ค่อยติดขัด ไม่มีอาการค้าง (ไม่ใช่อารมณ์ค้างนะครับ อิอิ กลัวเข้าใจผิด) แต่ก็ไม่ได้หมายความว่า Google Chrome ไม่มีข้อเสียนะครับ อ่านต่อ…

A Simple DOM example

HTML DOM สำหรับผม ผมคิดว่ามีความสำคัญมากๆ ในการทำเว็บ แต่ผมก็ยอมรับว่าในหลายๆ องค์กรและหลายๆ คน จะมองข้ามไป คิดว่าเป็นภาษาที่ใช้เพิ่มลูกเล่นให้กับเว็บเท่านั้น แต่จริงๆ แล้ว HTML DOM สามารถแก้ปัญหาหน้าจอที่ถูกออกแบบมายากๆ ลดระยะเวลาในการพัฒนาระบบ, ลดความยุ่งยากในการเขียนโปรแกรม และลด Load ของฝั่ง Server ได้ครับ อ่านต่อ…

เรื่องเล่าผิดๆ เกี่ยวกับ Javascript

ผมเป็นคนหนึ่งที่เคยเข้าใจผิดเกี่ยวกับ Javascript และผมก็ถึงบางอ้อ เมื่อผมได้อ่านบทความหนึ่งจาก Sitepoint.com

เคยได้ยินกันไหมครับ

  1. JavaScript == Java

    “Java is to JavaScript as ham is to hamster”

    เข้าใจกันผิดว่า java และ javascript เกี่ยวข้องกัน ที่จริง javascript พัฒนามาจากภาษา Mocha ต่อมาเปลี่ยนชื่อเป็น LiveScript และในที่สุดเป็น Javascript ที่เรารู้จักกันครับ อ่านต่อ…

Recursive DOM Example

เรามาทำ WorkShop กันสักนิดนึง เพื่อทำความเข้าใจเรื่อง DOM Node Tree มากยิ่งขึ้น ทำไปพร้อมๆ กันนะครับ :D โจทย์มีอยู่ว่า ตื่นเต้นกันไหมครับ ;) “ให้เขียนฟังกัชัน Recursive (ฟังก์ชันที่เรียกตัวเอง) โดยแสดงรายชื่อ Nodes ต่างๆ ในเอกสาร HTML และต้องรองรับเอกสาร HTML ทุกรูปแบบนะครับ” ผมมีเอกสาร HTML ตัวอย่างให้ครับ

<html>
<head>
  <title>My Document</title>
</head>
<body>
  <div ID="myDiv">
    <a href="http://honglub.com" title="ห้องลับ">Honglub.com</a>
  </div>
</body>
</html>

อ่านต่อ…