読者です 読者をやめる 読者になる 読者になる

tanihito’s blog

IT・Web・英語・筋トレなど、興味のあることについてつらつらと書いてきます。

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>
  追加のエンティティ1
</li>
<li>
  追加のエンティティ2
</li>