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

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进入调试模式，可以看到响应的结果数据已经拿到且正确：

 ===================================================

我们上面所举的例子是通过WebService接口访问的无参的函数，如果是有参的呢？

在WebService添加一个有参函数：

 然后前端访问Ajax代码块，做些适应性修订：

 通过前端页面调试，可以看到json格式返回的结果已拿到：