Ajaxを使ってHTMLを書き換える方法とは【メンターが回答】

「Ajaxを使ってHTMLを書き換える方法がわかりません。」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。Ajaxを使ってHTMLの書き換えを行う方法についてぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

Ajaxを使ってHTMLを書き換える方法だね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

AjaxでHTMLソースがそのまま戻り値として得られる状態なんですが、これを使ってsubmitのように画面全体を更新したいです。

document.write( )で強引に書き換えていますが、JavaScriptのイベントが動かなくなります。

Ajax( )で受けた値をコールバックで制御するのではなく、そのままブラウザがレンダリングしてくれるのが理想なのですが、そのような方法がありましたら教えて下さい。

 

メンターからの回答

turbolinksというライブラリが同じことをしようとしていて、こちらを使用するのがいいかと思います。自力で書くとするとgithub上から最初期のソースコードを読むことができますので見てみましょう。
https://github.com/turbolinks/turbolinks/commit/01ffa7d9757a9fb0caac10395b2d3d7b7b1e7642

ページを取得して描画する処理の説明としては以下のようになります。

//ajax リクエストの作成
var xhr = new XMLHttpRequest();
xhr.open('GET', 'url', true);
xhr.setRequestHeader("Accept", "text/html, application/xhtml+xml, application/xml");

// レスポンスの処理
xhr.onload = function (e) {
  // DOM 操作をできるようにダミーのHTML要素を作成
  var element = document.createElement("html");
  // レスポンスのHTMLを内部に注入
  element.innerHTML = xhr.responseText;

  // ダミーのHTML要素からtitle, body を取得
  var title = element.querySelector("title");
  var body = element.querySelector("body");

  // title, bodyを書き換え
  if (title) { document.title = title.innerText; }
  document.body = body;
}

//ajaxを実行
xhr.send();

 

以上、Ajaxを使ってHTMLを書き換える方法について解説しました。

TechAcademyでは、現役HTML/CSSエンジニアのメンターが質問にすぐ回答します。

他にもPHPとHTMLをまとめてコメントアウトする方法をメンターが回答しているので、合わせてご覧ください。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

回答してくれたメンター

鵜澤 峻平(うさわしゅんぺい)

現在はフリーランスのエンジニアをしていてプログラミング歴は5年目になります、普段は Rails、Laravel、Node.js等を使って Web、モバイルアプリケーションを作成しています。開発実績としては、いくつかの Web サービス、コンシューマー向けモバイルアプリケーション、NPO サイトリニューアル、ロボット用プログラムなどがあります。

TechAcademyでメンターをはじめたのは、「プログラミングでやりたいことがある人を応援したい」、「講師と受講者が話し合って学び方を決めていく」に惹かれたからです。

 

田島悠介

Ajaxを使ってHTMLを書き換える方法について解説したよ。

大石ゆかり

Ajaxで取得したデータに基づいて、現在のWebページのhtmlやbodyの内容を書き換える感じですか?

田島悠介

そうそう。ただ、URLが変わらないので検索エンジンのSEO的には良くないです。

大石ゆかり

わかりました。ありがとうございます!

 

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

CSSの書き方やWebデザインのスキルなど基礎から学ぶことができます。

独学に限界を感じている場合はご検討ください。