使用JQuery的Ajax調用SOAP-XML Web Services（Call SOAP-XML Web Services With jQuery Ajax）（譯+摘錄）

時間 2019-11-15

標籤使用 jquery ajax 調用 soap xml web services 摘錄欄目 JQuery 简体版

原文原文鏈接

假設有一個基於.Net的Web Service，其名稱爲SaveProductjavascript

POST /ProductService.asmx HTTP/1.1
Host: localhost
Content-Type: text/xml; charset=utf-8
Content-Length: length
SOAPAction: "http://sh.inobido.com/SaveProduct"
 
<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
    <soap:Body>
        <SaveProduct xmlns="http://sh.inobido.com/">
            <productID>int</productID>
            <productName>string</productName>
            <manufactureDate>dateTime</manufactureDate>
        </SaveProduct>
    </soap:Body>
</soap:Envelope>

在客戶端用jQuery的ajax調用的代碼爲css

var productServiceUrl = 'http://localhost:57299/ProductService.asmx?op=SaveProduct'; // Preferably write this out from server side
 
function beginSaveProduct(productID, productName, manufactureDate){
　　var soapMessage =
　　'<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"> \
　　<soap:Body> \
　　<SaveProduct xmlns="http://sh.inobido.com/"> \
　　<productID>' + productID + '</productID> \
　　<productName>' + productName + '</productName> \
　　<manufactureDate>' + manufactureDate + '</manufactureDate> \
　　</SaveProduct> \
　　</soap:Body> \
　　</soap:Envelope>';
 
　　$.ajax({
　　　　url: productServiceUrl,
　　　　type: "POST",
　　　　dataType: "xml",
　　　　data: soapMessage,
　　　　complete: endSaveProduct,
　　　　contentType: "text/xml; charset=\"utf-8\""
　　}); 
　　return false;
}
 
function endSaveProduct(xmlHttpRequest, status){
 $(xmlHttpRequest.responseXML)
    .find('SaveProductResult')
    .each(function() {
   　　var name = $(this).find('Name').text();
 　　});
}

說明：html

type: 發送的請求的類型-the type of request we're sending
dataType: 發回的響應的類型- the type of the response will send back, 通常狀況下能夠是html, json等類型，但若是是一個SOAP web service，必須定義爲 xml類型
data: 發送給web service的實際數據
complete: function (XMLHttpRequest, textStatus) { /* Code goes here */ }
contentType: 請求的MIME content類型, 同理，若是是一個SOAP web service，必須定義爲 「text/xml」
endSaveProduct：如今XML數據就已經發送到web service了，一旦服務器server接受到請求並進行處理，調用endSaveProduct方法

如用jQuery處理傳回的XML響應，必須理解SOAP reponse’s schema定義，SaveProduct的schema格式以下：java

HTTP/1.1 200 OK
Content-Type: text/xml; charset=utf-8
Content-Length: length
 
<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
  <soap:Body>
    <SaveProductResponse xmlns="http://sh.inobido.com/">
      <SaveProductResult>
        <ID>int</ID>
        <Name>string</Name>
        <ManufactureDate>dateTime</ManufactureDate>
      </SaveProductResult>
    </SaveProductResponse>
  </soap:Body>
</soap:Envelope>

傳回的響應放在xmlHttpRequest的參數responseXML中，能夠使用firebug或Dev. Tool查看，如今咱們就能夠使用jQuery來遍歷該XML的節點並處理數據了。jquery

補充：JSP和jQuery配合調用Web service的代碼web

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
  <head>
    <script type="text/javascript"
            src="<c:url value='/js/jquery-1.5.js'/>"></script>
  </head>
  <body>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name"/>
        <br/>
        <a href="#" id="ok">肯定</a>
  </body>
  <script type="text/javascript">
    $(function(){
        $("#ok").click(function(){
            var val = $("#name").val();
            if($.trim(val)==""){
                alert("請輸入名稱");
                return;
            }
            <!--能夠經過攔截器獲取請求信息-->
            var str = '<?xml version="1.0" encoding="UTF-8"?>'+
                      '<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">'+
                      '<soap:Body><ns2:sayHello xmlns:ns2="http://first.cxf.itcast.com/">'+
                      '<arg0>'+val+'</arg0>'+
                      '</ns2:sayHello></soap:Body></soap:Envelope>';
            $.ajax({
                contentType:'application/xml;charset="UTF-8"',
                dataType:'xml',//發送數據格式
                type:'post',
                url:'http://localhost:9999/cxf2.4_spring_web/ws/helloworld',        //直接發向這個地址
                data:str,
                success:function(data){
                    //$(data).find("return").each(function(){
                    //  alert($(this).text());
                    //});                   //使用上面的方法也是能夠的
                    var ss = $(data).find("return").first().text();
                    $("<div>").html(ss)
                        .css("border","1px solid blue")
                        .css({width:'50%'}).
                        appendTo($("body"));
                    $("#name").val("");
                }
            },"xml");//數據返回格式爲xml
        });
    });
  </script>
</html>