webservice学习笔记(十二):js与jquery利用ajax获取webservice返回值1.webservice服务端代码如图(ps:只是一个简单的sayHello的demo):

webservice学习笔记(十二):js与jquery利用ajax获取webservice返回值

 

webservice学习笔记(十二):js与jquery利用ajax获取webservice返回值

-服务端是基于spring的,具体beans.xml配置如下:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:jaxws="http://cxf.apache.org/jaxws"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://cxf.apache.org/jaxws
http://cxf.apache.org/schemas/jaxws.xsd">
    <jaxws:endpoint id="nameBegin" implementor="com.wayne.ws.HelloWsImpl"
        
address="/gotham">
        <!-- 配置日志入拦截器 -->
        <jaxws:inInterceptors>
        <bean class="org.apache.cxf.interceptor.LoggingInInterceptor"/>
        </jaxws:inInterceptors>
        <!-- 配置日志出拦截器 -->
        <jaxws:outInterceptors>
        <bean class="org.apache.cxf.interceptor.LoggingOutInterceptor"/>
        </jaxws:outInterceptors>
    </jaxws:endpoint>
</beans>

-web.xml配置如下:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>day_fif_ws_cxf_spring_web_se</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <!-- 配置beans.xml文件 -->
  <context-param>
  <param-name>contextConfigLocation</param-name>
  <!-- src下面文件参数为classpath -->
  <param-value>classpath:beans.xml</param-value>
  </context-param>
  <!-- 应用启动的监听器 -->
  <listener>
  <listener-class>
  org.springframework.web.context.ContextLoaderListener
  </listener-class>
  </listener>
  <!-- gotham的所有请求都会先经过cxf框架 -->
  <servlet>
  <servlet-name>CXFServlet</servlet-name>
  <servlet-class>
  org.apache.cxf.transport.servlet.CXFServlet
  </servlet-class>
  <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
  <servlet-name>CXFServlet</servlet-name>
  <url-pattern>
/gotham/*</url-pattern>
  </servlet-mapping>
</web-app>

-接下来我们部署到tomcat中运行,并用浏览器打开我们的wsdl文档:

webservice学习笔记(十二):js与jquery利用ajax获取webservice返回值

-这里要注意我们的url是两个gotham,个人理解是因为我的beans.xml的endpoint的address属性和web.xml的过滤都加上了gotham,所以访问需要gotham,因为web.xml全部都过滤就不会访问到jsp页面,虽然这里的服务端也不需要访问jsp页面,如果全部请求经过cxf框架,我们去访问jsp页面会显示如下:

webservice学习笔记(十二):js与jquery利用ajax获取webservice返回值

-接下来我们用eclipse内置的web service explorer访问url,并使用sayHello(),由于在服务端配置的入拦截器,所以我们可以获取到客户端的请求报文:

webservice学习笔记(十二):js与jquery利用ajax获取webservice返回值

 

webservice学习笔记(十二):js与jquery利用ajax获取webservice返回值这里我们需要把报文(PayLoad后的内容)暂时保存起来,可以注意到<arg0></arg0>中间是我们输入的值,

所以后面的ajax请求我们要进行拼接,把输入框中的内容放到<arg0></arg0>标签里去,并把拼接好的内容发送到我们的服务器的url,

然后再利用回调函数获取服务器的响应内容,这就是大致实现思路

-接下来就是利用cxf的命令进行生成客户端代码(详细操作请参考前面的内容):

webservice学习笔记(十二):js与jquery利用ajax获取webservice返回值-这里我们依然是基于spring的,client-beans.xml配置如下:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:jaxws="http://cxf.apache.org/jaxws"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://cxf.apache.org/jaxws
http://cxf.apache.org/schemas/jaxws.xsd">
    <!-- id属性为唯一标识,serviceClass属性为根据服务端SEI生成的全类名, 
    address属性为服务端的地址(去掉?wsdl即可) -->
    <jaxws:client id="nameClient" serviceClass="com.wayne.ws.HelloWs"
        address="http://localhost:8080/day_six_ws_cxf_spring_web_ajax/gotham/gotham">
        <jaxws:outInterceptors>
        <bean class="org.apache.cxf.interceptor.LoggingOutInterceptor"/>
        </jaxws:outInterceptors>
    </jaxws:client>
</beans>

-客户端jsp代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#startJq").click(function(){
        var name=document.getElementById("userName").value;
        alert(name);
        var data='<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:q0="http://ws.wayne.com/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><soapenv:Body><q0:sayHello><arg0>'+name+'</arg0></q0:sayHello></soapenv:Body></soapenv:Envelope>';
        $.ajax({
            type:"post",
            url:"http://localhost:8080/day_six_ws_cxf_spring_web_ajax/gotham/gotham",
            data:data,
            dataType:"xml",
            success:function(msg){
            alert("success");
            var $result=$(msg);
            var value=$result.find("return").text();
            alert(value);
            },
            error:function(){
                alert("错误");
            }
        });
    });
});
function reqWebService(){
    var name=document.getElementById("userName").value;
    var data='<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:q0="http://ws.wayne.com/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><soapenv:Body><q0:sayHello><arg0>'+name+'</arg0></q0:sayHello></soapenv:Body></soapenv:Envelope>';
    var request=getRequest();
    request.onreadystatechange=function(){
        if(request.readyState==4 && request.status==200){
            var result=request.responseXML;
            alert(result);
            var returnEle=result.getElementsByTagName("return")[0];
            var value=returnEle.firstChild.data;
            alert(value);
        }
    };
    request.open("POST","http://localhost:8080/day_six_ws_cxf_spring_web_ajax/gotham/gotham");
    request.setRequestHeader("Content-type","");
    request.send(data);
}
function getRequest(){
    var xmlHttp=null;
    try{
        //firefox safari chrome
        xmlHttp=new XMLHttpRequest();
    }catch(e){
        //IE
        try{
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}
</script>
<body>
用户名:<input id="userName" name="userName"/>
<button onclick="reqWebService()">ajax请求webservice</button>
<button id="startJq">jquery请求webservice</button>
</body>
</html>

-使用jquery的ajax注意尽量不要写ip,因为可能会导致无响应,写localhost即可,测试结果如下:

webservice学习笔记(十二):js与jquery利用ajax获取webservice返回值

 

webservice学习笔记(十二):js与jquery利用ajax获取webservice返回值

webservice学习笔记(十二):js与jquery利用ajax获取webservice返回值

 

webservice学习笔记(十二):js与jquery利用ajax获取webservice返回值

 

相关文章:

  • 2022-12-23
  • 2021-07-14
  • 2022-12-23
  • 2021-07-27
  • 2021-05-11
  • 2021-10-24
  • 2021-08-18
猜你喜欢
  • 2022-12-23
  • 2021-04-30
  • 2021-06-11
  • 2021-07-12
  • 2021-12-29
  • 2022-12-23
  • 2022-01-07
相关资源
相似解决方案