XMLHttpRequestを利用して非同期通信を行い表示されているページ全体を更新することなくページの一部を更新する事ができます。URLがブラウザの履歴に追加されない等の問題点もありました。pushStateです。URLをブラウザの履歴に追加、変更、そしてブラウザの戻る、進むのイベントを検知する事が出来ます。Ajaxの非同期通信によるページの内容を変更した際にユーザビリティを損なう事なくシームレスなページの移動が可能になります。任意のオブジェクトを渡すことができ、popstateイベントを検知した際にイベントハンドラから参照する事ができます。nullを指定します。相対パス、絶対パスの指定が可能です。popStateの使い方popStateはブラウザの戻る、進むのイベントを検知するために使用します。URLが変更された直後になります。popstateの検知を止める。popstateの検知を止めるためのものです。return以降の処理を実行してしまいます。replaceStateの使い方replaceStateはブラウザの履歴の置き換えを行います。履歴に関連するオブジェクトを置き換える事ができます。nullを指定します。相対パス、絶対パスの指定が可能です。urlは省略可能です。Ajaxを組み合わせてページの内容を変更する方法を紹介します。ページの構成は以下のとおりです。Ajaxでリンク先のページを読み込ます。DOMオブジェクトとして再登録)を行います。ページを更新してください。pushStateに対応しているかを判定します。対応している場合は、以降の処理が実行され対応していない場合はここで処理が停止します。historyオブジェクトへの参照を返します。31行目ページへの初回アクセス時に実行します。jQueryオブジェクトとして定義しています。_addEvents()の定義を行っています。44行目popStateイベントを検知した際に実行します。e.originalEvent.target.history.scrollRestorationは履歴にあるページ先へ移動した直後に、記憶されていたスクロール位置まで移動するかを決めます。autoで自動的にスクロール位置まで移動します。manualを指定した場合は、スクロール位置までの移動が行われません。manualに設定していますが目的のページへ移動してページの内容が置き換えられたタイミングでスクロール位置まで移動させるようにします。55行目popStateを検知した際に実行する処理です。popStateを検知してしまう場合の対策です。65行目Ajaxを実行するためのトリガーを設定しています。_loading()を実行します。PDFファイルではない場合、新規タブ(ウィンドウ)で開いて表示しない場合に実行させます。Ajax通信の開始から終了後に行うページ内容の変更までをまとめた関数です。Ajax通信が行われている場合は、_ajaxLoadContents()は実行されません。101行目ajaxSendはリクエストの送信の直前に実行されます。Failed)」というエラーが出る場合があるのでそのための対策です。done()へ移行します。URLやページの内容の変更は行いません。URLの変更を行います。Ajax通信が成功、失敗のどちらの場合でも実行されます。Ajax通信が完了した時に実行されます。HTMLを変更してページの内容の変更が完了します。history.stateからスクロール位置を取得して移動させます。DOMオブジェクトとして登録します。#contentsが指定された要素内の全てを変更します。HTMLを変更します。title要素のテキストを拾い変更します。JavaScriptのファイル、関数、変数などを拾い全て変更します。Ajaxの組み合わせでページの一部を変更するヘッダーメニューをクリックすると新しいページを読み込み、ページ内の一部内容を変更してブラウザの履歴に登録します。Imagesの使い方MacでSassを使える環境を構築する。