tanihito’s blog

デジタル・新規事業開発・健康など、興味のあることについてつらつらと書いてきます。

Ajaxでページを読み込む

プログラミング

なんとなくJavaScriptから逃げていたんですが、Webサービスを作ろうとするとやっぱり必要ですね。
ということでAjaxのお勉強です。


main.htmlのボタンを押すと、ページ遷移なしにtsuika.htmlの内容を読み込みます。
ポイントはload_entity.jsの最終行にある

return false;

これを書かないと、ボタンを押したときに画面がスクロールしてしまいます。
もしtsuika.htmlにタグなどの不必要な要素がある場合は正規表現などで除去すればOKです。

main.html

<html>
  <head>
    <script src="load_entity.js"></script>
  </head>
  <body>
    <button onclick="load_entity('tsuika.html', 'entrylist')">
      Ajaxでエンティティを追加
    </button>
    <ul id="entrylist">
      <li>
        初期エンティティ
      </li>
    </ul>
  </body>
</html>

load_entity.js

function load_entity(url, id) {
    var req = new XMLHttpRequest();
     req.open('GET', url, true);

    req.onreadystatechange = function(e){
    	if(req.readyState===4) {
    	    obj = document.getElementById(id);
	    obj.innerHTML += req.responseText;
    	}
    };
    req.send(null);
    return false;
}

tsuika.html

<li>
  追加のエンティティ１
</li>
<li>
  追加のエンティティ２
</li>