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

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

假设有一个基于.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/

posted on 2014-08-09 06:52 Joanna Qian 阅读(4122) 评论(0) 编辑收藏举报

刷新页面返回顶部