基于SOAP的Web服务AJAX客户端
基于SOAP的Web服务AJAX客户端
2015年12月14日
2015年12月15日添加WSDL
2015-12-16 添加SOAP与JSON转换
1 目标：浏览器客户端使用AJAX请求Web服务，传递参数，接受返回结果。
2 原理：使用POST传递SOAP格式的XML数据。
3 流程：发布WebService，查询WSDL，创建HTML和AJAX请求，测试。
参考：http://www.myexception.cn/h/1158587.html
3.1 发布WebService-基于SOAP的Web服务
参见：Java-webservice-CXF-SOAP服务.docx流程。
3.2 查询WSDL：查看服务的namespace和对应的xml地址。
3.3 创建HTML:指定WebService的URL和SOAP请求体。
注意：html文件放在WebContent根目录（保证处于同一域）。
参考：http://www.tuicool.com/articles/iueYNj
//index.html
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>Insert titlehere</title>
</head>
<scripttype="text/javascript"src="jquery-1.11.3.js"></script>
<body>
<buttontype="button" id="name">Web服务请求-SOAP</button >
<script type="text/javascript">
$(function() {
$("#name").click(function(){
var url = "/CXFSoapDemo/services/HelloWorld";
var soap = '<soapenv:Envelopexmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" '+
'xmlns:xsd="http://www.w3.org/2001/XMLSchema"'+
'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">'+
'<soapenv:Bodyxmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:tns="http://lee/"><tns:sayHello/></soapenv:Body></soapenv:Envelope>';
$.ajax({
url : url,//访问的url
dataType : 'xml',//返回的数据类型
type : 'post',//请求方式
contentType :'application/soap+xml;charset=UTF-8',
data : soap,//数据
success : function(data,status,
xhr) {
//对返回后的数据进行解析
$(data).find("return").each(
function(index,item) {
console.debug(item.innerHTML)
console.debug($(this));
});
},
error : function(xhr, status){
alert("出错了:" +status);
}
});
});
});
</script>
</body>
</html>
3.4 测试：发布服务并测试
点击页面，获取服务取返回结果。
4 方法：SOAP
参考：http://www.myexception.cn/web/677069.html
4.1 目标：将消息以xml形式的封装发送和接收解析。
4.2 原理：将消息以信的形式发送（包括信封、头、内容、异常等）。
4.3 流程：定义soap命名空间。配置信封（Envelope）、头（Header）、内容（Body）、异常（Fault）等。
//example.xml
<soap:Envelopexmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"xmlns:xsd="http://www.w3.org/2001/XMLSchema"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<soap:Body xmlns:tns="http://lee/" >
<tns:sayHello/>
</soap:Body>
</soap:Envelope>
4.3.1定义soap命名空间：使用http://schemas.xmlsoap.org/soap/envelope/定义soap命名空间
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"xmlns:xsd="http://www.w3.org/2001/XMLSchema"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
4.3.2配置消息内容：信封（必须）和内容（Body）是必须的。
<soap:Body xmlns:tns="http://lee/" >
<tns:sayHello/>
</soap:Body>
4.4 方法：SOAP
4.4.1组织结构：信封封装的消息。
Envelope：必须，使用http://schemas.xmlsoap.org/soap/envelope/定义
-|Header：可选
-|Body：必须，定义ws的命名空间
--|消息内容:必须，定义ws定义的方法。
-|Fault：可选。
4.4.2根据WSDL生成soap的ajax请求
4.4.2.1 查询WSDL：http://192.168.41.134:8080/CXFSoapDemo/services/HelloWorld?WSDL
This XML file does not appearto have any style information associated with it. The document tree is shownbelow.
<wsdl:definitions xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/" xmlns:tns="http://lee/" xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/"xmlns:ns1="http://schemas.xmlsoap.org/soap/http" name="HelloWorldImplService" targetNamespace="http://lee/">
<wsdl:types>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:tns="http://lee/" elementFormDefault="unqualified" targetNamespace="http://lee/" version="1.0">
<xs:element name="say" type="tns:say"/>
<xs:element name="sayHello" type="tns:sayHello"/>
<xs:element name="sayHelloResponse" type="tns:sayHelloResponse"/>
<xs:element name="sayResponse" type="tns:sayResponse"/>
<xs:complexType name="sayHello">
<xs:sequence/>
</xs:complexType>
<xs:complexType name="sayHelloResponse">
<xs:sequence>
<xs:element minOccurs="0" name="return" type="xs:string"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="say">
<xs:sequence>
<xs:element minOccurs="0" name="arg0" type="xs:string"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="sayResponse">
<xs:sequence>
<xs:element minOccurs="0" name="return" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:schema>
</wsdl:types>
<wsdl:message name="sayResponse">
<wsdl:part element="tns:sayResponse" name="parameters"></wsdl:part>
</wsdl:message>
<wsdl:message name="say">
<wsdl:part element="tns:say" name="parameters"></wsdl:part>
</wsdl:message>
<wsdl:message name="sayHelloResponse">
<wsdl:part element="tns:sayHelloResponse" name="parameters"></wsdl:part>
</wsdl:message>
<wsdl:message name="sayHello">
<wsdl:part element="tns:sayHello" name="parameters"></wsdl:part>
</wsdl:message>
<wsdl:portType name="IHelloWorld">
<wsdl:operation name="sayHello">
<wsdl:input message="tns:sayHello" name="sayHello"></wsdl:input>
<wsdl:output message="tns:sayHelloResponse" name="sayHelloResponse"></wsdl:output>
</wsdl:operation>
<wsdl:operation name="say">
<wsdl:input message="tns:say" name="say"></wsdl:input>
<wsdl:output message="tns:sayResponse" name="sayResponse"></wsdl:output>
</wsdl:operation>
</wsdl:portType>
<wsdl:binding name="HelloWorldImplServiceSoapBinding" type="tns:IHelloWorld">
<soap:binding style="document" transport="http://schemas.xmlsoap.org/soap/http"/>
<wsdl:operation name="sayHello">
<soap:operation soapAction="" style="document"/>
<wsdl:input name="sayHello">
<soap:body use="literal"/>
</wsdl:input>
<wsdl:output name="sayHelloResponse">
<soap:body use="literal"/>
</wsdl:output>
</wsdl:operation>
<wsdl:operation name="say">
<soap:operation soapAction="" style="document"/>
<wsdl:input name="say">
<soap:body use="literal"/>
</wsdl:input>
<wsdl:output name="sayResponse">
<soap:body use="literal"/>
</wsdl:output>
</wsdl:operation>
</wsdl:binding>
<wsdl:service name="HelloWorldImplService">
<wsdl:port binding="tns:HelloWorldImplServiceSoapBinding" name="HelloWorldImplPort">
<soap:address location="http://192.168.41.134:8080/CXFSoapDemo/services/HelloWorld"/>
</wsdl:port>
</wsdl:service>
</wsdl:definitions>
4.4.2.2 查找ws的命名空间：<wsdl:definitionstargetnamespace>定义。
<wsdl:definitions xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/" xmlns:tns="http://lee/" xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/"xmlns:ns1="http://schemas.xmlsoap.org/soap/http" name="HelloWorldImplService" targetNamespace="http://lee/">
4.4.2.3 查找ws的方法：<wsdl:operation>定义。
<wsdl:operation name="say">
4.4.2.4 查找ws的地址：soap:address location定义。
<soap:address location="http://192.168.41.134:8080/CXFSoapDemo/services/HelloWorld"/>
4.4.2.5 生成soap：在Body中定义ws的命名空间，使用ws的方法。
<soap:Envelopexmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"xmlns:xsd="http://www.w3.org/2001/XMLSchema"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<soap:Body xmlns:tns="http://lee/" >
<tns:sayHello/>
</soap:Body>
</soap:Envelope>
4.4.2.6 生成soap的ajax请求：设置url为ws的地址，数据date为soap，数据类型datetype为xml,请求方式type使用post，编码类型（contenttype），回调函数（成功success，失败error）等。
jQuery的ajax请求方法，参见：..\Net\jQuery.docx中ajax部分。
$.ajax({
url :"/CXFSoapDemo/services/HelloWorld",//访问的url
dataType : 'xml',//返回的数据类型
type : 'post',//请求方式
contentType :'application/soap+xml;charset=UTF-8',
data : mySoapXml,//数据
success : function(data,status,
xhr) {
//对返回后的数据进行解析
$(data).find("return").each(
function(index,item){
console.debug(item.innerHTML)
console.debug($(this));
});
},
error : function(xhr, status){
alert("出错了:" +status);
}
});
4.5 示例：jQuery组织AJAX的soap请求
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>Insert titlehere</title>
</head>
<scripttype="text/javascript" src="jquery-1.11.3.js"></script>
<body>
<button type="button" id="name">Web服务请求-SOAP</button>
<script type="text/javascript">
$(function() {
$("#name").click(function() {
var mySoapXml = '<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"'+
'xmlns:xsd="http://www.w3.org/2001/XMLSchema"'+
'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">'+
'<soap:Bodyxmlns:lee="http://lee/"><lee:sayHello/></soap:Body></soap:Envelope>';
$.ajax({
url :"/CXFSoapDemo/services/HelloWorld",//访问的url
dataType : 'xml',//返回的数据类型
type : 'post',//请求方式
contentType :'application/soap+xml;charset=UTF-8',
data : mySoapXml,//数据
success : function(data,status,
xhr) {
//对返回后的数据进行解析
$(data).find("return").each(
function(index,item){
console.debug(item.innerHTML)
console.debug($(this));
});
},
error : function(xhr, status){
alert("出错了:" +status);
}
});
});
});
</script>
</body>
</html>
5 方法：WSDL
5.1 目标：描述SOAP的使用方法。
5.2 原理：使用XML描述SOAP的服务地址，服务接口，数据类型等。
5.3 方法：WSDL
参考：http://blog.csdn.net/etttttss/article/details/17303315
5.3.1组织结构：过度设计，本以为很好的解耦，但是实际上没多少人愿意用这么复杂的东西。
<wsdl:definitions>根:定义当前WebService的地址，名称等。
-|<wsdl:types>数据类型：所有数据和接口类型。
-|<wsdl:message>所有消息的结构。
-|<wsdl:portType>服务接口通信类型:是否具有传入、传出等。
--|<wsdl:operation>服务接口：通信类型。
-|<wsdl:binding>具体协议：具体协议（如SOAP）的使用方法。
--|<wsdl:operation>服务接口：通信的具体实现。
-|<wsdl:service>服务地址集合：定义服务的名称、访问地址等具体使用方法。
--|<wsdl:port>单个服务地址:定义单个服务的地址，binding指明具体的实现方式。
5.3.2数据类型types:所有的数据、接口等定义
<wsdl:types>
-|<xs:schema>
--|<xs:element>简单定义,供其它部分调用
--|<xs:complexType name="say">详细说明
---|<xs:sequence>列表
----|<xs:element>参数
<wsdl:types>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:tns="http://lee/" elementFormDefault="unqualified" targetNamespace="http://lee/" version="1.0">
<xs:element name="say" type="tns:say"/>
<xs:complexType name="say">
<xs:sequence>
<xs:element minOccurs="0" name="arg0" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:schema>
</wsdl:types>
5.3.3消息结构message
<wsdl:message>所有消息的结构。
-|<wsdl:part>消息结构，引用types定义。
<wsdl:message name="say">
<wsdl:part element="tns:say" name="parameters"></wsdl:part>
</wsdl:message>
5.3.4通信类型portType:只定义输入、输出类型。
<wsdl:portType>
-|<wsdl:operation>:服务接口
--|<wsdl:input>：输入
--|<wsdl:output>：输出
<wsdl:portType name="IHelloWorld">
<wsdl:operation name="say">
<wsdl:input message="tns:say" name="say"></wsdl:input>
<wsdl:output message="tns:sayResponse" name="sayResponse"></wsdl:output>
</wsdl:operation>
</wsdl:portType>
5.3.5具体通信方法Binding:porttype的具体实现。
<wsdl:binding>
-|<soap:binding>
-|<wsdl:operation>
--|<soap:operation />
--|<wsdl:input>
---|<soap:body/>
--|</wsdl:input>
<wsdl:binding name="HelloWorldImplServiceSoapBinding" type="tns:IHelloWorld">
<soap:binding style="document" transport="http://schemas.xmlsoap.org/soap/http"/>
<wsdl:operation name="say">
<soap:operation soapAction="" style="document"/>
<wsdl:input name="say">
<soap:body use="literal"/>
</wsdl:input>
<wsdl:output name="sayResponse">
<soap:body use="literal"/>
</wsdl:output>
</wsdl:operation>
</wsdl:binding>
5.3.6服务地址集合service
<wsdl:service>:所有服务在此定义
-|<wsdl:port>：定义单个服务
--|<soap:address >：服务地址
<wsdl:service name="HelloWorldImplService">
<wsdl:port binding="tns:HelloWorldImplServiceSoapBinding" name="HelloWorldImplPort">
<soap:address location="http://192.168.41.134:8080/CXFSoapDemo/services/HelloWorld"/>
</wsdl:port>
</wsdl:service>
5.4 示例：具有say(arg0)和sayHello()两个接口的服务。
//http://192.168.41.134:8080/CXFSoapDemo/services/HelloWorld?wsdl
This XML file does not appearto have any style information associated with it. The document tree is shownbelow.
<wsdl:definitions xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/" xmlns:tns="http://lee/" xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/" xmlns:ns1="http://schemas.xmlsoap.org/soap/http" name="HelloWorldImplService"targetNamespace="http://lee/">
<wsdl:types>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:tns="http://lee/" elementFormDefault="unqualified" targetNamespace="http://lee/" version="1.0">
<xs:element name="say" type="tns:say"/>
<xs:element name="sayHello" type="tns:sayHello"/>
<xs:element name="sayHelloResponse" type="tns:sayHelloResponse"/>
<xs:element name="sayResponse" type="tns:sayResponse"/>
<xs:complexType name="sayHello">
<xs:sequence/>
</xs:complexType>
<xs:complexType name="sayHelloResponse">
<xs:sequence>
<xs:element minOccurs="0" name="return" type="xs:string"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="say">
<xs:sequence>
<xs:element minOccurs="0" name="arg0" type="xs:string"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="sayResponse">
<xs:sequence>
<xs:element minOccurs="0" name="return" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:schema>
</wsdl:types>
<wsdl:message name="sayResponse">
<wsdl:part element="tns:sayResponse" name="parameters"></wsdl:part>
</wsdl:message>
<wsdl:message name="say">
<wsdl:part element="tns:say" name="parameters"></wsdl:part>
</wsdl:message>
<wsdl:message name="sayHelloResponse">
<wsdl:part element="tns:sayHelloResponse" name="parameters"></wsdl:part>
</wsdl:message>
<wsdl:message name="sayHello">
<wsdl:part element="tns:sayHello" name="parameters"></wsdl:part>
</wsdl:message>
<wsdl:portType name="IHelloWorld">
<wsdl:operation name="sayHello">
<wsdl:input message="tns:sayHello" name="sayHello"></wsdl:input>
<wsdl:output message="tns:sayHelloResponse" name="sayHelloResponse"></wsdl:output>
</wsdl:operation>
<wsdl:operation name="say">
<wsdl:input message="tns:say" name="say"></wsdl:input>
<wsdl:output message="tns:sayResponse" name="sayResponse"></wsdl:output>
</wsdl:operation>
</wsdl:portType>
<wsdl:binding name="HelloWorldImplServiceSoapBinding" type="tns:IHelloWorld">
<soap:binding style="document" transport="http://schemas.xmlsoap.org/soap/http"/>
<wsdl:operation name="sayHello">
<soap:operation soapAction="" style="document"/>
<wsdl:input name="sayHello">
<soap:body use="literal"/>
</wsdl:input>
<wsdl:output name="sayHelloResponse">
<soap:body use="literal"/>
</wsdl:output>
</wsdl:operation>
<wsdl:operation name="say">
<soap:operation soapAction="" style="document"/>
<wsdl:input name="say">
<soap:body use="literal"/>
</wsdl:input>
<wsdl:output name="sayResponse">
<soap:body use="literal"/>
</wsdl:output>
</wsdl:operation>
</wsdl:binding>
<wsdl:service name="HelloWorldImplService">
<wsdl:port binding="tns:HelloWorldImplServiceSoapBinding" name="HelloWorldImplPort">
<soap:address location="http://192.168.41.134:8080/CXFSoapDemo/services/HelloWorld"/>
</wsdl:port>
</wsdl:service>
</wsdl:definitions>
5.5 示例：通过WSDL找到函数入口和参数
服务地址：service下的soap:address 中的location指定。
服务的namespace：wsdl根中targetNameSpace定义。
函数入口：binding找到需要的入口say。
参数：在types中找到say的详细定义，后台complex中参数定义为arg0。
组织soap：
<soap:Envelopexmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<soap:Body xmlns:lee="http://lee/" >
<lee:say>
<arg0>
client arg0-xx
</arg0>
</lee:say>
</soap:Body>
</soap:Envelope>
示例：参见：示例：同域Web客户端+WebService+带参数的请求
6 方法：SOAP与JSON转换
SOAP是xml格式，可以参考XML与JSON转换。
参见：..\Net\jQuery插件-JSON与XML互转.docx
6.1 示例：将WebService返回的SOAP转换为JSON填充到easyui的数据表格中。
6.1.1目标：将SOAP返回数据转换为JSON，将相关的数据填充到easyui的数据表格中。
6.1.2原理：SOAP返回数据是XML，转换为JSON，取其中有用的数据组织为easyui需要json。
6.1.3流程：获取soap返回数据。转换为JSON。处理数据后设置为easyui的数据值。
6.1.3.1 获取soap返回数据：使用ajax进行WebService调用，读取返回值。
var mySoapXml='<SOAP-ENV:Envelopexmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/"xmlns:xsd="http://www.w3.org/2001/XMLSchema"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">'+
'<SOAP-ENV:Body>'+
'<tns:findOffLineDaysxmlns:tns="http://webservices.navigation.megaeyes.com/">'+
'<query>'+
'<sessionId>21084</sessionId>'+
'<userGlobalId>1</userGlobalId>'+
'<size>20</size>'+
'<start>0</start>'+
'<companyId>1</companyId>'+
'<endTime>2015-12-16</endTime>'+
'<flag>1</flag>'+
'<licenseNo></licenseNo>'+
'<startTime>2015-12-16</startTime>'+
'<subs>true</subs>'+
'</query>'+
'</tns:findOffLineDays>'+
'</SOAP-ENV:Body>'+
'</SOAP-ENV:Envelope>';
$.ajax({
url :"/OperationStatService",//访问的url
dataType : 'xml',//返回的数据类型
type : 'post',//请求方式
contentType :'application/soap+xml;charset=UTF-8',
data : mySoapXml,//数据
success : function(data, status,
xhr) {
//对返回后的数据进行解析
$(data).find("return").each(
function(index,item) {
var json=$.xml2json(item);
var offLineData=json.offLineData;//处理数据，取出需要的数据组织为easyui需要JSON
createBZXTJ(offLineData);
});
},
error : function(xhr, status) {
alert("出错了:" +status);
}
});
}
6.1.3.2 转换为JSON：使用jQuery插件xml2json转换为JSON。
$(data).find("return").each(
function(index,item) {
var json=$.xml2json(item);
varoffLineData=json.offLineData;//处理数据，取出需要的数据组织为easyui需要JSON
createBZXTJ(offLineData);
});
6.1.3.3 处理数据：取得JSON相关数据。
6.1.3.4 设置为easyUI数据值：设置为easyui表格中data属性值。
$('#bzxtj').propertygrid({
data : offLineData,
scrollbarSize : 0,
columns : [ [ {
field : 'licenseNo',
title : '车牌号'
},
{
field : 'plateColor',
title : '车牌颜色'
},
{
field : 'companyName',
title : '所属企业'
},
{
field : 'offLineDays',
title : '不在线天数'
}] ],
showHeader : true,
showGroup : false
});
6.1.4示例
//clbzxtj.html
<!DOCTYPE html">
<!--
@author: [email protected]
@date: 2015-9-29 10:52
-->
<html>
<head>
<metacharset="UTF-8">
<title>Insert titlehere</title>
</head>
<body>
<div id="content" class="easyui-layout"data-options="fit:true"
style="width: 100% ；">
<!-- Center Area -->
<div id="center_area"data-options="region:'center',title:''">
<!-- tabs -->
<div title="单车统计">
<!-- data -->
<table id="bzxtj"class="easyui-datagrid"
data-options="fitColumns:true,singleSelect:true"
style="width: 100%;">
</table>
<div class="easyui-pagination"data-options="total:2000,pageSize:10"
style=""></div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
requestWebService();
});
//request web service
function requestWebService(){
var mySoapXml='<SOAP-ENV:Envelopexmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/"xmlns:xsd="http://www.w3.org/2001/XMLSchema"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">'+
'<SOAP-ENV:Body>'+
'<tns:findOffLineDaysxmlns:tns="http://webservices.navigation.megaeyes.com/">'+
'<query>'+
'<sessionId>21084</sessionId>'+
'<userGlobalId>1</userGlobalId>'+
'<size>20</size>'+
'<start>0</start>'+
'<companyId>1</companyId>'+
'<endTime>2015-12-16</endTime>'+
'<flag>1</flag>'+
'<licenseNo></licenseNo>'+
'<startTime>2015-12-16</startTime>'+
'<subs>true</subs>'+
'</query>'+
'</tns:findOffLineDays>'+
'</SOAP-ENV:Body>'+
'</SOAP-ENV:Envelope>';
$.ajax({
url :"/OperationStatService",//访问的url
dataType : 'xml',//返回的数据类型
type : 'post',//请求方式
contentType :'application/soap+xml;charset=UTF-8',
data : mySoapXml,//数据
success : function(data, status,
xhr) {
//对返回后的数据进行解析
$(data).find("return").each(
function(index,item) {
var json=$.xml2json(item);
varoffLineData=json.offLineData;//处理数据，取出需要的数据组织为easyui需要JSON
createBZXTJ(offLineData);
});
},
error : function(xhr, status) {
alert("出错了:" +status);
}
});
}
function createBZXTJ(offLineData) {
//create cssz
$('#bzxtj').propertygrid({
data : offLineData,
scrollbarSize : 0,
columns : [ [ {
field : 'licenseNo',
title : '车牌号'
},
{
field: 'plateColor',
title : '车牌颜色'
},
{
field : 'companyName',
title : '所属企业'
},
{
field : 'offLineDays',
title : '不在线天数'
}] ],
showHeader : true,
showGroup : false
});
}
</script>
</body>
</html>
7 示例：同域Web客户端+WebService
7.1 Web客户端：同域需要将页面放入WebService的根目录
//index.html
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>Insert titlehere</title>
</head>
<scripttype="text/javascript"src="jquery-1.11.3.js"></script>
<body>
<button type="button" id="name">Web服务请求-SOAP</button>
<script type="text/javascript">
$(function() {
$("#name").click(function() {
var mySoapXml = '<soap:Envelopexmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" '+
'xmlns:xsd="http://www.w3.org/2001/XMLSchema"'+
'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">'+
'<soap:Bodyxmlns:lee="http://lee/"><lee:sayHello/></soap:Body></soap:Envelope>';
$.ajax({
url :"/CXFSoapDemo/services/HelloWorld",//访问的url
dataType: 'xml',//返回的数据类型
type : 'post',//请求方式
contentType :'application/soap+xml;charset=UTF-8',
data : mySoapXml,//数据
success : function(data,status,
xhr) {
//对返回后的数据进行解析
$(data).find("return").each(
function(index,item){
console.debug(item.innerHTML)
console.debug($(this));
});
},
error : function(xhr, status){
alert("出错了:" +status);
}
});
});
});
</script>
</body>
</html>
7.2 WebService
参见：发布WebService-基于SOAP的Web服务
7.3 结果：点击Button后进行同域下的WebService请求。
8 示例：同域Web客户端+WebService+带参数的请求
8.1 Web客户端：同域需要将页面放入WebService的根目录
//index.html
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>Insert titlehere</title>
</head>
<scripttype="text/javascript"src="jquery-1.11.3.js"></script>
<body>
<button type="button" id="name">Web服务请求-SOAP</button>
<button type="button" id="say">带参数SOAP</button>
<script type="text/javascript">
$(function() {
$("#name").click(function() {
soapCall();
});
$("#say").click(function() {
soapWithArg();
});
});
function soapCall(){
var mySoapXml = '<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"'+
'xmlns:xsd="http://www.w3.org/2001/XMLSchema" '+
'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">'+
'<soap:Body xmlns:lee="http://lee/"><lee:sayHello/></soap:Body></soap:Envelope>';
$.ajax({
url:"/services/HelloWorld",//访问的url
dataType : 'xml',//返回的数据类型
type : 'post',//请求方式
contentType :'application/soap+xml;charset=UTF-8',
data : mySoapXml,//数据
success : function(data, status,
xhr) {
//对返回后的数据进行解析
$(data).find("return").each(
function(index,item) {
console.debug(item.innerHTML)
console.debug($(this));
});
},
error : function(xhr, status) {
alert("出错了:" +status);
}
});
}
functionsoapWithArg(){
var mySoapXml = '<soap:Envelopexmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" '+
'xmlns:xsd="http://www.w3.org/2001/XMLSchema" '+
'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">'+
'<soap:Bodyxmlns:lee="http://lee/" ><lee:say><arg0>clientarg0-xx</arg0></lee:say></soap:Body></soap:Envelope>';
$.ajax({
url :"/services/HelloWorld",//访问的url
dataType : 'xml',//返回的数据类型
type : 'post',//请求方式
contentType :'application/soap+xml;charset=UTF-8',
data : mySoapXml,//数据
success : function(data, status,
xhr) {
//对返回后的数据进行解析
$(data).find("return").each(
function(index,item) {
console.debug(item.innerHTML)
console.debug($(this));
});
},
error : function(xhr, status) {
alert("出错了:" +status);
}
});
}
</script>
</body>
</html>
8.2 WebService
参见：发布WebService-基于SOAP的Web服务
8.3 结果：点击Button后进行同域下的WebService请求（带参数）。
请求：request soap
<soap:Envelopexmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"xmlns:xsd="http://www.w3.org/2001/XMLSchema"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><soap:Bodyxmlns:lee="http://lee/" ><lee:say><arg0>clientarg0-xx</arg0></lee:say></soap:Body></soap:Envelope>
返回：response soap
<soap:Envelopexmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"><soap:Body><ns2:sayResponsexmlns:ns2="http://lee/"><return>this is from say(msg)=clientarg0-xx</return></ns2:sayResponse></soap:Body></soap:Envelope>