如何在JavaScript/JQuery中读取URL中的WSDL并输出Web方法？

当然有可行方案啦！你说得完全没错——既然浏览器能直接访问带?WSDL的链接展示内容，我们肯定能通过前端代码来获取并解析它。下面给你详细说说具体实现思路和代码示例：

先注意跨域限制 #

如果你的前端页面和WSDL所在域名不同，浏览器的同源策略会直接阻止你发起请求。这时候有两种解决办法：

• 让目标WSDL服务器配置CORS，允许你的页面域名访问；
• 用后端代理（比如Node.js、PHP写个简单接口）中转请求，前端先请求自己的后端接口，再由后端去获取WSDL内容返回给前端。

如果是同域或者已经搞定跨域问题，那就可以继续往下走啦！

步骤1：获取WSDL内容 #

jQuery写法 #

const wsdlUrl = 'https://soap.novice.com/user?WSDL';
$.get(wsdlUrl, function(xmlData) {
  // 成功拿到WSDL的XML内容，接下来解析它
  parseWsdl(xmlData);
})
.fail(function(error) {
  console.error('获取WSDL失败:', error);
});

原生JavaScript写法 #

const wsdlUrl = 'https://soap.novice.com/user?WSDL';
fetch(wsdlUrl)
  .then(response => response.text())
  .then(xmlText => {
    const parser = new DOMParser();
    const xmlData = parser.parseFromString(xmlText, 'application/xml');
    parseWsdl(xmlData);
  })
  .catch(error => console.error('获取WSDL失败:', error));

步骤2：解析WSDL提取Web方法 #

WSDL是标准的XML格式，Web方法（也就是接口）定义在<portType>节点下的<operation>标签里。我们可以通过DOM操作提取这些方法名：

function parseWsdl(xmlData) {
  // 获取所有portType节点
  const portTypes = xmlData.getElementsByTagName('portType');
  
  // 遍历每个portType，提取里面的Web方法
  for (let i = 0; i < portTypes.length; i++) {
    const portType = portTypes[i];
    const portTypeName = portType.getAttribute('name');
    console.log(`--- ${portTypeName} 下的Web方法 ---`);
    
    const operations = portType.getElementsByTagName('operation');
    for (let j = 0; j < operations.length; j++) {
      const methodName = operations[j].getAttribute('name');
      console.log(`- ${methodName}`);
      // 要是需要提取方法的输入输出参数，还可以继续解析operation下的<input>、<output>节点
    }
  }
}

特殊情况：带命名空间的WSDL #

如果你的WSDL使用了官方命名空间（比如http://schemas.xmlsoap.org/wsdl/），上面的getElementsByTagName可能找不到节点，这时候得用getElementsByTagNameNS指定命名空间：

// 替换原来的operations获取代码
const wsdlNs = 'http://schemas.xmlsoap.org/wsdl/';
const operations = portType.getElementsByTagNameNS(wsdlNs, 'operation');

这样就能成功提取出WSDL里的所有Web方法啦！要是遇到其他问题，比如WSDL结构特殊，只需要调整解析XML的逻辑就好。

内容的提问来源于stack exchange，提问作者Anandhakrishnan