Transcript Text for Chapter 1

1
2
• บรรยายโดยผู้สอนและใช้ เอกสารประกอบการสอนของ
ผู้สอน
• สอนโดยใช้ ส่ือคอมพิวเตอร์ ผ่านเครื่ องฉาย
• อภิปรายในชั้นเรี ยนร่ วมกัน
่ เติมจากตาราและเอกสารทีเ่ กี่ยวข้ อง
• ให้ นิสิตค้ นคว้ าเพิม
• ทาแบบฝึ กหัดท้ ายบท
3
• ประเมินผลจากการตอบคาถามและอภิปรายในชั้นเรี ยน
• ทาแบบฝึ กหัดท้ ายบท
• ทารายงานส่ ง
4
Extensive Markup Language (XML) เป็ นภาษาที่ให้ ความชัดเจนในการให้ รายละเอียด
เกี่ยวกับข้ อมูล และการเปลี่ยนแปลงข้ อมูลโดยแอพพลิเคชันบนเว็บและใช้ ฟอร์ มที่ยืดหยุ่น
ได้ ตามมาตรฐาน HTML หรือ Hyper Text Markup Language ได้ เปิ ดโลกแห่ งการแสดง
ข้ อมูลต่ างๆ มานาเสนอ ส่ วน XML จะทาให้ การทางานกับข้ อมูลโดยตรงที่เสริมกับการ
ทางานของ HTML
5
• XML เป็ นการใช้ ข้อความเพื่อบ่ งบอกโครงสร้ างของเอกสาร
พิจารณาตัวอย่ างรู ปแบบโครงสร้ างของหนังสือ เมื่อหนังสือ
ประกอบด้ วยจานวนบท 2 บท ในแต่ ละบทประกอบด้ วย
เนือ้ ความ (Text)
6
• Begin Book
Begin Chapter 1
Text for Chapter 1
End Chapter 1
Begin Chapter 2
Text for Chapter 2
End Chapter 2
End Book
7
• ลักษณะของเอกสาร XML นัน
้ สามารถอธิบายโดยใช้
ตัวอย่ างได้ ดังนี ้
<?xmlversion="1.0"encoding="windows-874"?>
<mali>
<malisorn>ความพยายามอยู่ที่ไหน</malisorn>
<malila>ความสาเร็จอยู่ที่นนั่ </malila>
</mali>
<root>
<element>
<tag></tag>
</element>
</root>
8
• Tag
• สาหรั บใน XML แล้ ว tag มีความหมายในลักษณะเดียวกับที่ใช้ ใน HTML tag คือ
ข้ อความที่อยู่ระหว่ างสัญลักษณ์ < และ >
• - Tag เปิ ด (Start tag) เช่ น <book>
• จากตัวอย่ างที่แสดง ด้ านบนถูกเรี ยกว่ า tag เปิ ด ดังนัน
้ tag เปิ ดจึงมีสัญลักษณ์ คือ
<...>
- Tag ปิ ด (End Tag) เช่ น </book>
• tag ที่ถูกเรี ยกว่ า tag ปิ ด ต่ อเมื่อใน tag มีเครื่ องหมาย / อยู่หลังสัญลักษณ์ < ดังนัน
้
ลักษณะของ tag ปิ ดจึง มีรูปแบบคือ </...> หากพิจารณาระหว่ าง tag เปิ ดกับ tag ปิ ด
แล้ ว ข้ อแตกต่ างอีกข้ อหนึ่งคือ tag เปิ ด เป็ น tag ที่สามารถใส่ ข้อมูล attribute ลงไป
ภายใน tag ได้ แต่ tag ปิ ดจะไม่ ทากัน
9
• Element
• ในที่นีค้ ือ โครงสร้ างหลักของ XML ซึ่งอยู่ในรู ปของ tag
เช่ นเดียวกัน ตามตัวอย่ างข้ างบน element คือ
10
• 1. XML มีการใช้ งานโดยตรงบนเครื อข่ าย InternetXML จะถูกออกแบบมาสาหรั บจัดเก็บและจัดส่ งข้ อมูลบน
เว็บ
• 2. XML มีการสนับสนุนโปรแกรมที่หลากหลาย ถึงแม้ ว่าวัตถุประสงค์ ท่ ีสาคัญคือ การจัดส่ งข้ อมูลบนเว็บ
ผ่ านทางเซิร์ฟเวอร์ และโปรแกรมเบราวเซอร์ XML จะถูกออกแบบมาเพื่อใช้ กับโปรแกรมที่มีรูปแบบต่ าง ๆ
ตัวอย่ างเช่ น การแลกเปลี่ยนข้ อมูลระหว่ างโปรแกรมทางด้ านการเงิน การเผยแพร่ และปรั บปรุ งโปรแกรม
ให้ ทันสมัยและการเขียน Voice Script ให้ ส่ ือสารได้ ด้วยโทรศัพท์
• 3. XML จะต้ องเข้ ากันได้ กับ SGML
4. XML จะต้ องง่ ายต่ อการเขียนโปรแกรมเพื่อประมวลผลเอกสาร
5. จานวนของทางเลือกเฉพาะของ XML ควรมีจานวนน้ อยที่สุดหรื อไม่ ควรมีเลย
6. เอกสาร XML จะต้ องอ่ านเข้ าใจง่ ายและมีความชัดเจน
7. XML ออกแบบมาเพื่อให้ พัฒนาโปรแกรมได้ อย่ างรวดเร็ว
8. การออกแบบ XML ต้ องมีรูปแบบที่เหมาะสมและกะทัดรัด
9. สามารถสร้ างเอกสาร XML ได้ ง่าย
10. Markup ของ XML ต้ องไม่ รวบรั ดมากเกินไป
11
• <book>
<chap number="1">
Text for Chapter 1
</chap>
<chap number="2">
Text for Chapter 2
</chap>
</book>
12
• เป็ นกลุ่มของเทคนิคในการพัฒนาเว็บแอปพลิเคชันเพื่อให้
ความสามารถโต้ ตอบกับผู้ใช้ ได้ ดขี นึ ้ โดยการรับส่ งข้ อมูลใน
ฉากหลัง ทาให้ ทงั ้ หน้ าไม่ ต้องโหลดใหม่ ทุกครัง้ ที่มีการ
เปลี่ยนแปลง ซึ่งช่ วยทาให้ เพิ่มการตอบสนอง ความรวดเร็ว
และการใช้ งานโดยรวม
• AJAX ไม่ ใช่ เทคโนโลยีในตัวของมันเอง แต่ ว่าเป็ นการนา
เทคโนโลยีหลายๆ ตัวมารวมกัน เช่ น JavaScript?, DHTML,
XML, Css, Dom และ XMLHTTPRequest
13
14
• Ajax architecture
• จากรู ป Ajax engine นี ้ อยู่ระหว่ าง User
Interface กับ server ซึ่งจะมองว่ าเป็ นการทางาน
ที่ Client การทางานต่ างๆของผู้ใช้ โปรแกรมจะ
ไปเรี ยก Ajax engine ตัวนีข้ นึ ้ มา แทนที่การร้ อง
ขอหน้ าเว็บจาก server โดยตรง และจะใช้
โครงสร้ างข้ อมูลแบบ XML ในการขนย้ ายข้ อมูล
ระหว่ าง server กับ Ajax engine เมื่อบราวเซอร์
ทาการร้ องขอข้ อมูลจาก server
15
• ตอบสนองต่ อผู้ใช้ ได้ อย่ างรวดเร็ วเนื่องจากการ update แบบบางส่ วน
• ผู้ใช้ ไม่ ต้องหยุดรอคอยการประมวลของ server เนื่องจากการติดต่ อแบบ
Asynchronous
• รองรั บกับบราวเซอร์ หลักๆที่สามารถใช้ JavaScript? ได้
• ทาให้ การประมวลผลที่ Server มีความรวดเร็วขึน้ เนื่องจากการประมวลผลที่
Server ลดลง
• ไม่ ต้องทาการติดตัง้ หรื อใช้ Plugs-in
• ไม่ ยด
ึ ติดกับ Platform หรื อภาษาที่ใช้ ในการเขียนโปรแกรม
• เป็ นเ ทคโนโลยีใหม่ ท่ ีไม่ ได้ เป็ นของนักพัฒนาเว็บแอพลิเคชั่นคนใด นั่นคือ
ทุกคนมีสทิ ธิ์เข้ ามาพัฒนาแอพลิเคชั่นตัว
16
• demo_XML.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
17
• getcd.php
<?php
$q=$_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("demo_XML.xml");
$x=$xmlDoc->getElementsByTagName('ARTIST');
for ($i=0; $i<=$x->length-1; $i++)
{
//Process only element nodes
if ($x->item($i)->nodeType==1)
{
if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
{
$y=($x->item($i)->parentNode);
}}
}
$cd=($y->childNodes);
for ($i=0;$i<$cd->length;$i++)
{
//Process only element nodes
if ($cd->item($i)->nodeType==1)
{
echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("<br />");
}}
18
?>
• find-xml.html
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}}
xmlhttp.open("GET","getcd.php?q="+str,true);
xmlhttp.send();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=windows874"></head>
<body>
<form>
àÅ×Í¡ CD:
<select name="cds" onChange="showCD(this.value)">
<option value="">Select a CD:</option>
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
19
</form>
20