您的位置：首页 > Web前端 > JavaScript

使用js调用webservice的示例

2013-11-07 22:38 495 查看

1，为什么要拦截soap协议文本呢？
因为要通过js或urlConnection调用服务器提供的方法。需要使用soap协议文本。
2，我们可以通过js和urlConnection轻量级的调用服务器方法。
我们之前都是使用服务器提供的类来调用，耦合度较高，服务器的代码改动会造成客户端的代码改动。

3，通过js请求，就是通过ajax请求，使用jQuery的ajax，通过jQuery.post(url)发送。使用的是XMLHttpRequest对象。
不可以通过jQuery的post方式发送！
因为对于jQuery来说，限制跨域访问。跨域是指两个服务器之间的访问。
例如我们的工程地址是http://localhost:8080/day06，要去访问百度的地址：http://www.baidu.com:80/index.php，这是不可以的。
查看jQuery1.4的API，发现post方法的参数可以是：

在jQuery1.6的API文档中，其参数类型定义为：

小问题：
发布服务之后，不可以再次发布服务，原因是端口已经占用。因为开启服务以后，会在后台开启一个socket，这个socket绑定了指定的端口，所以回报端口占用错误。

4，在JavaEE视图中，工具栏有一个LaunchSOAP Web Service Explorer。

这个是webserivce的浏览器，可以在这里注册我们的webservice信息，
点击工具图标WSDL Page

点击会出现以下界面：

在URL地址栏输入服务地址，一定要输入wsdl。点击GO。可以看到我们发布的服务信息。

这里有我们绑定的所有方法：

在右边可以调用我们发布的方法：

点击Add添加需要的参数，点击GO。

获取用户信息，输入角标，获取集合中的第一个用户，在下面的Status中可以看到获取到的信息。
右边有source可以查看拦截的请求和响应xml文件代码：

Js方法就是根据SOAP Request Envelope中的信息发送请求，调用服务器的方法。
示例：调用sayHi()方法

<html>
<head>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript">
$(function(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Msxml2.XMLHTTP.4.0");//
}
//alert(xhr);

$("#btn1").click(function(){
//text/xml;charset=UTF-8 (SOAP) - SOAP1.2 = soap/xml;charset=UTF-8
//$.post(url,{},function(){},"json");//请求头：xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var url = "http://192.168.1.254:2345/hello";//不用设置调用哪一个方法
xhr.open("POST",url,true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
/*
var xml = xhr.responseXml;//dom
var re = xml.getElementsByTagName("return");
alert(re.length);
var txt = re[0].firstChild.data;
alert(txt);
*/
var xml = xhr.responseXml;//DOM
xml = $(xml);
var txt = xml.find("return").text();
alert(txt);
}
}
};
xhr.setRequestHeader("Content-Type","text/xml;charset=UTF-8");//xml
//定义xml
var nm = $("#nm").val();
//这里是从SOAP Request Envelope中获取的数据
var xml = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"'+
' xmlns:q0="http://ws.cn/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" '+
' xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">'+
'<soapenv:Body><q0:sayHi><arg0>'+nm+'</arg0></q0:sayHi></soapenv:Body>'+
'</soapenv:Envelope>';

xhr.send(xml);
});
});
</script>
</head>
<body>
<button id="btn1">Send</button>
<br/>
<input type="text" id="nm"/>
</body>

</html>

调用saveUser(user)方法

<html>
<head>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript">
$(function(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Msxml2.XMLHTTP.4.0");//
}
$("#addUser").click(function(){
alert("ddd");
var id = $("#id").val();
var name = $("#name").val();
var url = "http://192.168.1.254:2345/hello";
xhr.open("POST",url,true);
alert("dddddddd");
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var xml = xhr.responseText;
alert(xml);//Object
}
}

};
xhr.setRequestHeader("Content-Type","text/xml;charset=UTF-8");

var xml = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" '+
'xmlns:q0="http://ws.cn/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" '+
'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">'+
'<soapenv:Body><q0:saveUser><arg0><id>'+id+'</id><name>'+name+'</name>'+
'</arg0></q0:saveUser></soapenv:Body></soapenv:Envelope>';
xhr.send(xml);

});
});
</script>
</head>
<body>
<button id="addUser">saveUser</button>
<input type="text" id="id"/>
<input type="text" id="name"/>
</body>
</html>

调用getAllUser方法，返回所有用户，在返回的xml中，会有很多的<return>，
通过each(function(index,data){ })迭代获取数据，每一个数据中有返回的值，通过jQuery的find方法，可以按照元素名查找到指定的元素标签，在调用这个标签的text()方法，获取标签中的文本。

<html>
<head>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript">
$(function(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Msxml2.XMLHTTP.4.0");//
}

$("#getAll").click(function(){
var url = "http://192.168.1.254:2345/hello";
xhr.open("POST",url,true);

xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var xml = xhr.responseXml;
//解析遍历result数据
xml = $(xml);
xml.find("return").each(function(idx,data){
//data - Dom
var id = $(data).find("id").text();
var nm = $(this).find("name").text();
alert(id+","+nm);
});
}
}

};
xhr.setRequestHeader("Content-Type","text/xml;charset=UTF-8");

var xml = '<it:Envelope xmlns:it="http://schemas.xmlsoap.org/soap/envelope/" '+
'xmlns:q0="http://ws.cn/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" '+
'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">'+
'<it:Body><q0:getAll /></it:Body></it:Envelope>';
xhr.send(xml);

});
});
</script>
</head>
<body>
<button id="getAll">getAll</button>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航