很久沒有接觸Webservice的知識，今天稍微復習了一下關於webservice，簡單做了一個天氣預報的功能，雖然界面丑的厲害，但功能算是實現了，以下是效果展示。
這東西沒什么難點，只是天氣預報的功能在網站類的開發中會經常用到，所以就簡單寫下，以便以后查閱。
1.新建一個網站或者web應用程序，添加一個aspx頁面，用於展示天氣數據。（這個應該不用細講吧）
2.在網上找一個免費的天氣預報的接口，我用的是Webxml網站的，地址如下:
http://webservice.webxml.com.cn/WebServices/WeatherWS.asmx
3.在項目目錄下， 引用 — 添加服務引用，彈出對話框，然后輸入接口地址，點擊前往，命名空間可以改成你想要的，如下圖：
4.確定，至此，天氣接口服務就已經完成了，接下來就是Coding了。
部分前台js界面代碼：
//省份
function LoadProvince() {
$.ajax({
type: "POST",
url: "ashx/weatherHandler.ashx",
data: "option=province",
success: function (result) {
$(".sel-province option").remove();
var arry = result.split('|');
var obj = null;
for (var i = 0; i < arry.length; i++) {
if (arry[i] != null && arry[i] != "") {
obj = arry[i].split(',');
$(".sel-province").append("<option value='" + obj[1] + "'>" + obj[0] + "</option>");
}
}
$(".sel-province").find("option[text='北京']").attr("selected", "selected");
},
error: function (errorMsg) {
$(".result-table tr").remove();
$(".result-table").append("<tr><td>省份請求出現錯誤，請您稍后重試。。。</td></tr>");
}
});
}
//城市
function LoadCity(provinceid) {
$.ajax({
type: "POST",
url: "ashx/weatherHandler.ashx",
data: "provinceid=" + provinceid + "&option=city",
success: function (result) {
$(".sel-city option").remove();
var arry = result.split('|');
var obj = null;
for (var i = 0; i < arry.length; i++) {
if (arry[i] != null && arry[i] != "") {
obj = arry[i].split(',');
$(".sel-city").append("<option value='" + obj[1] + "'>" + obj[0] + "</option>");
}
}
},
error: function (errorMsg) {
$(".result-table tr").remove();
$(".result-table").append("<tr><td>城市請求出現錯誤，請您稍后重試。。。</td></tr>");
}
});
}
//加載天氣
function GetWeather(cityid) {
$.ajax({
type: "POST",
url: "ashx/weatherHandler.ashx",
data: "cityid=" + cityid + "&option=weather",
success: function (result) {
$(".result-table tr").remove();
var arry = result.split('|');
var obj = null;
for (var i = 0; i < arry.length; i++) {
if (arry[i] != null && arry[i] != "") {
if (arry[i].indexOf(".gif") > 0) {
$(".result-table").append("<tr><td><image src='images/" + arry[i] + "'/></td></tr>");
}
else {
$(".result-table").append("<tr><td>" + arry[i] + "</td></tr>");
}
}
}
},
error: function (errorMsg) {
$(".result-table tr").remove();
$(".result-table").append("<tr><td>天氣數據請求出現錯誤，請您稍后重試。。。</td></tr>");
}
});
}
html代碼：
<body>
<form id="form1" runat="server">
<div class="head-div">
<table>
<tr>
<td>
<select class="sel-province sel">
</select>
</td>
<td>
<select class="sel-city sel">
</select>
</td>
<td>
<input type="button" class="btn-search" value="查詢" />
</td>
</tr>
</table>
</div>
<div class="result-div">
<table class="result-table">
</table>
</div>
</form>
</body>
由於js不支持跨域，要不當初直接ajax請求天氣接口就完事了，現在處理方式是：ajax+ashx一般處理程序（在里面調用天氣接口）。
一般處理程序代碼如下：
using System.Web;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;
namespace WeatherTest.ashx
{
/// <summary>
/// weatherHandler 的摘要說明
/// </summary>
public class weatherHandler : IHttpHandler
{
WeatherWsClient.WeatherWSSoapClient client = new WeatherWsClient.WeatherWSSoapClient();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string[] result = null;
string option = context.Request.Form["option"];
switch (option)
{
case "province":
result = GetProvinces();
break;
case "city":
result = GetCitys(context.Request.Form["provinceid"]);
break;
case "weather":
result = GetWeather(context.Request.Form["cityid"], null);
break;
}
string str = ConvertToString(result, option);
context.Response.Write(str);
}
/// <summary>
/// 數組轉字符串
/// </summary>
/// <param name="result"></param>
/// <param name="option"></param>
/// <returns></returns>
private string ConvertToString(string[] result, string option)
{
StringBuilder sb = new StringBuilder();
foreach (string item in result)
{
sb.Append(item+"|");
}
return sb.ToString();
}
/// <summary>
/// 省份
/// </summary>
/// <returns></returns>
private string[] GetProvinces()
{
return client.getRegionProvince();
}
/// <summary>
/// 城市
/// </summary>
/// <param name="provinceid"></param>
/// <returns></returns>
private string[] GetCitys(string provinceid)
{
return client.getSupportCityString(provinceid);
}
/// <summary>
/// 天氣數據
/// </summary>
/// <param name="cityid"></param>
/// <param name="userid"></param>
/// <returns></returns>
private string[] GetWeather(string cityid, string userid)
{
return client.getWeather(cityid, userid);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
至此，前后台代碼就已經完畢了，順便說句，由於寫的比較簡單，路過的大神不喜勿噴，謝謝。