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的时候,数据被调用了出来。