Ext JS 中的 SOAP 服务

SOAP（简单对象访问协议）是建立在 HTTP 和 XML 之上的 Web 服务标准。SOAP Ext.data.soap.Proxy 和 Ext.data.soap.Reader 提供了一种便捷的方式来创建 SOAP 请求，并将 SOAP 响应加载到 Ext.data.Store 中。本指南将向您展示如何使用 SOAP Proxy 和 Reader 从虚构的 SOAP 服务加载数据并保存数据到该服务，该服务提供有关搅拌机的信息。本指南假定您对 Ext JS 数据包有基本的了解。本指南假定您已经对 Ext JS 数据包有一定程度的熟悉。

从 SOAP 服务到 Store

首先，让我们看一下使用 SOAP 数据启动和运行 Ext.data.Store 所需的最简单配置。

首先创建一个 Ext.data.Model。

Ext.define('Blender', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' },
        { name: 'price', type: 'float' }
    ]
});

接下来创建 store、proxy 和 reader。

var store = Ext.create('Ext.data.Store', {
    model: 'Blender',
    proxy: {
        type: 'soap',
        url: 'BlenderService/',
        api: {
            create: 'CreateBlender',
            read: 'GetBlenders',
            update: 'UpdateBlender',
            destroy: 'DeleteBlender'
        },
        soapAction: {
            create: 'http://example.com/BlenderService/CreateBlender',
            read: 'http://example.com/BlenderService/GetBlenders',
            update: 'http://example.com/BlenderService/UpdateBlender',
            destroy: 'http://example.com/BlenderService/DeleteBlender'
        },
        operationParam: 'operation',
        targetNamespace: 'http://example.com/',
        reader: {
            type: 'soap',
            record: 'm|Blender',
            namespace: 'm'
        }
    }
});

让我们回顾一下我们刚刚指定的配置选项。我们创建了一个将包含“Blender”模型实例的 Store。我们使用 SOAP 代理配置了 Store。让我们更详细地回顾一下代理的选项

• Ext.data.soap.Proxy#cfg-url - 代理将使用此作为 SOAP 服务的所有 4 个 CRUD（创建、读取、更新和销毁）操作的端点 url。由于浏览器的 同源策略，此 url 必须与您的 Ext JS 应用程序位于相同的域、协议和端口上。如果您需要与远程 SOAP 服务通信，则必须在服务器上创建一个服务器端代理，该代理从远程服务器获取并返回 SOAP 响应。
• Ext.data.soap.Proxy#cfg-api - 在常规 Ext.data.proxy.Ajax 中，api 配置属性为每个 CRUD 操作指定单独的 url。但是，在 SOAP 代理中，api 属性用于为每个 CRUD 操作配置 SOAP 操作。注意：您只需要为您应用程序中实际使用的每个操作指定一个操作。例如，如果此代理仅用于加载数据而不用于写入数据，则只需配置“读取”操作。
• Ext.data.soap.Proxy#cfg-soapAction - SOAP 规范要求每个 SOAP 请求都包含 SOAPAction HTTP 请求标头。soapAction 配置指定将随每个 CRUD 操作发送的 SOAPAction 标头。必须为使用 api 配置配置的每个 SOAP 操作指定 soapAction。

• Ext.data.soap.Proxy#cfg-operationParam - 包含操作名称的 url 参数的名称。例如，operationParam 为“operation”将导致读取请求 url 看起来像这样

  http://example.com/BlenderService/?operation=GetBlenders

• Ext.data.soap.Proxy#cfg-targetNamespace - SOAP 服务的目标命名空间。这是构建 SOAP envelope 所必需的。

• Ext.data.soap.Proxy#cfg-reader - SOAP Ext.data.soap.Reader 负责从 SOAP 响应中提取记录并将它们解析为 Ext.data.Model 实例。reader 的 Ext.data.soap.Reader#cfg-record 属性是重复 XML 元素的 tagName，该元素包含 SOAP 响应中的记录。reader 的 Ext.data.soap.Reader#cfg-namespace 属性是包含记录字段数据的元素的 XML 命名空间前缀。

加载记录

现在我们已经配置好了一切，将数据加载到 store 中就像调用 store 的 load 方法一样简单。在幕后，这将创建一个 SOAP 请求，请求发送到代理的 api 配置属性中的 read 属性指定的操作，在本例中为“GetBlenders”。假设 GetBlenders SOAP 操作需要一个“brand”参数。我们可以将参数直接传递给 store 的 load 方法，或者如果每个请求的参数值相同，我们可以使用 Ext.data.soap.Proxy#cfg-extraParams 配置直接在代理上配置它。对于此示例，让我们只将其传递给 store 的 load 方法

store.load({
    params: {
        brand: 'Blendtec'
    }
});

上面的调用应触发对以下地址的 post

http://example.com/BlenderService/?operation=GetBlenders

假设对上述请求的响应如下所示

<?xml version="1.0" encoding="UTF-8"?>
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
    <soap:Body>
        <m:GetBlendersResponse xmlns:m="http://example.com/">
            <m:Blender>
                <m:id>1</m:id>
                <m:name>Total Blender Classic WildSide</m:name>
                <m:price>454.95</m:price>
            </m:Blender>
            <m:Blender>
                <m:id>2</m:id>
                <m:name>The Kitchen Mill</m:name>
                <m:price>179.95</m:price>
            </m:Blender>
        </m:GetBlendersResponse>
    </soap:Body>
</soap:Envelope>

让我们将回调函数传递给 load 调用，以便我们可以看到 store 的记录在加载后的样子

store.load({
    params: {
        brand: 'Blendtec'
    },
    callback: function() {
        console.log(store.getCount()); // 2 records were loaded.
        console.log(store.getAt(0).get('name')); // get the name field of the first record.
    }
});

自定义 SOAP Envelope 和 Body

现在，使用您选择的浏览器中的开发者工具，检查传出的 XHR 请求。您应该看到对以下地址的 HTTP POST

http://example.com/BlenderService/?operation=GetBlenders

现在检查此请求的 post body。您应该看到一个 SOAP envelope，看起来像这样（为了便于阅读而格式化）

<?xml version="1.0" encoding="utf-8" ?>
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
    <soap:Body>
        <GetBlenders xmlns="http://example.com/">
            <brand>Blendtec</brand>
        </GetBlenders>
    </soap:Body>
</soap:Envelope>

此 SOAP envelope 是使用 Ext.data.soap.Proxy#cfg-envelopeTpl 模板构建的，SOAP body 是使用 Ext.data.soap.Proxy#cfg-readBodyTpl 模板构建的。如果 SOAP 服务需要不同的格式，您可能需要修改 body 模板。您通常不需要修改 envelope 模板，但它也是可自定义的。这些可配置模板可以是 Ext.XTemplate 实例或构成 XTemplate 的字符串数组。以下示例说明了如何使用自定义模板将“soap”envelope 命名空间前缀更改为“s”

proxy: {
    ...
    envelopeTpl: [
        '<?xml version="1.0" encoding="utf-8" ?>',
        '<s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">',
            '{[values.bodyTpl.apply(values)]}',
        '</s:Envelope>'
    ],
    readBodyTpl: [
        '<s:Body>',
            '<{operation} xmlns="{targetNamespace}">',
                '<tpl foreach="params">',
                    '<{$}>{.}</{$}>',
                '</tpl>',
            '</{operation}>',
        '</s:Body>'
    ]
}

再次调用 store.load()，您应该看到 post body 是从新模板生成的

<?xml version="1.0" encoding="utf-8" ?>
<s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">
    <s:Body>
        <GetBlenders xmlns="http://example.com/">
            <brand>Blendtec</brand>
        </GetBlenders>
    </s:Body>
</s:Envelope>

创建、更新和销毁

创建、更新和销毁请求的工作方式与读取请求几乎相同，但 SOAP body 的构建方式除外。简单的区别是 - 读取请求使用一组参数构建 SOAP body，而创建、更新和销毁请求使用一组记录构建 SOAP body。默认情况下，用于为创建、更新和销毁请求创建 SOAP body 的模板都相同

[
    '<soap:Body>',
        '<{operation} xmlns="{targetNamespace}">',
            '<tpl for="records">',
                '{% var recordName=values.modelName.split(".").pop(); %}',
                '<{[recordName]}>',
                    '<tpl for="fields">',
                        '<{name}>{[parent.get(values.name)]}</{name}>',
                    '</tpl>',
                '</{[recordName]}>',
            '</tpl>',
        '</{operation}>',
    '</soap:Body>'
]

可以使用 Ext.data.soap.Proxy#cfg-createBodyTpl、Ext.data.soap.Proxy#cfg-updateBodyTpl 和 Ext.data.soap.Proxy#cfg-destroyBodyTpl 配置选项自定义这些模板，如上面关于自定义 SOAP envelope 和 body 的部分中所述，或者可以使用 Ext.data.soap.Proxy#cfg-writeBodyTpl 配置选项将相同的模板应用于所有三个操作。

要发出创建请求，我们首先必须创建一个新记录

var blender = Ext.create('Blender', {
    name: 'WildSide Jar',
    price: 99
});

然后将记录添加到 store 并调用其 sync 方法

store.add(blender);
store.sync();

这将导致向端点 url 发出 HTTP POST，并带有创建操作参数

`http://example.com/BlenderService/?operation=CreateBlender`

如果您检查此请求的 post body，您将看到新创建的记录已编码到 SOAP body 中

<?xml version="1.0" encoding="utf-8" ?>
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
    <soap:Body>
        <CreateBlender xmlns="http://example.com/">
            <Blender>
                <id>0</id>
                <name>WildSide Jar</name>
                <price>99</price>
            </Blender>
        </CreateBlender>
    </soap:Body>
</soap:Envelope>

对创建请求的响应应包括服务器创建的记录，以便可以在客户端更新记录的 id。例如

<?xml version="1.0" encoding="UTF-8"?>
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
    <soap:Body>
        <m:GetBlendersResponse xmlns:m="http://example.com/">
            <m:Blender>
                <m:id>3</m:id>
                <m:name>WildSide Jar</m:name>
                <m:price>99</m:price>
            </m:Blender>
        </m:GetBlendersResponse>
    </soap:Body>
</soap:Envelope>

我们可以通过在 store 成功同步后检查其 id 属性来验证记录是否具有正确的 id

store.sync({
    success: function() {
        console.log(blender.getId()); // 3
    }
});

要更新记录，只需修改其字段之一，然后同步 store

store.getAt(0).set('price', 200);
store.sync();

要销毁记录，请从 store 中删除它，然后同步

store.removeAt(1);
store.sync();

与创建操作一样，如果服务器对更新或销毁操作的响应包括记录，则客户端记录将使用响应中的数据更新。

这就是您开始使用 SOAP 和 Ext JS 所需知道的全部内容。有关更多详细信息，请参阅 SOAP Ext.data.soap.Proxy 和 Ext.data.soap.Reader 的 API 文档。

有关工作示例和完整源代码，请参阅 SOAP Grid 示例