沃梦达 / IT编程 / 前端开发 / 正文

jQuery中调用WebService方法小结

下面是详细的“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);
    }
});

本文标题为:jQuery中调用WebService方法小结