AJAXを使用して非同期通信を実装する方法

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>

<title>AJAX Example</title>

$(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>

<div>

<asp:Button ID="btnGetData" runat="server" Text="データを取得" />

</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

[ASP.MET] カテゴリの最新記事

「東雲 忠太郎」の平凡な日常のできごと

AJAXを使用して非同期通信を実装する方法

「東雲忠太郎」の平凡な日常のできごと