前一篇文章 [SAP UI5 應用的 OData 後設資料請求的傳送原理分析](https://blog.csdn.net/i042416/article/details/122753567)我們學習了 SAP UI5 應用是如何自動傳送 OData 後設資料的 HTTP 請求。

本文繼續學習該後設資料請求的響應到達客戶端之後，SAP UI5 框架是如何解析的。

當響應成功到達客戶端後，回撥函式被觸發：

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

如果 xhr.readyState 不為 4，則直接返回。

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

metadata 請求的響應頭部，Content-Type 為 application/xml:

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

構造 response 物件：

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

其中 xml 後設資料的內容，儲存在 xhr.responseText 內部。

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

因為 statusCode 為 200，進入 success 回撥函式：
![](https://img-blog.csdnimg.cn/img_convert/a74773391805991fc9e5b5aab712bb39.png)

因為 response.data 為空，因此呼叫對應的 handle 去讀取：
![](https://img-blog.csdnimg.cn/img_convert/0006a5f5c308229cdbf45d52a8bf2bbf.png)

首先取得 content-type：
![](https://img-blog.csdnimg.cn/img_convert/3a6bd00c7f1a4da9d90a5fad4c1ec9f1.png)

從 response header 欄位裡讀取 Content-Type 欄位：
![](https://img-blog.csdnimg.cn/img_convert/9784008623c8cb5cdb47defd695a3c23.png)

使用`;`作為分隔符：
![](https://img-blog.csdnimg.cn/img_convert/8779d74df547b11bd4dbf0fc3a4ae301.png)

使用分隔處理後的第一個元素作為結果：
![](https://img-blog.csdnimg.cn/img_convert/e5dd6097dd08744faca28d6735e37675.png)

我們自己構造的 response 物件的 body 欄位，來自 xhr 標準物件的 responseText:

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

根據 media type 裡儲存的型別來獲取對應的 handler？

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

handler 的 accept 欄位必須包含 media type 裡指定的型別：
![](https://img-blog.csdnimg.cn/img_convert/15df61d4500cbd1371af12e1da060548.png)

如果 handler 驗證透過，建立讀寫上下文物件：

```javascript
if (handlerAccepts(handler, cType)) {
            var readContext = createReadWriteContext(cType, version, context, handler);
            readContext.response = response;
            response.data = parseCallback(handler, body, readContext);
            return response.data !== undefined;
        }

```

這裡很有意思，contentType 為 Application/xml，但是 formatQueryString 卻是 json 格式：
![](https://img-blog.csdnimg.cn/img_convert/773462dd53c3fe9fa0aee5b532db7dfd.png)

然後基於 handler 和 response 進行解析，將結果儲存到 response 物件的 data 欄位裡。

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

xml Metadata 的解析器：metadataParser:

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

```javascript
var metadataParser = function (handler, text) {
        /// <summary>Parses a metadata document.</summary>
        /// <param name="handler">This handler.
        /// <param name="text" type="String">Metadata text.
        /// <returns>An object representation of the conceptual model.</returns>

var doc = xmlParse(text);
        var root = xmlFirstChildElement(doc);
        return parseConceptualModelElement(root) || undefined;
    };
```

進入 xmlParse 方法：可以看到裡面使用的是 DOMParser：

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

DOMParser 可以將儲存在字串中的 XML 或 HTML 原始碼解析為一個 DOM Document。

注意：XMLHttpRequest 支援從URL可定址資源解析XML和HTML，在其response 屬性中返回Document。

SAP UI5 應用的 OData 後設資料請求響應的解析原理分析

相關文章