jQuery中调用WebService方法小结

下面是详细的“jQuery中调用WebService方法小结”的攻略：

1. 了解 jQuery.ajax() 方法

在调用 WebService 方法前，首先需要了解 jQuery 提供的核心方法 jQuery.ajax()。该方法通过异步 HTTP（Ajax）请求从服务器上加载数据。

$.ajax({
    url: "WebService路径",
    type: "POST",  // 发送 POST 请求
    data: "参数1=值1&参数2=值2",
    dataType: "数据类型",
    success: function(result) {
        // AJAX 请求成功回调函数
    },
    error: function(err) {
        // AJAX 请求失败回调函数
    }
});

上面的代码中，需要替换其中的几个关键信息：

• url：WebService 的路径，根据实际情况进行修改；
• data：请求参数名和参数值，多个参数使用 & 连接；
• dataType：接收到的数据类型，可选为 "text"、"xml"、"json" 等；
• success：AJAX 请求成功后的回调函数；
• error：AJAX 请求失败后的回调函数。

2. 调用 WebService 方法

调用 WebSerivce 方法的过程可以分为 3 步：

• 创建 SOAP 消息体
• 发送 AJAX 请求并处理响应
• 解析响应数据

实现这些步骤的代码如下所示：

// 步骤 1：创建 SOAP 消息体字符串
var soapMessage = '<?xml version="1.0" encoding="utf-8"?>';
soapMessage += '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ';
soapMessage += 'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ';
soapMessage += 'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">';
soapMessage += '<soap:Body>';
soapMessage += '<WebSerivce方法名 xmlns="命名空间">';
soapMessage += '<参数1>值1</参数1>';
soapMessage += '<参数2>值2</参数2>';
soapMessage += '</WebSerivce方法名>';
soapMessage += '</soap:Body>';
soapMessage += '</soap:Envelope>';

// 步骤 2：发送 AJAX 请求并处理响应
$.ajax({
    url: "WebService路径",
    type: "POST",  // 发送 POST 请求
    contentType: "text/xml; charset=utf-8",  // 指定请求头类型
    data: soapMessage,  // 发送 SOAP 消息体
    dataType: "xml",
    success: function(response) {
        // 步骤 3：解析响应数据
        var result = $(response).find("WebSerivce方法名Result");
        console.log(result.text());
    },
    error: function(err) {
        console.log(err);
    }
});

示例 1：调用 C# WebService

这是一个简单的 C# WebService 方法，用于计算两个整数之和并返回结果。

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Services.WebServiceBindingAttribute(Name="CalculatorServiceSoap")]
public class CalculatorService : System.Web.Services.WebService
{
    [WebMethod]
    public int Add(int a, int b)
    {
        return a + b;
    }
}

在 jQuery 中调用该 WebService 方法的代码如下：

// 创建 SOAP 消息体字符串
var soapMessage = '<?xml version="1.0" encoding="utf-8"?>';
soapMessage += '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ';
soapMessage += 'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ';
soapMessage += 'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">';
soapMessage += '<soap:Body>';
soapMessage += '<Add xmlns="http://tempuri.org/">';
soapMessage += '<a>1</a>';
soapMessage += '<b>2</b>';
soapMessage += '</Add>';
soapMessage += '</soap:Body>';
soapMessage += '</soap:Envelope>';

// 发送 AJAX 请求
$.ajax({
    url: "http://localhost:58403/CalculatorService.asmx",
    type: "POST",
    contentType: "text/xml; charset=utf-8",
    data: soapMessage,
    dataType: "xml",
    success: function(response) {
        // 解析响应数据
        var result = $(response).find("AddResult");
        console.log(result.text());  // 输出 3
    },
    error: function(err) {
        console.log(err);
    }
});

示例 2：调用 PHP WebService

这是一个简单的 PHP WebService 方法，用于返回字符串。

<?php
header("Content-Type: text/xml; charset=utf-8");

echo '<?xml version="1.0" encoding="utf-8"?>';
echo '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ';
echo 'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ';
echo 'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">';
echo '<soap:Body>';
echo '<HelloWorld xmlns="命名空间"/>';
echo '</soap:Body>';
echo '</soap:Envelope>';
?>

在 jQuery 中调用该 WebService 方法的代码如下：

// 创建 SOAP 消息体字符串
var soapMessage = '<?xml version="1.0" encoding="utf-8"?>';
soapMessage += '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ';
soapMessage += 'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ';
soapMessage += 'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">';
soapMessage += '<soap:Body>';
soapMessage += '<HelloWorld xmlns="命名空间"/>';
soapMessage += '</soap:Body>';
soapMessage += '</soap:Envelope>';

// 发送 AJAX 请求
$.ajax({
    url: "http://localhost/HelloWorldService.php",
    type: "POST",
    contentType: "text/xml; charset=utf-8",
    data: soapMessage,
    dataType: "xml",
    success: function(response) {
        // 解析响应数据
        var result = $(response).find("HelloWorldResult");
        console.log(result.text());  // 输出 HelloWorld
    },
    error: function(err) {
        console.log(err);
    }
});