### Jquery Ajax学习实例3：向WebService发出请求，调用方法返回数据
#### WebService概念与应用
在探讨具体的示例之前，我们首先简要了解一下WebService的概念及其在现代Web开发中的作用。
- **WebService简介**：WebService是一种允许不同应用程序之间进行通信的技术标准，通常基于XML和HTTP协议。它为应用程序提供了跨越平台、语言边界的数据交换方式。
- **优点**：WebService的主要优点包括跨平台性、可重用性和灵活性等。通过WebService，开发者可以在不考虑客户端类型的情况下提供服务。
- **应用场景**：WebService广泛应用于B2B（Business-to-Business）交互、分布式系统集成以及微服务架构中。
#### 示例详解
本节将详细介绍如何使用JQuery Ajax向一个WebService发送请求并处理返回的数据。
##### 1. WebService端实现
在这个例子中，我们使用了一个简单的.NET WebService（`WebService.asmx`），其中定义了一个名为`GetWhether`的方法，用于模拟获取指定城市的天气信息。
```csharp
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
public WebService() {
// 如果使用设计的组件，请取消注释以下行
// InitializeComponent();
}
[WebMethod]
public string GetWhether(string cityId) {
Random r = new Random();
int degree = r.Next(100);
string wInfo = string.Format("Today {0}'s temperature is {1} degrees", cityId, degree);
return wInfo;
}
}
```
- **关键点解析**：
- `ScriptService`特性：该特性使得WebService能够被JavaScript调用。
- `WebMethod`特性：标记了可以被远程调用的方法。
- 方法逻辑：通过随机生成温度值来模拟天气信息。
##### 2. 客户端页面实现
接下来，我们来看客户端页面是如何发起请求的。这个页面包含了一个简单的HTML表单和一些JavaScript代码。
```html
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript" src="js/jquery-1.3.2.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" name="Text1" id="Text1" /><br/>
<input type="button" id="btn1" onclick="BtnCity_Click()" style="width:55px;height:20px;"/>
</div>
<div id="dd">
sd
</div>
<div>
<script type="text/javascript" language="javascript">
function BtnCity_Click() {
var city = $("#Text1").val();
$.ajax({
url: "WebService.asmx/GetWhether",
data: { cityId: city },
type: "post",
success: function (data, status) {
$("#dd").html("<h1>天气情况: " + data.childNodes[1].text + "</h1>");
}
});
}
</script>
</div>
</form>
</body>
</html>
```
- **关键点解析**：
- jQuery库的引入：确保页面能够执行jQuery相关的操作。
- JavaScript函数`BtnCity_Click`：当用户点击按钮时触发此函数。
- Ajax请求配置：
- `url`: 指向WebService的URL。
- `data`: 发送的数据参数。
- `type`: 请求类型，这里使用的是POST。
- `success`: 成功回调函数，处理返回的数据。
##### 3. 总结
通过这个示例，我们不仅了解了如何利用JQuery Ajax向WebService发送请求，还学习了如何处理返回的数据并在页面上展示。这种技术在实际开发中非常有用，尤其是在需要异步加载数据或更新页面内容的场景下。
- **扩展思考**：
- 如何优化Ajax请求的性能？
- 如何处理错误响应？
- 如何使用其他JavaScript库（如Vue.js、React.js）实现类似功能？
通过不断实践和探索，我们可以更深入地理解这些技术，并将其应用于更复杂的项目中。
