脱jQuery .load()

Ajax系の .load() のネイティブ書き換えです。.load() はjQuery には2種類あるのですが、今回は Ajax の load メソッドの解説です。

詳しくは 脱jQuery その1 をご覧ください。

without-jquery

イベント関係の load は .on() つまり .addEventListener を使います。全く別のメソッドとなります。

参考：.on() の書き換え

.load()

jQuery

$("#main").load("test.html")

書き換え JavaScript

var myXml = new XMLHttpRequest();
myXml.onreadystatechange = function() {
    if ((myXml.readyState === 4) && (myXml.status === 200)) {
        document.getElementById("main").innerHTML = myXml.responseText;
    }
}
myXml.open("GET", "test.html", true);
myXml.send(null);

.load() は Http リクエストを送って、返ってきたデータを要素に挿入する命令です。

ネイティブな JavaScript では通信を行うのに XMLHttpRequest というものをつくり（1行目）、変数に入れます。それに対して色々命令していきます。詳しい話は割愛しますが、ラスト2行目でリクエスト送信先の URL を指定してあげればOKです。

最新版の JavaScript ではこれよりも簡単にわかりやすく書くことが出来るので、段々とこの方法は使われなくなるでしょう。しかし、現状対応ブラウザがまだ整っていないこともあり、今はまだこの方法が最善です。

まとめ

jQueryJavaScript
A.load("B")var myXml = new XMLHttpRequest();
myXml.onreadystatechange = function() {
  if ((myXml.readyState === 4) && (myXml.status === 200)) {
    A.innerHTML = myXml.responseText;
  }
}
myXml.open("GET", "B", true);
myXml.send(null);