前段时间做了一个用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","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中可以获取返回结果，具体如何解析就灵活多了。
原文链接：https://www.f2er.com/ajax/166088.html