微信小程序请求SOAP协议格式的数据并解析Dom节点

问题

这实际上是三个问题：

• 微信小程序请求获取 SOAP 协议格式的数据
• 将获取到的 xml 解析成可用的字符串
• 将字符转转化为 json 对象供界面使用

背景

看看后台这扎心的数据，作为2010后的程序员，给你这样的接口，你第一眼是不是也是一脸懵逼的状态。

是的，没有错，是HTTP请求，但是请求的请求体和响应的响应体，都是SOUP格式的数据。不多bb，直接看怎么处理吧！

微信小程序请求获取 SOAP 协议格式的数据

根据后台给的请求格式如下：

POST /weixin.asmx HTTP/1.1
Host: sqlb.mynatapp.cc
Content-Type: text/xml; charset=utf-8
Content-Length: length
SOAPAction: "lib/dzLogin"

<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
  <soap:Body>
    <dzLogin xmlns="lib">
      <yhm>string</yhm>
      <mm>string</mm>
      <checkcol>string</checkcol>
      <openid>string</openid>
    </dzLogin>
  </soap:Body>
</soap:Envelope>

写个请求在微信小程序中很容易，我们只需要把上面格式的请求数据，拼接，组装成一个 http 请求就行了。

    // 获取soap格式数据
    getHttpdata: function () {

        //组装请求体
        var httpBody = '<?xml version="1.0" encoding="utf-8"?>';
        httpBody += '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">';
        httpBody += '<soap:Body>';
        httpBody += '<dzLogin xmlns="lib">';
        httpBody += ' <yhm>' + '123' + '</yhm>';
        httpBody += '<mm>' + '123' + '</mm>';
        httpBody += '<checkcol>' + 'barcode' + '</checkcol>';
        httpBody += '<openid> ' + 'oK1xqv1H0Q503Uk7R2QuEZ8k-H1w' + '</openid>';
        httpBody += '</dzLogin>';
        httpBody += '</soap:Body>';
        httpBody += '</soap:Envelope>';

        wx.request({
            url: 'https://sqlb.mynatapp.cc/weixin.asmx?op=dzLogin',
            data: httpBody,  //请求体
            method: 'POST',  //使用POST请求
            header: { // 设置请求的 header
                'content-type': 'text/xml; charset=utf-8',
                'SOAPAction': 'lib/dzLogin',    //因为后台给的请求头上有该数据，所以也得加上
            },

            success: function (res) {   
                console.log(res);  //得到有规则的xml数据
            },
            fail: function () {
                // fail
            },
            complete: function () {
                // complete
            }
        })


    },

得到的 soap 数据格式如下：

格式化后如下，且不说这个借口数据格式怎么样，显然，这样的数据，我们还需要进一步提取，才能使用。

<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
    <soap:Body>
        <dzLoginResponse xmlns="lib">
            <dzLoginResult>[{"RESULT":"true","dzrefcode":"71497","needexamdzrefcode":"0"}]</dzLoginResult>
        </dzLoginResponse>
    </soap:Body>
</soap:Envelope>

将获取到的 xml 数据解析成可用的字符串

我们都知道，在小程序中，界面上是没有 DOM 和 window 这种概念。所以，很显然，我们这个 xml 数据解析，实际上就是DOM 节点解析，该怎么办？也很容易，自己讲 DOM 操作的脚本导入进去就行了。脚本文件在这里：https://github.com/jindw/xmldom

新建一个lib文件夹，将 dom.js、dom-parser.js、sax.js、entities.js 拷贝到里面（lib文件夹与pages、utils平级）

准备好后，就可以解析数据了：

        //导入包
        var Parser = require('../../../lib/dom-parser.js'); 

        //微信请求成功
        success: function (res) {               

                //新建DOM解析对象
                var parser = new Parser.DOMParser();
                //基于请求到的 XML数据 来构建DOM对象
                var xmlDoc = parser.parseFromString(res.data, "text/xml");              
                //获取DOM节点的标签为 dzLoginResult 的第一个节点对象
                var dzLoginResult = xmlDoc.getElementsByTagName('dzLoginResult')[0];
                //得到节点数据，文本也是节点所以使用firstChild.nodeValue,只有文本节点，所以firstChild就是文本节点
                console.log(dzLoginResult.firstChild.nodeValue); //nodeValue问节点值

                //转化为json对象
                var jsond = JSON.parse(dzLoginResult.firstChild.nodeValue);
                console.log(jsond[0].dzrefcode);
            }

将字符转转化为 json 对象供界面使用

上面其实已经给出来了：

                //转化为json对象,得到的就是可以在开发中使用json对象
                var jsond = JSON.parse(dzLoginResult.firstChild.nodeValue);

这里要说明的是：

1. JSON.stingify() 可以将JSON对象或者数组转换成json格式字符串

2. JSON.parse()将json格式的字符串，转换成JSON对象或者数组