使用JQuery的Ajax调用SOAP-XML Web Services（Call SOAP-XML Web Services With jQuery Ajax）（译+摘录）

2023-01-08 21:30:07

假设有一个基于.Net的Web Service，其名称为SaveProduct

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调用的代码为

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();

 　　});

}

说明：

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格式如下：

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的节点并处理数据了。

补充：JSP和jQuery配合调用Web service的代码

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

摘录自：http://openlandscape.net/2009/09/25/call-soap-xm-web-services-with-jquery-ajax/

码农公寓

相关文章