JavaScript HTTP通信で情報取得する実装を紹介

どうも。どっことです。情報取得する処理を紹介します。今回はJavascriptで情報取得する実装方法です。

実装時の紹介

実装は以下の4点です。

1. XMLHttpRequestオブジェクトを作る
2. 取得URLやメソッドを設定する
3. 取得した時の制御をコールバックとして実装する
4. 通信開始メソッドをコールする

上記を踏まえサンプルを載せます。

// 1.XMLHttpRequestの生成
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
　　　　// 3.取得した時の制御
    if (xhr.readyState == 4) {
    　　　　// 取得成功
    }
};
// 2.取得URL・メソッドの設定
xhr.open("GET", "http://www.example.org/example.txt");
// 4.通信開始メソッドをコール
xhr.send();

この辺は、ネイティブアブリを作るのと同じ感覚ですね。

参考

• XMLHttpRequest の使用

HTML/CSS/JavaScript モーダル(ポップアップ)表示したい

ボタンをタップしたらポップアップを表示させたいので実装方法を調べた。

やったこと

モーダル表示用のdivをbodyタグにいれる＋不要になったら捨てる。

<div id="modal-view" class="modal-background">
  <div class="modal"/>
</div>

• modal-backgroundクラスは背景として設定。
• modalクラスをポップアップぽくCSSを設定する。
• 背景、ポップアップは参考サイトの設定を見てなんとなく。

不要になったら以下で捨てる。

var view = document.getElementById('modal-view');
document.body.removeChild(view);