本地文件（Local files）

使用XMLHttpRequest也可以加载本地文件（XML/JSON）。例如加载一个本地名为“colors.json”的文件可以这样使用：

  1. xhr.open("GET", "colors.json");

我们使用它读取一个颜色表并且使用表格来显示。从QtQuick这边无法修改文件。为了将源数据存储回去，我们需要一个基于HTTP服务器的REST服务支持或者一个用来访问文件的QtQuick扩展。

  1. import QtQuick 2.0
  3. Rectangle {
  4.     width: 360
  5.     height: 360
  6.     color: '#000'
  8.     GridView {
  9.         id: view
  10.         anchors.fill: parent
  11.         cellWidth: width/4
  12.         cellHeight: cellWidth
  13.         delegate: Rectangle {
  14.             width: view.cellWidth
  15.             height: view.cellHeight
  16.             color: modelData.value
  17.         }
  18.     }
  20.     function request() {
  21.         var xhr = new XMLHttpRequest();
  22.         xhr.onreadystatechange = function() {
  23.             if (xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
  24.                 print('HEADERS_RECEIVED')
  25.             } else if(xhr.readyState === XMLHttpRequest.DONE) {
  26.                 print('DONE');
  27.                 var obj = JSON.parse(xhr.responseText.toString());
  28.                 view.model = obj.colors
  29.             }
  30.         }
  31.         xhr.open("GET", "colors.json");
  32.         xhr.send();
  33.     }
  35.     Component.onCompleted: {
  36.         request()
  37.     }
  38. }

也可以使用XmlListModel来替代XMLHttpRequest访问本地文件。

  1. import QtQuick.XmlListModel 2.0
  3. XmlListModel {
  4.     source: "http://localhost:8080/colors.xml"
  5.     query: "/colors"
  6.     XmlRole { name: 'color'; query: 'name/string()' }
  7.     XmlRole { name: 'value'; query: 'value/string()' }
  8. }

XmlListModel只能用来读取XML文件，不能读取JSON文件。