从ajax响应中提取xml属性时遇到问题

Question

我正在使用 SharePoint on Premises 2019，并且有一个对 SharePoint 列表的 ajax 请求。该列表有一个名为“附件”的预先存在的列，其中包含上传到其中的图像。

现在，返回列表元素的 ajax 请求将返回附件列的 xml 响应。回应

<feed
    xmlns="http://www.w3.org/2005/Atom"
    xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices"
    xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"
    xmlns:georss="http://www.georss.org/georss"
    xmlns:gml="http://www.opengis.net/gml">
    <id>e3a2717c-932c-43a0-b1c6-f81a75329948</id>
    <title />
    <updated>2024-03-26T06:02:30Z</updated>
    <entry>
        <id>http://po/sites/pssm/_api/Web/Lists(guid'f80db476-8b0c-4a8b-b9b6-0516028525d5')/Items(25)/AttachmentFiles('contact.webp')</id>
        <category term="SP.Attachment" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
        <link rel="edit" href="Web/Lists(guid'f80db476-8b0c-4a8b-b9b6-0516028525d5')/Items(25)/AttachmentFiles('contact.webp')" />
        <title />
        <updated>2024-03-26T06:02:30Z</updated>
        <author>
            <name />
        </author>
        <content type="application/xml">
            <m:properties>
                <d:FileName>contact.webp</d:FileName>
                <d:FileNameAsPath m:type="SP.ResourcePath">
                    <d:DecodedUrl>contact.webp</d:DecodedUrl>
                </d:FileNameAsPath>
                <d:ServerRelativePath m:type="SP.ResourcePath">
                    <d:DecodedUrl>/sites/pssm/Lists/PoliceHomeAds/Attachments/25/contact.webp</d:DecodedUrl>
                </d:ServerRelativePath>
                <d:ServerRelativeUrl>/sites/pssm/Lists/PoliceHomeAds/Attachments/25/contact.webp</d:ServerRelativeUrl>
            </m:properties>
        </content>
    </entry>
</feed>

这里的图片url可以在xml响应的serverRelativeUrl标签中找到。

这是我生成标签的js循环语句。

  <a" href="' + objArray[i].AttachmentFiles.__deferred.uri + '">    </a>;

现在我使用锚标记只是为了可以更清楚地看到语句返回的结果。如果我使用图像标签，它只会显示浏览器图像默认图标。

帮忙。如何显示图像？

Answer 1

XML 包含名称空间，因此最有效的方法 imho 是 Xpath。它允许您使用表达式来匹配节点。

XML 中的命名空间是 URI。别名/前缀用于使序列化的 XML 文档更小并且更易于阅读。然而以下3个元素都可以读作

{http://www.w3.org/2005/Atom}feed

:

• <feed xmlns="http://www.w3.org/2005/Atom"/>

• <a:feed xmlns:a="http://www.w3.org/2005/Atom"/>

• <atom:feed xmlns:atom="http://www.w3.org/2005/Atom"/>

fetchXML('https//...').then(
  (xmlDocument) => {
    // define a namespace resolver to map prefixes in the xpath 
    // expression to URIs matching the namespace definitions in the document
    const resolver = {
      lookupNamespaceURI: (prefix) => {
        const namespaces = {
          atom: 'http://www.w3.org/2005/Atom' 
        };
        return namespaces[prefix] || null;
      }
    }
  
    const output = document.querySelector('#output');

    // clear output
    output.textContent = '';
    
    // append nodes
    output.append(
       // fetch from XML
      ...fetchNodes('//atom:entry/atom:id', xmlDocument, resolver).map(
        (node) => {
          // create HTML nodes
          const li = document.createElement('li');
          const a = li.appendChild(document.createElement('a'));
          a.setAttribute('href', node.textContent);
          a.textContent = node.textContent;
          return li;
        }
      )
    );
  }
);

// helper function to fetch nodes/values
function fetchNodes(expression, context, resolver) {
    // evaluate expression in context with resolver
    const xpathResult = (context.ownerDocument || context).evaluate(
      expression,
      context,
      resolver,
      XPathResult.ANY_TYPE,
      null
    );
    
    switch (xpathResult.resultType) {
      case XPathResult.BOOLEAN_TYPE :
        return xpathResult.booleanValue;
      case XPathResult.NUMBER_TYPE :
        return xpathResult.numberValue;
      case XPathResult.STRING_TYPE :
        return xpathResult.stringValue;
      default:
        const result = [];
        // iterate result an fill array
        let node = xpathResult.iterateNext();
        while (node) {
            result.push(node);
            node = xpathResult.iterateNext();
        }
        return result;
    }
}


async function fetchXML(url) {
  return (new DOMParser()).parseFromString(
    // await fetch(url)
    `<feed
    xmlns="http://www.w3.org/2005/Atom"
    xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices"
    xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"
    xmlns:georss="http://www.georss.org/georss"
    xmlns:gml="http://www.opengis.net/gml">
    <id>e3a2717c-932c-43a0-b1c6-f81a75329948</id>
    <title />
    <updated>2024-03-26T06:02:30Z</updated>
    <entry>
        <id>http://po/sites/pssm/_api/Web/Lists(guid'f80db476-8b0c-4a8b-b9b6-0516028525d5')/Items(25)/AttachmentFiles('contact.webp')</id>
        <category term="SP.Attachment" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
        <link rel="edit" href="Web/Lists(guid'f80db476-8b0c-4a8b-b9b6-0516028525d5')/Items(25)/AttachmentFiles('contact.webp')" />
        <title />
        <updated>2024-03-26T06:02:30Z</updated>
        <author>
            <name />
        </author>
        <content type="application/xml">
            <m:properties>
                <d:FileName>contact.webp</d:FileName>
                <d:FileNameAsPath m:type="SP.ResourcePath">
                    <d:DecodedUrl>contact.webp</d:DecodedUrl>
                </d:FileNameAsPath>
                <d:ServerRelativePath m:type="SP.ResourcePath">
                    <d:DecodedUrl>/sites/pssm/Lists/PoliceHomeAds/Attachments/25/contact.webp</d:DecodedUrl>
                </d:ServerRelativePath>
                <d:ServerRelativeUrl>/sites/pssm/Lists/PoliceHomeAds/Attachments/25/contact.webp</d:ServerRelativeUrl>
            </m:properties>
        </content>
    </entry>
</feed>`,
   'application/xml'
  );
}

<ul id="output"></ul>