Jquery aJax 跨域訪問基於SOAP協議的WebService接口

時間 2019-11-07

標籤 jquery ajax 訪問基於 soap 協議 webservice 接口欄目 JQuery 简体版

原文原文鏈接

1、概念

同源策略

瀏覽器出於安全考慮禁止js操做非本域下的DOM對象同時也禁止XmlHttpRequest向非本域的服務器發送http請求。只要協議、域名、端口有任意一個不一樣就被認爲是不一樣域，之間的js操做和XHR請求就是跨域操做javascript

SOAP

全名：simple object access protol,簡易對象訪問協議，與RPC同樣都是基於HTTP的請求響應模式的遠程調用協議，經過XML協議傳輸數據。html

WebService:

是一種跨編程語言和跨操做系統平臺的遠程調用技術。所謂跨編程語言和跨操做平臺，就是說服務端程序採用java編寫，客戶端程序則能夠
採用其餘編程語言編寫，反之亦然！跨操做系統平臺則是指服務端程序和客戶端程序能夠在不一樣的操做系統上運行java

2、Demo

新建WebService項目

ctrl+n新建Dynamic Web Project, 項目結構以下

HelloService代碼以下：jquery

import javax.jws.WebMethod;
import javax.jws.WebService;

@WebService
public class HelloService {
    
    @WebMethod
    public String say(String name) {
        System.out.println("-----------"+name);
        return"hello "+name;
    }

}

配置CORS Filter支持跨域, 在web.xml中加入如下代碼：web

<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>

若是爲filter配置了cors.supportedHeaders參數，axis-1.4版本下值必須包含SOAPAction, 同時ajax請求頭中也必需要有SOAPAction：ajax

<init-param>
  <param-name>cors.supportedHeaders</param-name>
  <param-value>Accept, Origin, Content-Type, SOAPAction</param-value>
</init-param>

須要導入CORS-Filter.jar和java-property-utils.jar這兩個jar包編程

選中剛剛建立的Web項目，新建web Service 項目：
跨域
- start Server成功以後點擊finish，一個webService接口建立成功且已發佈。如今在項目根目錄會有一個wsdl文件夾能夠找到一個HellService.wsdl文件，這個文件就是wevservice接口的描述文件。這個文件中<wsdlsoap:address>標籤下location的值就是咱們本次發佈的服務對外暴露的地址；
  
  在這個地址後加?wsdl，瀏覽器中訪問既能夠查看到該文件。說明咱們的服務發佈成功。

跨域請求

任意位置建立一個index.html，用jquery ajax的方式去訪問剛剛暴露的那個接口瀏覽器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    function test() {
        var paramsXml = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:q0="http://test.dgq.com" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance"> <soapenv:Body> <q0:say>  <q0:name>we</q0:name>   </q0:say>  </soapenv:Body>  </soapenv:Envelope>';
        $.ajax({
            url : "http://localhost:8080/WebSeviceTest/services/HelloService",
            type : "POST",
            dataType : "XML",
            contentType : "text/xml; charset=UTF-8",
            data : paramsXml,
            crossDomain: true,
            beforeSend: function (XMLHttpRequest) {
                 XMLHttpRequest.setRequestHeader("SOAPAction", "");
             },
            success : function(data) {
                console.log(data);
            },
            error : function(data) {
                console.log(data);
            }
        });
    }
</script>
</head>
<body>
<input type="button"  onclick="test()" value ="發送請求">
</body>
</html>

contenType必須是text/xml
crossDomain: true,jqueryajax的跨域配置
beforeSend 設置SOAPAction請求頭，這是axis1.x版本的問題，要求必需要有SOAPAction請求頭，即便值是空串，不然後臺會報no SOAPAction header
data : paramsXml 這是重點，paramsXml就是咱們本次訪問的核心，paramsXml中不只有咱們向後傳遞的參數也有咱們要訪問後臺方法的描述，paramsXml的值能夠在Eclipse中右鍵點擊wsdl文件在web Services小menu中找到test with web Service Explorer選項打開Web Services Explorer: 找到