使用js调用webservice的示例

来源：互联网发布：哈尔滨java培训学校编辑：程序博客网时间：2024/05/16 17:30

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;//domvar re = xml.getElementsByTagName("return");alert(re.length);var txt = re[0].firstChild.data;alert(txt);*/var xml = xhr.responseXml;//DOMxml = $(xml);var txt = xml.find("return").text();alert(txt);}}};xhr.setRequestHeader("Content-Type","text/xml;charset=UTF-8");//xml//定义xmlvar 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 - Domvar 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>