Ajax通過SOAP協議呼叫Web服務

孫群發表於2013-07-21
協議Web

前段時間做了一個用Ajax呼叫Web服務的Demo，在此記錄一下。呼叫的是一個地理編碼服務，該服務可以將地址轉換為地理座標，如下所示:


點選該服務可以看到該服務SOAP形式的請求與返回結果形式，如下圖所示：


我們用Ajax通過SOAP協議呼叫Web服務，其實就是要構建SOAP形式的請求的xml，如上圖所示，請求的xml格式一定要與上面給出的SOAP1.1 request保持一致。首先看一下畫紅框的頭資訊，Ajax的呼叫必須是POST請求，並且Ajax的Content-Type和SOAPAction這兩個頭資訊也必須和上文該服務給出的一致。如下所示：

var url = "https://www.ip-assistance.pt/ws/gpsg/gps.asmx";//注意是https				
				xmlHttp.open("post", url, true);
				xmlHttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
				xmlHttp.setRequestHeader("SOAPAction","http://www.ip-assistance.pt/WS/GPS/FreeTextGeoCode");

從上圖中可以看到，瀏覽器位址列中的協議是https，所以我們Ajax的url也必須是https://...

全部程式碼如下：

<!doctype>
<html>
	<head>
		<title></title>
		<style>
			table td.first{
				width:180px;
			}
		</style>		
	</head>
	<body>
		<div style="width:1000px;">
			<table style="width:100%;">
				<tr>
					<td class="first">lcCalle</td>
					<td><input type="text" id="lcCalle" value="Largo Jean Monnet" /></td>
				</tr>
				<tr>
					<td class="first">lnResultados</td>
					<td><input type="text" id="lnResultados" value="100" /></td>
				</tr>
			</table>
			<textarea id="textarea1" style="width:100%;height:400px;resize:none;"></textarea>
			<button style="display:block;" onclick="soapFreeTextGeoCode()">FreeTextGeoCode</button>
		</div>
		<script type="text/javascript">
			var textarea1 = document.getElementById("textarea1");
			
			function getXmlHttp(){
				var xmlHttp = null;
				try{  
					xmlHttp = new XMLHttpRequest();  
				}  
				catch(e){  
					try{  
						xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  
					}  
					catch(e){  
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
					}  
				}
				return xmlHttp;
			}
		
			function soapFreeTextGeoCode(){
				var xmlHttp = getXmlHttp();
				if(!xmlHttp){
					alert("瀏覽器不支援Ajax ！");
					return;
				}
				
				textarea1.value = "";
				var lcCalle = document.getElementById("lcCalle").value;
				var lnResultados = parseInt(document.getElementById("lnResultados").value);
				
				var data = "<?xml version='1.0' encoding='utf-8'?>";
				data += "<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/'>";
				data += "<soap:Body>";
				data += "<FreeTextGeoCode xmlns='http://www.ip-assistance.pt/WS/GPS/'>";
				data += "<lcId>DBB031FBACB3</lcId>";
				data += "<lcCalle>"+lcCalle+"</lcCalle>";
				data += "<lnResultados>"+lnResultados+"</lnResultados>";
				data += "<lcApp>SIA</lcApp>";
				data += "</FreeTextGeoCode>";
				data += "</soap:Body>";
				data += "</soap:Envelope>";				
				
				var url = "https://www.ip-assistance.pt/ws/gpsg/gps.asmx";//注意是https				
				xmlHttp.open("post", url, true);
				xmlHttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
				xmlHttp.setRequestHeader("SOAPAction","http://www.ip-assistance.pt/WS/GPS/FreeTextGeoCode");
				xmlHttp.onreadystatechange = function () {
                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                        var responseXML = xmlHttp.responseXML;
						var FreeTextGeoCodeResult = responseXML.getElementsByTagName("FreeTextGeoCodeResult")[0];
						var childNodes = FreeTextGeoCodeResult.childNodes;
						var length = childNodes.length;
						for(var i=0;i<length;i++){
							var stringNode = childNodes[i];
							var textNode = stringNode.firstChild;
							var str = textNode.data;
							textarea1.value += str + "\n";
						}
						console.log("FreeTextGeoCode Result:",responseXML);
                    }    
                }
				xmlHttp.send(data);
			}
		</script>
	</body>
</html>


需要注意的是，上文中所拼接的lcId的值是我隨意寫的，所以這個服務不能真正使用，要想使用需要向服務釋出者申請一個key，此處只是假設我們已經獲取了key為DBB031FBACB3，不過呼叫該服務的Ajax的程式碼邏輯確實是如上文所述，最後我們在回撥函式的xmlHttp.responseXML中可以獲取返回結果，具體如何解析就靈活多了。


相關文章