問題

這實際上是三個問題：

• 微信小程式請求獲取 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物件或者陣列