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

来源：互联网发布：淘宝商城手镯编辑：程序博客网时间：2024/04/27 16:27

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 0