通过前端Ajax访问WebService形式的接口

发布时间 2023-07-07 10:32:43作者: 上清风

WebService是早期提供Web服务的一种形式(现在最新的方式是WebApi),其无关于编程语言,有java形式的WebService,也有C#形式的WebService。

我们在项目中,需要和其他外部系统进行接口对接时,常使用WebService或WebApi,这取决于对方提供服务接口的使用的是那种技术。

我们可以在本地模拟访问使用WebService形式编写的”WebService接口“(如何编写webservice demo以及在IIS上发布成服务请参看另外教程链接:https://blog.csdn.net/weixin_29431461/article/details/124615017)

需要注意的有几个易错点:

 

上面代码第16行要取消注释,否则会无法在客户端通过AJAX形式形式访问服务端的WebService。

另外需要注意的一点是:WebService项目的Web.config需要补充:支持访问形式配置、跨域问题解决配置,增加代码位置如图:

 增加代码如下:

    <webServices>
        <protocols>
            <add name= "HttpPost"/>
            <add name= "HttpGet"/>
        </protocols>
    </webServices>
    <!-- 解决跨域问题,追加以下代码:根据网络教程20230706-->

    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
                <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>
                <add name="Access-Control-Allow-Origin" value="*"/>
            </customHeaders>
        </httpProtocol>
    </system.webServer>

之后,对WebService项目源码进行发布,然后利用IIS进行部署。

发布成功后的形式为:

 以上说明我们以WebService形式提供的”服务“已经操作完毕了,那么,如何去访问这个服务?

其实WebService接口和WebApi接口形式几乎一模一样,WebService构成形式是:http://ip:port/asmx文件名.asmx(要有后缀)/待访问方法名;WebApi构成形式是:http://ip:port/Controller名称/待访问方法

我们可以在浏览器输入如上地址,测试得到方法返回值形式:

 

 回到上面的问题,假如把我们上面发布的程序假想成是外部系统,或是我们要对接的系统。根据他提供给我们的这个接口地址,我们如何访问他,并拿到我们想要的数据呢?

访问WebService形式的接口有两种形式(就我知道的):通过前端Ajax形式、通过客户端程序添加服务引用形式。

本文以下先讲解通过前端Ajax形式访问WebService接口:

(1)可先写一个粗略的html结构的页面

(2)写相关页面触发事件(比如Button点击事件、页面加载事件等)

(3)点击事件脚本写一段Ajax脚本,异步调用WebService接口 (Ajax异步调用请求的多种方法可参考(取第1种):https://www.itgh.cn/post/eajci2b5.html)

(4)引入jquery包(因为第3步的$.Ajax()方法用的是jquery的方法)

(5)前端调试、看关键数据

前端代码如下:

 通过浏览器打开,按F12进入调试模式,可以看到响应的结果数据已经拿到且正确: