カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

非同期通信 XMLHttpRequestからFetch APIへ

これまで非同期通信といえばXMLHttpRequestでしたが、最近は新たにFetch APIが主流になりつつあるようです。
Fetch APIがいつ定義されたのかは定かではありませんが、HTML Living Standardになった頃でしょうか。
それはともかくFetch APIの使い方を見ていきたいと思います。

まずはこれまでのXMLHttpRequestを確認してみましょう。

XMLHttpRequest

XMLHttpRequestオブジェクトの宣言

let xmlHttp;

if(window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlHttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

GETの場合

xmlHttp.open("GET", url, true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xmlHttp.onreadystatechange = function()
{
    if(xmlHttp.readyState == XMLHttpRequest.DONE && xmlHttp.status == 200) {

        const data = xmlHttp.responseText;

        // 何らかの処理

    }
}
xmlHttp.send(null);

POSTの場合

xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xmlHttp.onreadystatechange = function()
{
    if(xmlHttp.readyState == XMLHttpRequest.DONE && xmlHttp.status == 200) {

        const data = xmlHttp.responseText;

        // 何らかの処理

    }
}
xmlHttp.send(param);

Fetch API

Fetch APIの書式は次のようになります。

let promise = fetch(url, [options])

fetchはPromiseオブジェクトを返してくれます。

以下の例では基本的にPOSTでの通信としています。
続きを読む…»

2,903 views

匿名スレッドの実行 VisualC#

スレッドを定義します。

Thread tMain = new Thread(new ThreadStart(
    delegate()
    {
        // 実行したい処理
    }
    ));

バックグラウンドで実行するよう設定

tMain.IsBackground = true;

スレッドを開始

tMain.Start();

バックグラウンド処理からメインスレッドのメソッドや、フォームのコントロールを触りたいときは
デリゲートを使用します。以下を参考にしてください。
[デリゲート (delegate)]

1,529 views

Ajax レスポンス処理の注意点

Ajaxを使用して通信し、得た結果を処理するときの注意点。

サーバーサイドでオブジェクト等を生成して返し、それをeval処理する際、
無効な改行が含まれるとエラーが発生することがあります。

具体的には「終了していない文字列型の定数です。」とスクリプトエラーが発生してしまいます。

例えば、PHPで単純に以下のようなデータを出力するとします。

echo "var a = \"文字列\";";

それをJavaScriptでeval処理すると

eval(responseText);
alert(a);

「文字列」というアラートが表示される。
続きを読む…»

7,141 views

画像の非同期読み込み

画像を表示する際、読み込み完了までプログレスバーを表示させたい。
ユーザービリティを考慮し、非同期にて実装する方法を書きます。

まずXMLにProgressBarとImageViewを用意します。

<ProgressBar 
  android:id="@+id/progressBar"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  style="?android:attr/progressBarStyle"
  android:layout_gravity="center_vertical|center_horizontal"
  />
<ImageView
  android:id="@+id/imageView1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:visibility="gone" />

続きを読む…»

7,069 views

デリゲート(delegate)

バックグラウンドで処理を実行中、メインスレッドのメソッドを実行したいとき、
通常のようには呼び出せないので、デリゲートを使って呼び出します。

メインスレッド

Thread tMain = new Thread(new ThreadStart(SampleThread));
tMain.IsBackground = true;
tMain.Start();

デリゲートの定義

delegate void SampleDelegate(string args);

メソッドの定義

private void SampleMethod(string args)
{
    Console.Writeline(args);
}

スレッド

private void StartServer()
{
    this.Invoke(new SampleDelegate(this.SampleMethod), "sample text");
}

続きを読む…»

2,080 views