Transcript AJAX - izugizosvn

AJAX
เป็ นเทคนิคในการเขียนโปรแกรมของเว็บ ที่ช่วยขจัดปัญหา
ของการโหลดหน้ าของเว็บ เพราะทุกครัง้ ที่เราต้องการอัพเดตหน้ า
เว็บ เราต้องมีการส่งและรับข้อมูลทัง้ หน้ า ทัง้ ๆ ที่เราต้องการอัพเดต
เฉพาะจุด เช่น ตัวเลขดัชนี ห้นุ พยากรณ์อากาศ
ดังนัน้ Ajax จึงมีบทบาทในการช่วยให้ Client แลกเปลี่ยน
ข้อมูลกับ web server และแก้ไขหน้ าเว็บเดี๋ยวนัน้ โดยไม่ต้อง load
หน้ าใหม่
AJAX
Ajax ไม่ใช่เทคโนโลยีใหม่ แต่เป็ นเทคนิคที่ประกอบไปด้วย
เทคโนโลยีที่เราคุ้นเคยกันดี ได้แก่
 HTML และ CSS สาหรับการแสดงข้อมูล
 XML
 DOM (Document Object Model)
XMLHttpRequest
JavaScript
AJAX >> HTML และ CSS
HTML หรือ HyperText Markup Language เป็ นเป็ นภาษา
Markup Language ประกอบด้วยโค้ดหรือที่เรียกว่า แท๊ก (tag)
ควบคุมการแสดงผลผ่านโปรแกรมเบราเซอร์ แต่ละ Tag อาจจะมี
ส่วนขยายที่เรียกว่า Attribute สาหรับระบุ หรือควบคุมการแสดงผล
ของเว็บได้ด้วย
AJAX >> HTML และ CSS (ต่อ)
CSS หรือ Cascading Style Sheets ใช้สาหรับควบคุม
รูปแบบของหน้ าเว็บ ให้มีลกั ษณะเดียวกันตลอดทัง้ เว็บ อี กทัง้ ยัง
ช่วยเพิ่มความสะดวกในการพัฒนาและปรับปรุงแก้ไข
AJAX >> XML (Extensible Markup Language )
XML เป็ นภาษา Markup Language เช่นเดียวกับ HTML
Markup ประกอบด้วยโค้ดหรือที่เรียกว่า แท๊ก (tag) ใช้อธิบายถึง
รายละเอียดของโครงสร้างและแบบของข้อมูล โดยผูใ้ ช้สามารถ
กาหนด Tag ขึน้ มาเองได้
AJAX >> XML (Extensible Markup Language ) (ต่อ)
ความแตกต่างระหว่าง HTML และ XML
XML
HTML
ออกแบบขึน้ มาเพื่อใช้ในการ ออกแบบขึน้ เพื่อใช้ในการแสดง
อธิบายข้อมูล
ข้อมูล
ให้ความสนใจว่าข้อมูลคืออะไร ให้ความสนใจในรูปแบบของ
การแสดงข้อมูล
มีประโยชน์ ในการแลกเปลี่ยน
ข้อมูลในระบบที่แตกต่างกัน
AJAX >> XML (Extensible Markup Language ) (ต่อ)
โครงสร้างเอกสาร XML
AJAX >> XML (Extensible Markup Language ) (ต่อ)
โครงสร้างเอกสาร XML (ต่อ)
1. ส่วนแรก (Prolog) ในส่วนนี้ จะประกอบด้วย
• XML declaration เป็ นการประกาศให้ร้วู ่าเอกสารนี้ คือ
XML และเป็ นการประกาศเวอร์ชนั ของ XML (ใน
ตัวอย่างเป็ นเวอร์ชนั 1.0) การใส่ค่า XML declaration
จะประกาศหรือไม่ประกาศก็ได้
AJAX >> XML (Extensible Markup Language ) (ต่อ)
โครงสร้างเอกสาร XML (ต่อ)
• บรรทัดว่าง เพื่อช่วยให้เอกสารน่ าอ่านขึน้ ตัว
ประมวลผลของ XML (XML Processor) จะข้ามและ
ไม่นาบรรทัดว่างเหล่านัน้ มาประมวลผล
•
หมายเหตุ (Comment) เพื่อใช้อธิบายจุดประสงค์ของ
เอกสาร จะมีหรือไม่มีกไ็ ด้ เช่นเดียวกันกับบรรทัดว่าง
ตัวประมวลผลของ XML จะข้ามและไม่นาหมายเหตุ
มาประมวลผล
AJAX >> XML (Extensible Markup Language ) (ต่อ)
โครงสร้างเอกสาร XML (ต่อ)
2. ส่วนที่สอง (Document element)
ในส่วนที่สองเรียกว่า Document element หรือ Root element
ซึ่งสามารถบรรจุ Element เพื่อเติม ในเอกสาร XML ได้ ในเอกสาร
XML นัน้ Element จะแสดงลักษณะโครงสร้างของเอกสาร และแสดง
ส่วนประกอบของเนื้ อหาเอกสารอยู่ภายใน
AJAX >> XML (Extensible Markup Language ) (ต่อ)
Element
สัญลักษณ์ Element ประกอบด้วย tag เริ่มต้น (Start-tag), เนื้ อหา
ภายใน Element และแท๊กปิดท้าย (End-tag) เนื้ อหาภายใน Element
สามารถมีข้อมูลหรือ Element อื่นๆ ที่ซ้อนอยู่ภายในได้อีก
AJAX >> XML (Extensible Markup Language ) (ต่อ)
Attribute
ใช้เพื่อเป็ นส่วนอธิบายเพิ่มเติมให้กบั Element แต่ละตัว
ตัวอย่างการใช้งาน Element ร่วมกับ Attributes
<person sex=”female”>
<person>
<firstname>Anna</firstname>
<firstname>…..</firstname>
<lastname>…..</lastname> <lastname>Smith</lastname>
<sex>…..</sex>
</person>
</person>
AJAX >> XML (Extensible Markup Language ) (ต่อ)
สิ่งที่ศึกษาเพิ่มเติมเพิ่มเติม
 DTD (Document Type Definition)
 XML Schema
 XSL
XML Schema = tell data type
XSL = like style sheet
AJAX >> DOM (Document Object Model)
DOM เป็ น XML Parser API ทาหน้ าที่เป็ นตัวกลางในการ
เข้าถึงข้อมูลและเปลี่ยนแปลงเอกสาร XML
XML Parser API ที่นิยมกันมากคือ DOM และ SAX ซึ่งต่างก็
มีวิธีในการดึงข้อมูลที่แตกต่างกันคือ
AJAX >> DOM (Document Object Model) (ต่อ)
DOM จะมองเอกสาร XML ในลักษณะของโครงสร้างต้นไม้
(Tree) โดยมีหลักการในการอ่านเอกสาร XML มาวางเป็ น Tree เก็บ
ไว้ในหน่ วยความจา การเข้าถึงข้อมูลจึงเป็ นการเดินไปตามกิ่งก้าน
ต่างๆ ทัง้ เป็ นแบบต่อเนื่ องไปเรื่อยๆ หรือจะอ้างอิงกิ่งก้าน
เฉพาะเจาะจงลงไป (Random access) ก็ได้
AJAX >> DOM (Document Object Model) (ต่อ)
ข้อดี
เขียน Code ง่าย
สามารถเข้าถึงข้อมูลแบบ Random ได้
ข้อเสีย
ความเร็วในการทางานขึน้ อยู่กบั หน่ วยความจาและ
จานวนข้อมูล
ข้อมูลเกิน 20 MB จะทางานได้ช้า (ขึน้ อยู่กบั
หน่ วยความจา)
AJAX >> DOM (Document Object Model) (ต่อ)
SAX (Simple API for XML )
จัดการเอกสาร XML ด้วยแนวทาง Event-Driven
คือ จะไม่ load ข้อมูลทัง้ หมดเข้ามาในหน่ วยความจา แต่จะอ่าน
เอกสารจาก Disk ตัง้ แต่เริ่มต้นไล่ไปเรื่อยๆ แล้วจะมีการสร้าง
Event ออกมา เช่น เปิด Element ปิด Element หรือ เจอ Attribute
เป็ นต้น คนเขียนโปรแกรมก็ต้องทาหน้ าที่ ดักจับ Event เหล่านี้ มา
จัดการกับข้อมูลต่อ เช่นเจอ Event เมื่อถึง Element ชื่อ X ก็ต้องทา
หน้ าที่ในการดึง X มาใช้งานเป็ นต้น
AJAX >> DOM (Document Object Model) (ต่อ)
ข้อดี
ทางานได้เร็ว
ไม่ได้ต้องการพืน้ ที่หน่ วยความจาเยอะ
ข้อเสีย
เขียน Code ยาก
AJAX >> XMLHttpRequest
XMLHttpRequest เป็ นกลุ่มของ APIs ที่ถกู เรียกใช้โดยภาษา
Script เช่น JavaScript, JScript, VBScript เพื่อเชื่อมโยงและจัดการ
ข้อมูล XML กับ web server ผ่าน HTTP โปรโตคอล เป็ นช่องทาง
เชื่อมต่อระหว่าง Client และ Server
Object ของ XMLHttpRequest ประกอบด้วย
- Method
- Event
- Property
AJAX >> XMLHttpRequest (ต่อ)
Method ที่สาคัญ
-open(method,url,async)
เป็ น method สาหรับเรียก request ไป ยังไฟล์ server ซึ่ง
ประกอบด้วย parameter ดังต่อไปนี้
method = รูปแบบการส่ง จะมี GET และ POST
URL = URL ของฝัง่ Server ที่ต้องการส่ง request ไป
Async = บอกลักษณะการทางานว่าเป็ นแบบ
Synchronous (False) หรือ Asynchronous
(True) wait
Not need to wait
AJAX >> XMLHttpRequest (ต่อ)
Method ที่สาคัญ (ต่อ)
-send()
-send(null)
-send(‘NAME=xxx&SURNAME=yyy’)
เป็ น method ที่ไว้ใช้ส่งข้อมูลให้ทาง server เมื่อเราใช้ การส่งข้อมูล
แบบ post แต่ ถ้าเป็ นการส่งข้อมูลแบบ get เราจะใส่ null ให้กบั
method send
AJAX >> XMLHttpRequest (ต่อ)
Event ที่สาคัญ
-onreadystatechange
คือเหตุการเปลี่ยนแปลงสถานะการทางานจะใช้ในการ กาหนด
เหตุการณ์เพื่อแสดงผลข้อมูลในหน้ าเว็บเพจ
AJAX >> XMLHttpRequest (ต่อ)
Property ที่สาคัญ
- readystate
สถานะการตอบกลับจาก server ซึ่งเราสามารถ กาหนดค่า
ให้ ตัง้ แต่ 0-4 ได้แก่
 0 = uninitialized (การร้องขอ มีปัญหา ไม่สามารถกาหนดค่า
เริ่มต้นได้ )
 1 = loading, (การร้องขอ ถูกกาหนดขึน้ )
 2 = loaded (การร้องขอ ถูกส่งไปแล้ว)
 3 = interactive (การร้องขอ กาลังประมวลผล)
 4 = complete (การร้องขอ ให้ผลกลับมาเรียบร้อย )
AJAX >> XMLHttpRequest (ต่อ)
Property ที่สาคัญ (ต่อ)
- responseText
ผลลัพธ์ข้อมูลที่ถกู ส่งมาจาก Server ในรูปของข้อความ
-responseXML
ผลลัพธ์ข้อมูลที่ถกู ส่งมาจาก Server ในรูปของ XML
-status
สถานะการเชื่อมต่อกับ Server มีค่าเป็ นตัวเลข เช่น 200
-statusText
สถานะการเชื่อมต่อกับ Server มีค่าเป็ นตัวอักษร เช่น OK
AJAX >> โครงสร้ างการทางานของ AJAX
HTTPRequest
XMLHTTPRequest
AJAX >> โครงสร้ างการทางานของ AJAX (ต่อ)
AJAX >> โครงสร้ างการทางานของ AJAX (ต่อ)
AJAX
ข้อดีของ AJAX
1.
ตอบสนองต่อผูใ้ ช้ได้อย่างรวดเร็วเนื่ องจากการ update แบบ
บางส่วน
2.
ผูใ้ ช้ไม่ต้องหยุดรอคอยการประมวลของ server เนื่ องจาก
การติดต่อแบบ Asynchronous
3.
รองรับกับบราวเซอร์หลักๆที่สามารถใช้ JavaScript ได้
4.
ทาให้การประมวลผลที่ Server มีความรวดเร็วขึน้ เนื่ องจาก
การประมวลผลที่ Server ลดลง
5.
ไม่ต้องทาการติดตัง้ หรือใช้ Plugs-in
6.
ไม่ยึดติดกับ Platform หรือภาษาที่ใช้ในการเขียนโปรแกรม
AJAX
ข้อเสียของ AJAX
1. ไม่เหมาะกับการรับส่งข้อมูลระหว่าง Server ที่มีขนาดใหญ่
AJAX
บราวเซอร์ที่สนับสนุน
อย่างที่กล่าวมาแล้วว่า Ajax เป็ นเทคนิคที่อยู่บน
พืน้ ฐานของเทคโนโลยีที่มีอยู่ในปัจจุบนั ไม่มีอะไรใหม่
จึงทาให้โปรแกรมบราวเซอร์ที่เป็ นที่นิยมกันอยู่ใน
ปัจจุบนั สามารถทางานร่วมกับ Ajax ได้
 Microsoft Internet Explorer 4.0 หรือใหม่กว่า
 Mozilla Firefox 1.0 หรือใหม่กว่า
 Netscape 7.1 หรือใหม่กว่า
 Opera 7.6
 Apple Safari 1.2 หรือใหม่กว่า
AJAX >> Work Shop
หน้ า Login