jQuery Mobile ページ遷移の仕組み

jQuery Mobile ではページ遷移に Ajax というブラウザ内で非同期通信を行う仕組みを採用しています。Ajax ではページの必要な部分だけを入れ替えることができ、デスクトップPCに比べて処理能力や回線速度に劣るモバイル端末でも軽快なページ閲覧が可能になります。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. Ajax 利用時のページ遷移の概要
  2. Ajax を無効にする方法

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

Ajax 利用時のページ遷移の概要

通常のページ遷移では、Webページのリンクがクリックされると、ブラウザは次に表示するページの HTMLファイルをサーバーにリクエストし、ファイルをダウンロードしたらページ全体を再描画します。
しかし Ajaxを使うと、ヘッダやフッタなど変更の必要のないものはそのまま残し、書き換えが必要な部分だけを再描画します。
以下はこの仕組みを図示したものです。

Ajaxのページ遷移の仕組み

Ajax を無効にする方法

jQuery Mobile では、Ajaxリクエストと通常の HTTPリクエストを自動的に判別して切り替えます。同じドメイン内のリンクはAjaxが使われますが、リンク先が他のドメインの場合は Ajaxは使われません。

しかし同じドメイン内であっても、フォームなどでは Ajaxを使いたくない場合があります。
そのような場合はAjaxを無効にするいくつかの方法がありますので、状況に応じて使い分けます。

target属性を指定する

a要素に target属性を指定します。リンク先ページへ遷移するときだけ Ajaxが無効になります。

<a href="next-page.html" target="_blank">次のページ</a>

rel="external"を指定する

rel属性に外部を示す"external"を値にしてアンカータグに指定します。リンク先ページへ遷移するときだけ Ajaxが無効になります。

<a href="next-page.html" rel="external">次のページ</a>

data-ajax="false"を指定する

データ属性「data-ajax="false"」を指定すると無効になります。この指定は a要素と form要素に用いることができます。

<form data-ajax="false"></form>

サイト全体で無効にする

jQuery Mobile が初期化するときに Ajaxを無効にする設定を行います。
以下のように JavaScriptコードを記述することで、サイト内のすべてのリンクに対し Ajaxが無効になります。

Ajaxは非常に便利な仕組みなのですが、ページ全体が切り替わらないことで挙動がおかしくなることもありますので、データを引き継がなければならないページ遷移など十分チェックすることが大切です。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ