こんにちは！増田拓海です。

今回はJavaScriptで非同期通信を行う方法を紹介したいと思います。

非同期処理とは？

非同期通信とはページを更新せずにCGIにデーターを送ったり受け取ったりする技術の事です。
多分いいねボタンとかに使われていると思います。

一つ注意することがあり、この記事で紹介している方法だとIEっていう別のブラウザをダウンロードする為のブラウザでは動かないことがあります。

参考リンク:いまさら聞けない、“Ajax”とは何なのか？ (2/3)

書いてみる

非同期通信を行うにはまずデータを送受信するためのオブジェクトを作成します。

texthttp = new XMLHttpRequest();

texthttpは変数名ですのでなんでもOKです。

次にリクエストを送信します。(ここでは先程の変数名をtexthttpにしたとして書きます。)

texthttp.open("GET","/cgi-bin/index.py?");
texthttp.send(null);

これでcgi-bin/index.pyにリクエストを送信できます。
GETになっているところにはPOST等他のも指定できます。
GETの場合はsendの引数をnullにします。

リクエストを送信できたので次にデーターを受信します。

texthttp.responseText;
texthttp.responseXML;

上のコードでテキスト形式で受信します。
下のコードでXML形式で受信できます。

最後に通信を終了します。

texthttp.abort();

これで通信を終了することができます。

まとめるとこんな感じのコードになります。

texthttp = new XMLHttpRequest();
texthttp.open("GET","/cgi-bin/index.py?");
texthttp.send(null);
texthttp.responseText;
texthttp.responseXML;
texthttp.abort();

これでjavascriptを使った非同期通信は一通り紹介できました。
この記事が何か役に立てば幸いです。
最後まで読んでいただきたいありがとうございました！