Ajax単語

エイジャックス
1.3千文字の記事
  • 3
  • 0pt
掲示板へ

Ajaxとは、Javascript による DOM 操作などを駆使して、ウェブページにおけるインタラティブな操作感を実現する技術の事である。

概要

通常のウェブページではユーザハイパーリンクを選択して別のページに変遷する事で、ユーザの操作をページに反映させるしかない。しかしその処理は新しいページサーバに要するために遅くなり、ほんの少しの変更だけで良い場合にはそのオーバーヘッドが相対的に大きくなってしまう。

そこで、Javascript などによって外部ファイル読み込みや HTML の要素に対する DOM 操作を行い、必要な時に必要なだけのデータを持って来てページの必要な部分だけを更新する仕組みが用いられるようになった。それが Ajax である。

Ajax を積極的に用いている例として Googleマップが有名であり、ほかにGmail なども挙げられる。当時まだ Ajax が一般的でなかった時に Ajax をふんだんに利用したインターフェースは画期的で衝撃を与えた。

Web 2.0 を支えた技術の 1 つとして挙げられる事も多い。

また、Ajaxはサーバと非同期通信できるメリットを生かし、PHPなどの静的なスクリプト言語と連携できる点も高く評価できる。これらはMysqlPostgresqlなどデータベースとの相性が良いので、DBで呼び出した値をコールするわけである。それを円滑にするためのライブラリとして、jQueryReactなどがある。

今では当然の技術として扱われているが、いろいろと技術が発展している。

Ajaxのコードの書き方

どちらの場合も、JSONの中身は{"data": "Hello, world!"}とする

XMLHttpRequestの場合

let xhr = new XMLHttpRequest();
xhr.open('GET', '/data.json');
xhr.responseType = 'json';
xhr.addEventListener('load', function () {
  alert(xhr.response.data);
});
xhr.send();

fetch APIの場合

fetch('/index.json').then(function (resp) {
  return resp.json();
}).then(function (data) {
  alert(data.data);
});

関連動画

関連項目

【スポンサーリンク】

  • 3
  • 0pt
記事編集 編集履歴を閲覧

この記事の掲示板に最近描かれたお絵カキコ

お絵カキコがありません

この記事の掲示板に最近投稿されたピコカキコ

ピコカキコがありません

Ajax

1 ななしのよっしん
2010/10/01(金) 09:32:15 ID: NACtIT51Uk
ししど えりか
👍
高評価
0
👎
低評価
0
2 ななしのよっしん
2010/10/20(水) 20:11:12 ID: IfW/jNSga+
Gmailなのか、GoogleMapじゃないのか
👍
高評価
0
👎
低評価
0
3 ななしのよっしん
2011/04/30(土) 21:21:53 ID: hKeOyrFiXE
Web2.0バズワードだと思ってたけどな
👍
高評価
0
👎
低評価
0
4 ななしのよっしん
2011/11/12(土) 22:31:15 ID: Qqt/0SSCdf
コナミSTGじゃないのか
👍
高評価
0
👎
低評価
0
5 ななしのよっしん
2013/08/09(金) 01:08:23 ID: gye+aMArsq
Google MapえるAjaxの使い方を見たことがないんだが
👍
高評価
0
👎
低評価
0
6 ななしのよっしん
2014/07/18(金) 22:36:30 ID: xWlVtl4GM8
確かにどこのサイト見てもまずはGoogleマップだよな。

あと、ちょっとかじったなら、DBと相性のいいPHP情報連携できる点、これが大きいよ。

半分は、prototype.jsjQueryといったライブラリのお陰だが
👍
高評価
0
👎
低評価
0
7 ななしのよっしん
2017/11/18(土) 22:18:22 ID: /MWzgoE1rW
1.それまでインタラティブなサイト作成には
Java Applet や Flash といった外部のアドオンに頼るのが常識だったが
ブラウザの標準装備だけで実現できるという画期的な「事件」だった

2.セキュリティリスクが強調され衰退しかかった Javascript一気にスターの地位に躍り出る原動となった

この2点外せない
👍
高評価
0
👎
低評価
0