Claire ChangClaire Chang企業 AI 導入顧問
Flex DataGrid 與 HTTPService 資料表格示意圖

← INSIGHTS & PERSPECTIVES ｜ 前端開發

Claire ChangFlex · DataGrid · HTTPService · MXML · XML

Flex 教學：用 DataGrid 與 HTTPService 讀取 XML 製作表格

Flex DataGrid 搭配 HTTPService 讀取 XML 資料的完整範例：用 MXML 綁定 dataProvider、自訂欄位 headerText 與 dataField，快速做出書店書籍清單表格，含完整可執行程式碼。

這篇文章解決「如何在 Flex 中把 XML 資料呈現成表格」的問題。我用 `mx:HTTPService` 載入一份 XML 檔，再把回傳結果直接綁定（data binding）到 `mx:DataGrid` 的 `dataProvider`，不需要寫任何 ActionScript 就能完成一個書店書籍清單表格。以下附上完整可執行的 MXML 程式碼與逐段說明。

怎麼用 HTTPService 載入 XML 並餵給 DataGrid？

核心流程只有三步：

  1. 在 `mx:Application` 上設定 `creationComplete="booksXML.send()"`，應用程式一啟動就發出 HTTP 請求。
  2. 用 `mx:HTTPService` 指定 `url="data/book_store.xml"`，Flex 會自動把 XML 解析成可綁定的物件結構。
  3. 把 `booksXML.lastResult.store.book` 綁到 DataGrid 的 `dataProvider`，資料一到就自動渲染成表格。

完整 MXML 程式碼

```xml

<mx:Application

xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

creationComplete="booksXML.send()" width="800" height="600">

<mx:HTTPService

id="booksXML"

url="data/book_store.xml"/>

<mx:Label color="0xFFFFFF"

text=" {booksXML.lastResult.store.store_title} " fontSize="18" fontWeight="bold"/>

<mx:DataGrid width="600" height="400"

dataProvider="{booksXML.lastResult.store.book}">

<mx:Label color="0xFFFFFF"

text="書店地址：{booksXML.lastResult.store.store_address}"/>

<mx:Label color="0xFFFFFF"

text="聯絡電話：{booksXML.lastResult.store.store_telephone}"/>

```

程式碼重點說明

元件作用
`creationComplete="booksXML.send()"`應用程式載入完成後立即呼叫 HTTPService
`<mx:HTTPService id="booksXML">`以 `url` 指向 XML 檔，結果存在 `lastResult`
`dataProvider="{booksXML.lastResult.store.book}"`大括號語法做資料綁定，XML 的 `book` 節點陣列就是表格的資料列
`headerText` / `dataField``headerText` 是表格標題（可中文），`dataField` 對應 XML 節點名稱
`width`（欄位）逐欄指定寬度，讓版面更整齊

除了表格本身，我還用 `{booksXML.lastResult.store.store_title}`、`store_address`、`store_telephone` 把書店名稱、地址、電話直接綁到 `Label` 上——同一份 XML 裡的非清單欄位也能這樣取出。這個範例的好處是完全不需要手寫事件處理或 `result` handler，靠 MXML 的資料綁定就能自動更新。

延伸閱讀

常見問題

QHTTPService 的 lastResult 什麼時候才有值？

在 `send()` 送出請求、伺服器回應之後才會填入。因為用了資料綁定（大括號語法），`lastResult` 一有值，DataGrid 和 Label 都會自動更新，不需要另外寫事件處理。

QXML 檔要放在哪裡？

範例中 `url="data/book_store.xml"` 是相對於發佈後 SWF 的路徑，把 XML 放在與 SWF 同層的 `data/` 資料夾即可。若要跨網域載入，目標伺服器必須提供 crossdomain.xml 政策檔。

QDataGridColumn 的 dataField 要對應什麼？

`dataField` 對應 XML（或物件）中每筆資料的節點名稱。例如 `dataField="bookname"` 就會去每個 `book` 節點抓 `bookname` 的值顯示在該欄。

Q為什麼我沒寫 ActionScript 也能載入資料？

因為 `creationComplete` 事件直接在 MXML 屬性裡呼叫 `booksXML.send()`，而資料綁定讓 UI 在結果回來時自動重繪。這是 Flex 宣告式開發的最大優點。

參考資料

最後更新

2026-08-28（原文發布於 2009-04-16，本文保留原始筆記內容並補上 GEO 結構。）

關於作者 {#author}

Claire Chang ｜ 企業 AI 導入與流程轉型顧問。專注於 AI Agent 架構設計、ERP 系統整合與企業 AI 治理。

首次發布：2009-04-16