2024.11.03
カテゴリ： ASP.MET
AJAXを使用して非同期通信を実装する方法を、ASP.NETを使った簡単な例で示します。この例では、ユーザーがボタンをクリックすると、サーバーにリクエストを送り、結果を受け取って画面に表示します。
### 1. **ASP.NET Webフォームの構成**
#### 1.1. 必要なHTMLとjQueryのコード
**Default.aspx**
```aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AJAX Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnGetData').click(function () {
// 非同期通信の実行
$.ajax({
type: "GET", // HTTPメソッド
url: "DataHandler.ashx", // サーバーサイドのハンドラ
success: function (response) {
// 成功時に結果を表示
$('#result').html(response);
},
error: function (xhr, status, error) {
// エラー時の処理
alert("エラーが発生しました: " + error);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnGetData" runat="server" Text="データを取得" />
<div id="result"></div>
</div>
</form>
</body>
</html>
```
### 2. **サーバーサイド処理**
次に、AJAXリクエストを処理するためのサーバーサイドのハンドラを作成します。このハンドラは、データを生成してクライアントに返します。
#### 2.1. ハンドラのコード
**DataHandler.ashx**
```csharp
<%@ WebHandler Language="C#" Class="DataHandler" %>
using System;
using System.Web;
public class DataHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
// ここでデータを生成または取得する
string responseData = "サーバーからのデータ: " + DateTime.Now.ToString();
// コンテンツタイプを設定
context.Response.ContentType = "text/plain";
// データを返す
context.Response.Write(responseData);
}
public bool IsReusable
{
get { return false; }
}
}
```
### 3. **解説**
- **jQueryのインポート**: jQueryのCDNからスクリプトを読み込み、jQueryを使用できるようにします。
- **AJAXのリクエスト**: ボタンがクリックされると、`$.ajax()`メソッドが呼ばれます。`url`には、データを取得するためのハンドラのURLを指定します。
- **成功時の処理**: サーバーからのレスポンスが成功した場合、`success`コールバック関数が実行され、結果が`#result`というIDの要素に表示されます。
- **エラーハンドリング**: 通信中にエラーが発生した場合は、`error`コールバック関数が実行され、エラーメッセージが表示されます。
### 4. **実行とテスト**
1. 上記のコードをASP.NETプロジェクトに追加します。
2. Webページを実行し、「データを取得」ボタンをクリックします。
3. サーバーからのデータが表示されることを確認します。
### 5. **結果の表示**
このサンプルでは、ボタンをクリックすることでサーバーからのデータ（現在の日時）を非同期で取得し、ページの一部を更新する方法を示しています。AJAXを使用すると、ページをリロードせずにサーバーと通信できるため、ユーザーエクスペリエンスが向上します。
この基本的な例を基に、さらに複雑なデータの取得や処理を行うことができます。必要に応じて、POSTメソッドを使用してデータを送信することも可能です。
お気に入りの記事を「いいね！」で応援しよう
Last updated
2024.11.03 02:09:35
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
