Ajax の基礎知識

Ajax 入門

説明

Ajax とはAsynchronous JavaScript + XMLの略で、Ajaxライブラリを使用したJavaScriptのプログラミングです。
有名なライブラリは、prototype.jsやjQueryなどです。

Asynchronous とは「非同期」という意味です。
通常ブラウザとサーバーが同期してやり取りを行い処理されるのですが、このAjaxは非同期で通信を行います。
そのため、ページングすることなくサーバーへ接続し、データを取得することができます。

なまえに入っているようにデータの構造はXMLを使用するのですが、jsonなどべつのものを使用することも多くあります。

Ajaxを使用することでユーザーの利便性からしてもとても使いやすくなるのでとても便利です。

しかし欠点もある

一番やっかいなのが、互換性の問題です。
ブラウザにとても左右されやすいんです!

FireFoxだと使えるけどIEだと使えない、またIE8だと使えるけどIE7だと使える。
なんてことがしょっちゅうあります。

もう一つはプログラミングが面倒くさい点です。
JavaやPHPと違い、処理一つ一つが順番に行われる訳ではありません。
複数の処理があったとしても、一つ目の処理が完了するのを待たずにすぐ次の処理が実行されます。

これが慣れるまで気持ち悪い感じがします。
XMLデータの取得も結構やりにくいのではないかと思います。

サンプル

一番シンプルと思われるAjaxを使った以下のような処理を紹介します。

ファイルに書かれた文字列を読み込み表示

ファイルを読込む場合は、load を使用します。
[JavaScript]


function outputText(){
	$('#msg').load('data.txt');
}

HTML


<div id="msg">ここにテキストを表示。</div>
<input type="button" value="Output" onclick="outputText();">

jQueryライブラリを読み込むのもお忘れなく


>script src="jquery-1.10.2.min.js"<>/script<
  • このエントリーをはてなブックマークに追加
Related

PHPで動画の撮影日を取得

PHPで動画の撮影日を取得 概要 PHPからffprobeコマンドを実行し、動画の撮影日時を取得します。 コード $posted_at = ...

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...
トップへ戻る