前一篇文章[SAP UI5 應用的 OData 後設資料請求響應的解析原理分析](https://blog.csdn.net/i042416/article/details/122758888)我們介紹了 SAP UI5 OData 後設資料解析的入口。本文繼續介紹基於 DOMParser 的 XML 資料解析原理。

入口如下：

```javascript
var xmlParse = function (text) {
        /// <summary>Returns an XML DOM document from the specified text.</summary>
        /// <param name="text" type="String">Document text.
        /// <returns>XML DOM document.</returns>
        /// <remarks>This function will throw an exception in case of a parse error.</remarks>

var domParser = window.DOMParser && new window.DOMParser();
        var dom;

if (!domParser) {
            dom = msXmlParse(text);
            if (!dom) {
                xmlThrowParserError("XML DOM parser not supported");
            }
            return dom;
        }
```

![](https://img-blog.csdnimg.cn/img_convert/e498060b6048b7acaef590eef6278e9c.png)

dom = domParser.parseFromString(text, "text/xml"); 這是一個原生方法呼叫。

成功解析出的 dom 元素物件：
![](https://img-blog.csdnimg.cn/img_convert/a3b62d554f100b3ff7eff0fc59332089.png)

下面開始遍歷這個 dom 物件：
![](https://img-blog.csdnimg.cn/img_convert/dc892eccfe98be1781b9420f3c41941d.png)

拿到第一個元素：
![](https://img-blog.csdnimg.cn/img_convert/eb7d6603fad80f0e61c84485b772f2c0.png)

遞迴操作：
![](https://img-blog.csdnimg.cn/img_convert/60d137cea4c002b7d2f7afdbaff75bcf.png)

解析成功的 metadata：
![](https://img-blog.csdnimg.cn/img_convert/e7a35f8e2c964f43c67ecb073a361158.png)

解析出的 entityType：
![](https://img-blog.csdnimg.cn/img_convert/e63677489d4a0cf40af7cdfb87ca25a7.png)

解析成功的後設資料，儲存在 response.data 裡：
![](https://img-blog.csdnimg.cn/img_convert/7b135be30a72caf7146e6fa7eff2ab42.png)

觸發 metadata 載入成功的 callback：
![](https://img-blog.csdnimg.cn/img_convert/10e6b8e4adbc57ed51934ca9a3820db0.png)

```javascript
ODataMetadata.prototype._handleLoaded = function(oMetadata, mParams, bSuppressEvents) {
		var aEntitySets = [];

this.oMetadata = this.oMetadata ? this.merge(this.oMetadata, oMetadata, aEntitySets) : oMetadata;
		this.oRequestHandle = null;

mParams.entitySets = aEntitySets;

// resolve global promises
		this.fnResolve(mParams);

if (this.bAsync && !bSuppressEvents) {
			this.fireLoaded(this);
```

丟擲 loaded 事件：
![](https://img-blog.csdnimg.cn/img_convert/38c4b24c0f5ca1bd213a967c82dff3c1.png)

該事件的引數為 metadata 的 json 物件格式和 xml 文字：
![](https://img-blog.csdnimg.cn/img_convert/3f1ee41ca3bac67e4d49b38bb228f371.png)

OData 後設資料就緒後，執行初始化操作：
![](https://img-blog.csdnimg.cn/img_convert/64a4cceec7d2ce1146e6b240b1213112.png)

```javascript
ODataModel.prototype.initialize = function() {
		// Call initialize on all bindings in case metadata was not available when they were created
		var aBindings = this.getBindings();
		aBindings.forEach(function(oBinding) {
			oBinding.initialize();
		});
	};
```

遍歷所有的 binding 資料來源。

SAP UI5 使用的 datajs.js, 是一種開源的跨瀏覽器 JavaScript 程式庫，可以讓開發人員在瀏覽器環境裡消費 OData 服務。

在 SAP UI5 庫裡位於路徑 sap/ui/thirdparty 下面，SAP 對該檔案也做了一些自己的修改，透過註釋 BEGIN: MODIFIED BY SAP 和 END: MODIFIED BY SAP 來標識。

![](https://img-blog.csdnimg.cn/img_convert/a8e47a4f649ed4c9d52e350fa0927759.png)

一個例子如下：

```javascript
    odata.defaultHandler = {
        read: function (response, context) {
            /// <summary>Reads the body of the specified response by delegating to JSON and ATOM handlers.</summary>
            /// <param name="response">Response object.
            /// <param name="context">Operation context.

// ##### BEGIN: MODIFIED BY SAP
        	// added response.body check and removed assigned(response.body) call...for the case that if body is empty string...don't process any response body data
            if (response && response.body && response.headers["Content-Type"]) {
            // ##### END: MODIFIED BY SAP
                dispatchHandler("read", response, context);
            }
        },
```

SAP UI5 應用的 OData XML 格式的後設資料請求解析原理，基於 DOMParser

相關文章