使用JS调用WebService示例

最新推荐文章于 2025-06-07 16:11:38 发布

原创最新推荐文章于 2025-06-07 16:11:38 发布 · 2.7w 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#java #javascript #web service

JS 专栏收录该内容

1 篇文章

订阅专栏

本文将通过两步教你如何使用JavaScript调用WebService。首先，介绍如何创建一个WebService，然后详细阐述如何在网页中实现JS调用这些Web服务，进行实际的交互操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用JS调用WebService示例

要想实现JS调用WebService,可以按如下步骤实现：

第一步：创建一个WebService

你可以使用各种方式创建一个WebService，这里使用java创建一个简单的WebService，代码如下：

package com.roulandu.webservice;

import javax.jws.WebService;
import javax.xml.ws.Endpoint;

@WebService
public class Test {
    public String Hello(){

        return "Hello World!!";

    }

    public static void main(String[] args){
        Endpoint.publish("http://localhost:51223/Service/test", new Test());//这个地址可以随便改个没占用的端口，也可以发布到云端
        System.out.println("publish success!!~~~");
    }

}

这里必须保证类中存在一个非静态方法，不然会报错，静态方法和final方法不会被发布，控制台输出 “publish success!!~~~” 则发布成功。
接下来我们就可以查看自己发布的WebService了，浏览器输入之前的发布地址+?wsdl ，然后就可以得到如下界面：

XML格式WebService

到这里，我们的WebService算是发布成功了。

第二步：创建一个页面，实现JS调用Web服务

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>
</head>
<body>
<script type="text/javascript">
     function RequestWebService() {
        var data;
        //SOAP 1.1 请求报文格式，1.2在网上可以找到
        data = '<?xml version="1.0" encoding="utf-8"?>'; 
        data = data + '<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/">'; 
        data = data + '<soap:Body>'; 
        data = data + '<Hello xmlns="http://webservice.roulandu.com/">';//这里就是发布的方法名和xml文档中的命名空间地址（图中画线部分）
        data = data + '</Hello>';
        data = data + '</soap:Body>'; 
        data = data + '</soap:Envelope>'; 

        var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        var URL="http://localhost:51223/Service/test?wsdl";
        xmlhttp.Open("POST",URL, false); 
        xmlhttp.SetRequestHeader ("Content-Type","text/xml; charset=utf-8"); //SOAP 1.1为text/xml ； 1.2为 application/soap+xml
        xmlhttp.Send(data); 
        alert(data);//SOAP请求报文格式

        var text = xmlhttp.responseText;

        alert('结果'+'\n'+text); //SOAP响应报文格式
        document.getElementById("data").innerHTML = text;

    }
</script>
    <input type="button" value="test" onclick="RequestWebService()"></input>
    <p id="data"></p>
</body>
</html>

将该页面在IE浏览器下打开测试。当点击按钮时，效果如下：

SOAP请求报文格式
SOAP响应报文格式