使用ajax发送请求到WebService，需要在服务器端配置响应头和响应协议

最新推荐文章于 2023-07-06 09:03:13 发布

绿薄荷

最新推荐文章于 2023-07-06 09:03:13 发布

阅读量2.2k

点赞数

分类专栏： JQuery 文章标签： JQuery WebServices 响应头响应协议

本文链接：https://blog.csdn.net/sanguolian_IT/article/details/52016754

版权

JQuery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

JQuery一直学的不怎么样，最近想再系统的学习一下，于是打开了w3school（http://www.w3school.com.cn/index.html），开始了学习。

打算使用JQuery的AJAX发送请求到WebService，获取WebService的返回信息，并显示到网页的div中。

首先，我先用c#写了一个WebService。

打开vs2015，文件------->>新建------->>网站，然后再新建的网站上右键，添加------->>添加新项，在弹出的窗口中选择Web服务，如图：

这样一个服务就创建好了。
在服务的代码文件中添加如下方法（仅仅测试，非常简单的方法）：

 [WebMethod]
    public string GetWeather()
    {
        return "中国天气网讯 昨天（23日）夜间开始，北方新一轮强降雨从西北地区展开，青海、甘肃局地出现强降雨。预计，未来三天（24-26日），强降雨将继续自西向                东推进，先后影响西北地区东部、内蒙古、华北、东北等地，上述地区累计雨量可达中到大雨、局地暴雨或大暴雨。";
    }

方法添加完成后，发布到IIS进行测试。如下：

调用结果：

服务启动以后，开始使用ajax调用此服务，获取返回的信息。

创建html文件如下，引入jquery文件。

<html>
  <head>
    <meta charset='utf-8' />
    <title>AJAX Call the Services</title>
<style type='text/css'>
 .title{ width:200px;height:25px;border:1px solid gray;text-decoration:center;text-align:center }
 .title:hover{ background:yellow;cursor:pointer }
 .context{ width:200px;height:200px;border:1px solid gray;border-top:none; font-size:12px }
</style>
<script type='text/javascript' src='jquerybase/jquery-3.1.0.min.js'></script>
<script type='text/javascript'>
 $(document).ready(function(){
   $('.title').click(function(){
 $.ajax({
   type: "GET",
            //xml文件位置
            url: "http://localhost/AJAXCallServices.asmx/GetWeather",
            //返回数据格式为xml
            dataType: "xml",
success:function(context){
  $('.context').text($(context).find('string').text());
},
error:function(){
  alert('获取失败！');
}
 });
});
 });
</script>
  </head>
  <body>
    <div class='title'>
 最新天气预报
</div>
<div class='context'>
</div>
  </body>
</html>

HTML文件显示效果如下：

我想点击头部的时候，获取的信息显示到下边的div上。结果调用的时候就出现错误了，错误信息如下（使用习惯了firefox，firebug感觉就是好用）：

根据错误提示，原来是服务器端没有配置响应头，导致读取失败。于是打开iis，配置Access-Control-Allow-Origin信息，如下：

为了方便，此处的值配置为了*，实际使用的时候，需要配置为发起请求的网站。

结果当我再次运行，调用服务的时候，依然是报错了，如下：

看错误信息，报请求格式不正确，于是我再次使用页面调用，发现服务是没有问题的。

后来经过一番查询，最后才发现，除了在iis配置响应头之外，webservices的配置文件（web.config）中，必须配置响应的协议，于是在web.config 的System.web节点下添加如下节点信息：

<webServices>
      <protocols>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
      </protocols>
    </webServices>

整体如下：

至此，当我点击上边div的时候，数据被调用了出来。

绿薄荷

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用ajax发送请求到WebService，需要在服务器端配置响应头和响应协议

JQuery一直学的不怎么样，最近想再系统的学习一下，于是打开了w3school（http://www.w3school.com.cn/index.html），开始了学习。打算使用JQuery的AJAX发送请求到WebService，获取WebService的返回信息，并显示到网页的div中。
复制链接

扫一扫