通过Ajax调用WebService接口（使用CORS方式解决跨域跨域问题）（WebService使用Java开发）

通过Ajax调用WebService接口首先需要解决Ajax跨域的问题，解决方式如下：

（1）项目中引入jar包，maven项目直接在pom.xml中添加如下依赖即可

<!--  CORS  -->
    <dependency>
      <groupId>com.thetransactioncompany</groupId>
      <artifactId>cors-filter</artifactId>
      <version>2.6</version>
    </dependency>
    <dependency>
      <groupId>com.thetransactioncompany</groupId>
      <artifactId>java-property-utils</artifactId>
      <version>1.13</version>
    </dependency>

（2）在Web.xml中添加如下配置（此filter放第一个）：

<!-- CORS跨域配置 -->
    <filter>
      <filter-name>CORS</filter-name>
      <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
      <init-param>
        <param-name>cors.allowOrigin</param-name>
        <param-value>*</param-value>
      </init-param>
    </filter>
    <filter-mapping>
      <filter-name>CORS</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>

 

Ajax调用WebService接口的方法如下：

function testBtn() {
            let testBtn = document.getElementById('testBtn');
            var paramsXml = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"' +
                ' xmlns:q0="proService"' +
                ' xmlns:xsd="http://www.w3.org/2001/XMLSchema"' +
                ' xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance">' +
                '<soapenv:Body>' +
                '<q0:testObject>' +
                '<age>22</age>' +
                '<name>Jack</name>' +
                '</q0:testObject>' +
                '</soapenv:Body>' +
                '</soapenv:Envelope>';
            $.ajax({
                url: "http://localhost:8080/webservice_pro_war/services/proService/proService/testObject",
                type: "POST",
                dataType: "XML",
                contentType: "text/xml; charset=UTF-8",
                data: paramsXml,
                // crossDomain: true,
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("SOAPAction", "");
                },
                success: function (data) {
                    let ele = data.getElementsByTagName("return")[0];
                    document.getElementById('response').innerHTML = ele.childNodes[0].childNodes[0].data + ele.childNodes[1].childNodes[0].data;
                    // console.log(ele.childNodes[0].childNodes[0].data);
                    // alert(ele.childNodes[1].childNodes[0].data);
                    // console.log(JSON.parse(ele.childNodes[0].data).age);
                    // alert(JSON.parse(ele.childNodes[0].data).name);
                }
                // error: function (data) {
                //     console.log(data);
                // }
            });
        }