Ajax通过SOAP协议调用Web服务

最新推荐文章于 2021-08-06 08:21:21 发布

孙群

最新推荐文章于 2021-08-06 08:21:21 发布

阅读量5.4k

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/iispring/article/details/9398083

版权

Web 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

前段时间做了一个用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;" οnclick="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中可以获取返回结果，具体如何解析就灵活多了。

孙群

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax通过SOAP协议调用Web服务

前段时间做了一个用Ajax调用Web服务的Demo，在此记录一下。调用的是一个地理编码服务，该服务可以将地址转换为地理坐标，如下所示:点击该服务可以看到该服务SOAP形式的请求与返回结果形式，如下图所示：我们用Ajax通过SOAP协议调用Web服务，其实就是要构建SOAP形式的请求的xml，如上图所示，请求的xml格式一定要与上面给出的SOAP1.1 request保持一致
复制链接

扫一扫