21Feb

AJAX ResponseXML Example

Posted by คลีนโค้ด | Category: Web applications | No Comments

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)


Prolog เทียบเท่ากับส่วนหัวในเอกสาร HTML

  1. ประกาศเอกสาร XML (มีหรือไม่มีก็ได้):
    <?xml version="1.0"?>
  2. ประกาศ DTD ในเอกสาร XML เพื่อใช้ในการอ้างอิงไปยังแฟ้มภายนอก (มีหรือไม่มีก็ได้):
    <!DOCTYPE LANGLIST SYSTEM "langlist.dtd">
  3. Processing instructions คือกำหนดรูปแบบการแสดงผลด้วยสไตล์ชีต (XSLT) เพื่อกำหนดลักษณะที่ปรากฏและจัดรูปแบบ XML
    <?xml-stylesheet type="text/css" href="xmlstyle.css"?>

องค์ประกอบเอกสาร XML  ตัวอย่างเอกสาร XML ที่สมบูรณ์ Product.xml, root element คือ <Product>

<?xml version="1.0" ?>
<Product Type="Laptop">
    <Notebook Brand="LENOVO" Model="IdeaPad Z460">
        <Harddisk>500 GB</Harddisk>
        <Processor>Intel Core i5</Processor>
        <RAM>4 GB</RAM>
    </Notebook>
    <Notebook Brand="LENOVO" Model="IdeaPad Z465">
        <Harddisk>500 GB</Harddisk>
        <Processor>AMD Phenom II X4 N930</Processor>
        <RAM>4 GB</RAM>
    </Notebook>
    <Notebook Brand="LENOVO" Model="IdeaPad Z470">
        <Harddisk>640 GB</Harddisk>
        <Processor>Intel Core i5</Processor>
        <RAM>4 GB</RAM>
    </Notebook>
    <Notebook Brand="LENOVO" Model="IdeaPad Y570">
        <Harddisk>750 GB</Harddisk>
        <Processor>Intel Core i7</Processor>
        <RAM>4 GB</RAM>
    </Notebook>
    <Notebook Brand="LENOVO" Model="IdeaPad NoteBook U160">
        <Harddisk>500 GB</Harddisk>
        <Processor>Intel Core i3</Processor>
        <RAM>2 GB</RAM>
    </Notebook>
    <Notebook Brand="TOSHIBA" Model="Satellite Pro C640-1056X">
        <Harddisk>500 GB</Harddisk>
        <Processor>Intel Pentium Dual-Core</Processor>
        <RAM>2 GB</RAM>
    </Notebook>
    <Notebook Brand="TOSHIBA" Model="Satellite Pro C640-1049XT">
        <Harddisk>500 GB</Harddisk>
        <Processor>Intel Core i3</Processor>
        <RAM>2 GB</RAM>
    </Notebook>
    <Notebook Brand="TOSHIBA" Model="Satellite L735-1076XTB">
        <Harddisk>500 GB</Harddisk>
        <Processor>Intel Core i3</Processor>
        <RAM>2 GB</RAM>
    </Notebook>
    <Notebook Brand="TOSHIBA" Model="Satellite L735-1077XTR">
        <Harddisk>500 GB</Harddisk>
        <Processor>Intel Core i3</Processor>
        <RAM>2 GB</RAM>
    </Notebook>
    <Notebook Brand="TOSHIBA" Model="Satellite L735-1076XTB">
        <Harddisk>500 GB</Harddisk>
        <Processor>Intel Core i3</Processor>
        <RAM>2 GB</RAM>
    </Notebook>
    <Notebook Brand="DELL" Model="Vostro 3300">
        <Harddisk>500 GB</Harddisk>
        <Processor>Intel Core i5</Processor>
        <RAM>4 GB</RAM>
    </Notebook>
    <Notebook Brand="DELL" Model="Vostro 3400">
        <Harddisk>320 GB</Harddisk>
        <Processor>Intel Core i5</Processor>
        <RAM>4 GB</RAM>
    </Notebook>
    <Notebook Brand="DELL" Model="Vostro V130">
        <Harddisk>320 GB</Harddisk>
        <Processor>Intel Core i5</Processor>
        <RAM>4 GB</RAM>
    </Notebook>
    <Notebook Brand="DELL" Model="Latitude E5410">
        <Harddisk>250 GB</Harddisk>
        <Processor>Intel Core i5</Processor>
        <RAM>3 GB</RAM>
    </Notebook>
    <Notebook Brand="DELL" Model="Latitude E5510">
        <Harddisk>250 GB</Harddisk>
        <Processor>Intel Core i5</Processor>
        <RAM>2 GB</RAM>
    </Notebook>
</Product>

ตัวอย่างเอกสาร XML ที่ไม่สมบูรณ์  ไม่มี root element

<?xml version="1.0" ?>
<Notebook Brand="LENOVO" Model="IdeaPad Z460">
    <Harddisk>500 GB</Harddisk>
    <Processor>Intel Core i5</Processor>
    <RAM>4 GB</RAM>
</Notebook>
<Notebook Brand="LENOVO" Model="IdeaPad Z465">
    <Harddisk>500 GB</Harddisk>
    <Processor>AMD Phenom II X4 N930</Processor>
    <RAM>4 GB</RAM>
</Notebook>
<Notebook Brand="LENOVO" Model="IdeaPad Z470">
    <Harddisk>640 GB</Harddisk>
    <Processor>Intel Core i5</Processor>
    <RAM>4 GB</RAM>
</Notebook>
<Notebook Brand="LENOVO" Model="IdeaPad Y570">
    <Harddisk>750 GB</Harddisk>
    <Processor>Intel Core i7</Processor>
    <RAM>4 GB</RAM>
</Notebook>
<Notebook Brand="LENOVO" Model="IdeaPad NoteBook U160">
    <Harddisk>500 GB</Harddisk>
    <Processor>Intel Core i3</Processor>
    <RAM>2 GB</RAM>
</Notebook>
<Notebook Brand="TOSHIBA" Model="Satellite Pro C640-1056X">
    <Harddisk>500 GB</Harddisk>
    <Processor>Intel Pentium Dual-Core</Processor>
    <RAM>2 GB</RAM>
</Notebook>
<Notebook Brand="TOSHIBA" Model="Satellite Pro C640-1049XT">
    <Harddisk>500 GB</Harddisk>
    <Processor>Intel Core i3</Processor>
    <RAM>2 GB</RAM>
</Notebook>
<Notebook Brand="TOSHIBA" Model="Satellite L735-1076XTB">
    <Harddisk>500 GB</Harddisk>
    <Processor>Intel Core i3</Processor>
    <RAM>2 GB</RAM>
</Notebook>
<Notebook Brand="TOSHIBA" Model="Satellite L735-1077XTR">
    <Harddisk>500 GB</Harddisk>
    <Processor>Intel Core i3</Processor>
    <RAM>2 GB</RAM>
</Notebook>
<Notebook Brand="TOSHIBA" Model="Satellite L735-1076XTB">
    <Harddisk>500 GB</Harddisk>
    <Processor>Intel Core i3</Processor>
    <RAM>2 GB</RAM>
</Notebook>
<Notebook Brand="DELL" Model="Vostro 3300">
    <Harddisk>500 GB</Harddisk>
    <Processor>Intel Core i5</Processor>
    <RAM>4 GB</RAM>
</Notebook>
<Notebook Brand="DELL" Model="Vostro 3400">
    <Harddisk>320 GB</Harddisk>
    <Processor>Intel Core i5</Processor>
    <RAM>4 GB</RAM>
</Notebook>
<Notebook Brand="DELL" Model="Vostro V130">
    <Harddisk>500 GB</Harddisk>
    <Processor>Intel Core i3</Processor>
    <RAM>4 GB</RAM>
</Notebook>
<Notebook Brand="DELL" Model="Latitude E5410">
    <Harddisk>320 GB</Harddisk>
    <Processor>Intel Core i5</Processor>
    <RAM>4 GB</RAM>
</Notebook>
<Notebook Brand="DELL" Model="Latitude E5510">
    <Harddisk>320 GB</Harddisk>
    <Processor>Intel Core i5</Processor>
    <RAM>4 GB</RAM>
</Notebook>

พอเห็นภาพคร่าวๆ ของโครงสร้างเอกสาร XML กันแล้ว งั้นมาลองใช้ร่วมกับ AJAX กันครับ ตัวอย่างที่ผมนำมาฝากเพื่อนๆ มีวิธีทำงานง่ายๆ เพียงแค่เราคลิกปุ่ม “Get data” AJAX ก็จะทำงานและส่งคำขอไปยังฝั่ง Server เมื่อประมวลผลเสร็จ ข้อมูล XML จะถูกส่งกลับมายังฝั่ง Client พร้อมกับแสดงผลในรูปแบบ Table ดังตัวอย่างข้างล่าง

ตัวอย่าง : AJAX ResponseXML Example

เราจะแบ่งการ coding เป็น 2 ส่วน Client-side scripting ใช้ Javascript และ Server-side scripting ใช้ XML (product.xml)

Html ในไฟล์ ajax03.htm

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>AJAX ResponseXML</title>
  <link rel="stylesheet" type="text/css" href="http://honglub.com/workshop/workshop.css" />
</head>
<body>
  <center>
    <span class="header">AJAX ResponseXML</span>
    <span class="link">
      by <a href="http://honglub.com">Honglub.com</a>
    </span>
  </center>
  <span id="ex1">
    <input id="btnGetData" type="button" value="Get data" class="button" onclick="getData();" style="width:70px;" />
    <input id="btnClearTable" type="button" value="Clear" class="button" onclick="clearTable();" /><br /><br />
    <div id="productPanel">
      <table id="productTable" class="list">
        <thead>
          <tr>
            <th scope="col">Type</th>
            <th scope="col">Brand</th>                         
            <th scope="col">Model</th>
            <th scope="col">Harddisk</th>
            <th scope="col">Processor</th>
            <th scope="col">RAM</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colspan="6" class="center">Records not found</td>
          </tr>
        </tbody>
      </table><br />                   
    </div>
  </span>
</body>
</html>

Javascript ในไฟล์ ajax03.htm

อ่านย้อนหลัง : ทำไมต้องใช้ Ajax?, First step in Ajax

จัดทำโดยทีมงาน คลีนโค้ด

No Comments.

Leave a Reply

(required)

(required)

« »