直接上代码:
soupWrapper.js
/**
* 定义满足 SOAP 协议的参数。
* 在这个方法中要定义以下几个参数:
* 1.调用服务的方法名;
* 2.参数名称以及参数值
*/
/** 仅带一个参数指明要调用某服务的 ** 方法(js不支持方法同名不同参,后定义的会将先定义的覆盖掉)~ */
function wrapMethodName(strMethodName) {
var postData = "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
postData += "<soap:Envelope ";
postData += "xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" ";
postData += "xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" ";
postData += "xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">";
postData += "<soap:Body><";
postData += strMethodName;
postData += " xmlns=\"http://localhost:8888/FirstWebServiceServer\" /></soap:Body>";
postData += "</soap:Envelope>";
alert("wrapData(strMethodName)\n拼裝結果:\n" + postData);
return postData;
}
/**
* 第一个参数指明要调用的方法,
* 第二个参数传递字符串 json 数据。
* 注意,虽然对于不管何种需求,都只是向服务器传递了一个 json字符串类型的数据
* 但由于 json 这个数据格式能够包含非常丰富的数据,
* 所以说,是完全能够弥补调用方法的参数仅限于一个的缺憾的~
*/
function wrapData(strMethodName, strJsonParam) {
// 根据WSDL分析sayHelloWorld是方法名,parameters是传入参数名
var postData = "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
postData += "<soap:Envelope ";
postData += "xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" ";
postData += "xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" ";
postData += "xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">";
postData += "<soap:Body><";
postData += strMethodName;
postData += " xmlns=\"http://localhost:8888/FirstWebServiceServer\"><jsonData>";
postData += strJsonParam;
postData += "</jsonData></";
postData += strMethodName;
postData += "></soap:Body>";
postData += "</soap:Envelope>";
alert("wrapData(strMethodName, strJsonParam)\n拼裝結果:\n" + postData);
return postData;
}
testSimplified.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>testSimplified3</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/soupWrapper.js"></script>
<script type="text/javascript">
$(function() {
$("#btnWs").click(btnAjaxPost);
})
function btnAjaxPost() {
$.ajax({
type: 'post',
contentType: 'application/json; charset=utf-8',
url: 'http://localhost:8888/FirstWebServiceServer/services/Weather',
data: wrapMethodName("weather"),
dataType: 'xml',
success: function(xml) {
var jsonStr;
if($.browser.msie){
jsonStr = xml.getElementsByTagName("ns1:out")[0].childNodes[0].nodeValue;
} else{
// 这种写法通用一点,调用 webservice 的什么方法是会经常发生变动的~
jsonStr = $(xml).find("[nodeName=ns1:out]").text();
}
if(jsonStr != null) {
// 对 JQuery API 不是很熟悉~
$('#result').text(jsonStr);
} else {
alert("jsonStr == null");
return;
}
},
error: function(x, e) {
alert('error:' + x.responseText);
}
});
}
</script>
</head>
<body>
<input type="button" id="btnWs" value="使用soupWrapper.js调用Weather服务的weather方法" />
<div id='result'></div>
<div>有点儿组牛角尖了,查了蛮久xfire如何返回json数据。</div>
<div>其实也不用啊,用JQuery从返回的xml找到实际的json数据并不难啊,下面两种方法都可以:</div>
<div>resultXml.getElementsByTagName("ns1:out")[0].childNodes[0].nodeValue</div>
<div>$(resultXml).find("[nodeName=ns1:out]").text();</div>
<div>有时候真的去独立思考一下,所寻找的答案是非真值得自己去花费那么多的精力~</div>
</body>
</html>