javascript - jQueryなしでAjaxを使用してページの一部を更新する

Question

このページはほとんどがPHPであり、JavaScriptをわずかに使用しているだけなので、jQueryがなくても可能である必要がある場合は、jQueryを使用したくありません。ページの一部を更新したいのですが、Ajaxの経験があまりありません。jQueryの方法は、ページのURLの後に「#sectionid」を付けて使用することでした。

Answer 1

自分で手巻きするために知っておく必要のあるすべての情報は次のとおりです。

https://developer.mozilla.org/en/XMLHttpRequest

ドキュメントのsend、、、、およびセクションに興味があります。openresponsereadyStateonreadystatechange

onreadystatechangeリクエストのreadyStateが変更されるたびに起動します。readyStateに変更したらdone、受け取った応答を確認できます。

開くときは、非同期モードで開いていることを確認してください。同期httpリクエストを行ってページをフリーズしたくない場合。

古いバージョンのIEで実行する必要がある場合は、ウィキペディアにいくつかの適切な情報があります：http: //en.wikipedia.org/wiki/XMLHttpRequest#Support_in_Internet_Explorer_versions_5.2C_5.5_and_6

document.getElementById要素の使用方法と内容の設定方法を知っているとelement.innerHTML思います。

---

編集 先に進み、基本的な実装を追加しました：

if (window.XMLHttpRequest) {// IE7+, Firefox, Webkit, Opera
  window.xmlhttp = new XMLHttpRequest();
} else {// IE6, 5
  window.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
     document.getElementById("someId").innerHTML = xmlhttp.responseText;
  }
}

xmlhttp.open("GET", "pageUrl", true);
xmlhttp.send();