站長留言

  • ✅ 本站維護及更新歷史紀錄,詳情請參考公告
  • ✅ 有任何意見、想法,歡迎留言給Spicy知道喔
  • ✅ 固定於每周一至周五更新Blogger文章,周末不定期
程式JavaScriptjQuerySOAP

【jQuery】如何使用 jquery soap 完成 SOAP 所做的 Web Services

tags: Javascript jQuery

SOAP 簡單物件存取協定

  • Simple Object Access Protocol
  • 一種標準化的通訊規範
  • SOAP協議= HTTP協議+ XML數據格式
  • 以XML為基礎的通訊協定,其作用是編譯網路服務所需的要求或回應後,再將編譯後的訊息送出到網路,簡單來說就是應用程式和用戶之間傳輸資料的一種機制

語法規則

Example

<soapenv:Envelope 
xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" 
xmlns:vis="http://vision.forestry.xxx/">
   <soapenv:Header/>
   <soapenv:Body>
      <vis:GetVer/>
   </soapenv:Body>
</soapenv:Envelope>

測試工具:SoapUI

jQuery Soap

  • 直接使用jQuery來完成SOAP所做的Web Services
  • jquery.soap.jsdownload

parameter 常用參數

  • url (String)
    • 指定要進行呼叫的後端位址
    • 可以為絕對位址、相對位址
  • method (String)
    • 例如:vis:GetVer
  • envAttributes (Object)
    • Set additional attributes (like namespaces) on the soap:Envelope node
    • 例如:{ "xmlns:vis": "http://vision.forestry.xxx/" }
  • appendMethodToURL (Boolean)
    • 是否將方法加到URL後方
    • 預設為true
  • data
    • 傳送至Server的資料
    • Type
      • String
      var xml =
          ['<requestNode>',
              '<name>Remy Blom</name>',
              '<msg>Hi!</msg>',
          '</requestNode>'];
      
      $.soap({
          data: xml.join('')
      });
      
      • json:格式為Key/Value,可節省很多程式碼 (推薦使用)
      $.soap({
          method: 'requestNode',
          data: {
              name: 'Remy Blom',
              msg: 'Hi!'
          }
      });
      
    • more detail
  • success
    • 請求成功時,執行的方法,通常用於接收server回傳的資料
    • 例如:
      success: function(response) {
                  console.log(response);
              }
      

其他參數

  • async
    • 是否與其他code同步執行,預設為 true
  • error
    • 請求失敗時,執行的方法
  • namespaceQualifier
    • 於方法前方加上 namespace,但可能發生BUG
    • 例如:namespaceQualifier: "vis", method: "Rematch" 等同 method: "vis:Rematch"
  • namespaceURL
    • namespace 的來源 URL
    • 例如:http://vision.forestry.xxx/
  • 官方文件:https://github.com/doedje/jquery.soap/blob/master/doc/options.md

參數 data 詳細解說

  1. 原始 saop xml
<soap:Envelope xmlns:soap="http://www.w3.org/2003/05/soap-envelope/">
	<soap:Body>
		<requestNode>
			<name>Remy Blom</name>
			<msg>Hi!</msg>
		</requestNode>
	</soap:Body>
</soap:Envelope>
  1. 寫法一:data(string)
    • 直接將整個 soap 的 body 部分的 xml 丟進 data
    var xml =
        ['<requestNode>',
            '<name>Remy Blom</name>',
            '<msg>Hi!</msg>',
        '</requestNode>'];
    
    $.soap({
        data: xml.join('')
    });
    
  2. 寫法二:data(json object) + method
    • 將 method 和 data 分開
    $.soap({
        method: 'requestNode',
        data: {
            name: 'Remy Blom',
            msg: 'Hi!'
        }
    });
    

Example1:有 data

jQuery

// Soap
// html <head>要import
// <script src="js/jquery.soap.js"></script>

function startCamera(view) {
    $.soap({
        url: "/cgi-bin/ctrl_service",   //輸入web service的URL
        method: "vis:StartView",    //輸入方法
        data: { view: view },   //輸入資料,沒資料也要填{}
        envAttributes: { "xmlns:vis": "http://vision.forestry.xxx/" },   //方法tag的source url
        appendMethodToURL: false,   //是否將方法直接加入URL後端,通常為false
        success: function(response) {
            //web service的回傳資料
            console.log(response);
        }
    });
}

生成的 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" xmlns:vis="http://vision.forestry.xxx/">
    <soap:Body>
        <vis:StartView>
            <view>left</view>
        </vis:StartView>
    </soap:Body>
</soap:Envelope>

Example2:無 data

jQuery

// Soap
// html <head>要import
// <script src="js/jquery.soap.js"></script>

function rematch(view) {
    $.soap({
        url: "/cgi-bin/ctrl_service",
        namespaceQualifier: "vis",
	    namespaceURL: "http://vision.forestry.xxx/",
        method: "Rematch",
        data: {},
        appendMethodToURL: false,
        success: function(response) {
            console.log(response)
        }
    });
}

生成的 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>
        <vis:Rematch xmlns:vis="http://vision.forestry.xxx/"></vis:Rematch>
    </soap:Body>
</soap:Envelope>

討論

  • Q:為何 Example1 不能使用 Example2 的方式?
  • 以下為套用 Example2 的寫法後生成的 SOAP
    1. 可以發現 data tag <view> 的部分變成了vis:view → 故造成錯誤
    2. namespaceQualifier: "vis" 不僅將 method 加上 namespaces,連 data 也跟著加上 namespaces,故造成錯誤
<?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>
        <vis:StartView xmlns:vis="http://vision.forestry.xxx/">
            <vis:view>left</vis:view>
        </vis:StartView>
    </soap:Body>
</soap:Envelope>

Reference

  1. 網路通訊協定 - SOAP:
    https://www.ctimes.com.tw/culture/showbox-tw.asp?o=HJN84855CB0CU-0PT1
  2. SoapUI 官網:https://www.soapui.org/
  3. jQuery Soap 官網:https://github.com/doedje/jquery.soap

沒有留言:

張貼留言

本網站建議使用電腦或平板瀏覽