トップ 技術・仕様 Ajax
Ajaxとは何か、読み方からしっかり、サンプルコードと入門基礎説明をテーマに情報をまとめました。
この記事の目次です。
1. Ajaxとは―読み方や概要説明
2. Ajax入門編―簡単なAjaxのサンプルコード
3. Ajax基礎編―クロスブラウザやライブラリなどの基礎
4. Ajaxリファレンス編―Ajax関連のAPI
Ajaxとは、非同期通信を利用してデータを取得したり、動的にウェブページの内容を書き換える技術のことです。 Ajaxを取り入れるとたとえば、ページを切り替えないで必要な部分だけ書き換えることができます。
Ajaxの読み方は「エイジャックス」です。 また、Ajaxは、Asynchronous JavaScript + XML の略です。
Ajax の名前にも含まれている通り、中心的な技術は JavaScriptです。
非同期通信は JavaScript の XMLHttpRequest によって行なわれます。 非同期でサーバーと通信して、ファイルの内容を取得したり、PHPなどのプログラムの出力結果をテキストやXMLなどで受け取ることができます。
Ajax入門編です。簡単なAjaxのサンプルコード、Hello Worldを見ていきます。
できるだけ簡単なAjaxプログラムを示すため、 IE限定でサーバ側からのレスポンス受信時のステータスの判定など を取り除いたプログラムを作成してみました。
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<script type="text/javascript">
var xmlhttp;
/* ボタンのonclick属性に登録する関数 */
function onButtonClick() {
// IE版のXMLHttpRequestオブジェクトを生成する。
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
// イベント発生(データ受信)時の処理を登録する。
xmlhttp.onreadystatechange = httpHandler;
// リクエスト先のURLや送信するデータを設定する。
xmlhttp.open("POST", "hello.php");
// サーバ側に要求を送る。
xmlhttp.send(null);
}
/* XMLHttpRequestのonreadystatechangeに登録する関数 */
function httpHandler() {
// サーバ側の応答内容をidがaのタグに設定する。
document.getElementById("a").innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>
<p id="a">ここに文字列が出力します。</p>
<input type="button" value="ボタン" onclick="onButtonClick()"/>
</body>
</html>
<?php
// 文字列を表示するだけ。
print "Hello World!!";
?>
コメントが書かれていない部分についての補足です。
文字化けを起こさないために、文字コードをUTF-8に統一しています。
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
このサンプルでは、ボタンクリックというイベントを処理するためイベントハンドラを使っています。 イベントハンドラを使うときは、以下のmetaタグを記述します。
<meta http-equiv="Content-Script-Type" content="text/javascript">
フォームのボタンがクリックされたときのイベントハンドラを「onclick」と いいます。以下のように記述するとイベント処理が実行されます。
onclick="<イベント処理>">
document.getElementById()メソッドで、idがaのpタグのエレメントを取り出して、 このタグのinnerHTMLプロパティに「Hello World!!」というテキスト内容を 設定しています。
Ajax基礎編です。クロスブラウザやライブラリなどサンプルコードを見ながら基礎を身に着けていきます。
入門編で扱ったHello World!!のサンプルコードを改造して、複数のブラウザに対応したクロスブラウザ対応版の Hello Worldにしていきます。
クロスブラウザ対応版のHello World!!(Ajaxアプリケーション)です。 コメントを詳しく書きましたので、説明はコメントを参照してください。
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type"
content="text/javascript">
<script type="text/javascript">
/** 要求送信とデータ受信を行う関数 */
function loadData() {
// ローカル変数を宣言する。
var xmlhttp;
// XMLHttpRequestオブジェクトを生成する。
try {
/// IE7、FireFox、Opera前提にオブジェクトを生成する。
xmlhttp = new XMLHttpRequest();
} catch(e) {
try {
/// オブジェクト生成に失敗したらIE6を前提に試みる。
xmlhttp = new ActiveXObject("Msxml12.XMLHTTP");
} catch(e) {
/// 再度、失敗したらIE5、IE5.5を前提に試みる。
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
// 受信用コールバック関数を定義&登録する。
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status== 200) {
chengeInnerText(xmlhttp);
}
}
// 要求先のURLなどを設定する。
xmlhttp.open("POST", "hello.php");
// サーバ側に要求を送る。
xmlhttp.send(null);
}
/** サーバ側の応答内容をidがaのタグに設定する関数 */
function chengeInnerText(xmlhttp) {
document.getElementById("a").innerHTML
=xmlhttp.responseText;
}
</script>
</head>
<body>
<p id="a">ここに文字列が出力します。</p>
<input type="button" value="ボタン" onclick="loadData()"/>
</body>
</html>
<?php
// 文字列を表示するだけ。
print "Hello World!!";
?>
単純なJSON形式のデータを受信するAjaxのサンプルコードについて見ていきます。 eval関数を利用するとJSONデータをそのまま配列に代入できます。
JSON形式のデータを受信して、idがaとbのタグのテキスト内容を変更するサンプルコードです。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
/** 要求送信とデータ受信を行う関数 */
function loadData() {
// ローカル変数を宣言する。
var xmlhttp;
// XMLHttpRequestオブジェクトを生成する。
try {
/// IE7、FireFox、Opera前提にオブジェクトを生成する。
xmlhttp = new XMLHttpRequest();
} catch(e) {
try {
/// オブジェクト生成に失敗したらIE6を前提に試みる。
xmlhttp = new ActiveXObject("Msxml12.XMLHTTP");
} catch(e) {
/// 再度、失敗したらIE5、IE5.5を前提に試みる。
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
// 受信用コールバック関数を定義&登録する。
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status== 200) {
chengeInnerText(xmlhttp);
}
}
// 要求先のURLなどを設定する。
xmlhttp.open("POST", "hello.php");
// サーバ側に要求を送る。
xmlhttp.send(null);
}
/** サーバ側の応答内容をidがaのタグに設定する関数 */
function chengeInnerText(xmlhttp) {
// 受信データを連想配列に格納する。
var rcvdata = eval("(" + xmlhttp.responseText + ")");
// $関数を利用してタグのテキスト内容を変更する。
document.getElementById("a").innerHTML=rcvdata.a;
document.getElementById("b").innerHTML=rcvdata.b;
}
</script>
</head>
<body>
<div id="a">ここに文字列aが出力します。</div>
<div id="b">ここに文字列bが出力します。</div>
<input type="button" value="ボタン" onclick="loadData()"/>
</body>
</html>
<?php
print "{a:\"コンテンツA\",b:\"コンテンツB\"}";
?>
XMLHttpRequest.sendメソッドにリクエスト本文の文字列を渡すことでリクエスト本文を送信することができます。
サンプルコードです。 上のテキストエリアにリクエスト本文を入力して送信ボタンを押すと、本文を設定したリクエストが送信され、サーバで同じ内容を本文に設定したレスポンスが返され、その内容を下のテキストエリアに設定します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
/** 要求送信とデータ受信を行う関数 */
function loadData() {
// ローカル変数を宣言する。
var xmlhttp;
// XMLHttpRequestオブジェクトを生成する。
try {
/// IE7、FireFox、Opera前提にオブジェクトを生成する。
xmlhttp = new XMLHttpRequest();
} catch(e) {
try {
/// オブジェクト生成に失敗したらIE6を前提に試みる。
xmlhttp = new ActiveXObject("Msxml12.XMLHTTP");
} catch(e) {
/// 再度、失敗したらIE5、IE5.5を前提に試みる。
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
// 受信用コールバック関数を定義&登録する。
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status== 200) {
chengeInnerText(xmlhttp);
}
}
// 要求先のURLなどを設定する。
xmlhttp.open("POST", "hello.php");
var body = document.getElementById("reqBody").value;
// サーバ側に要求を送る。
xmlhttp.send(body);
}
/** サーバ側の応答内容をidがresBodyのタグに設定する関数 */
function chengeInnerText(xmlhttp) {
document.getElementById("resBody").innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>
リクエストボディ:<textarea id="reqBody" rows="4" cols="40"></textarea><br />
<input type="button" value="送信" onclick="loadData()"/><br />
レスポンスボディ:<textarea id="resBody" rows="4" cols="40"></textarea>
</body>
</html>
<?php
$requestBody = file_get_contents('php://input');
print $requestBody;
?>
jQueryのAjaxを使用してHTTP通信でテキストファイルのデータを取得するサンプルコードについて見ていきます。
jQueryの$.ajax関数でHTTP通信でデータを取得することができます。
ページを開くと、idがaというpタグ(<p id="a">)のテキストの色を「#ff9999」に変更するサンプルコードを記述しています。 (表示結果→index.html)。
function sample(colorfile) {
$.ajax({
type: 'GET',
url: colorfile,
dataType: 'text',
success: function(data) {
$('#a').css({'color':data});
},
error:function() {
alert('エラーです。');
}
});
}
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="sample.js"></script>
<script type="text/javascript">$(sample("color.txt"));</script>
</head>
<body>
<p id="a">このテキストのピンク色に変わります。</p>
</body>
</html>
#ff9999
Ajax関連のAPIについてです。
XMLHttpRequestは、サーバーと対話するために使用されるオブジェクトです。 ページ全体を更新する必要なしに、データを受け取ることができます。 これでユーザーの作業を中断させることなく、ウェブページの一部を更新することができます。
XMLHttpRequestのsetRequestHeaderメソッドは、HTTPリクエストヘッダーの値を設定します。 setRequestHeader()は、 open()の呼び出しの後、 send()の呼び出しの前に呼び出さなければなりません。 同じヘッダーについてこのメソッドを複数回呼び出された場合は、複数の値が単一のリクエストヘッダーにマージされます。
XMLHttpRequestのsendメソッドは、リクエストをサーバーに送信します。 引数にリクエスト本文を設定することができます。
この記事の更新履歴です。
スポンサーリンク
サイト内のページ
言語
C・C++
/HTML
/Java
/JavaScript
/PHP
/シェルスクリプト
開発環境
Ant
/Burp
/Eclipse
/Fiddler
/gcc
/gdb
/Git
/g++
/JDK
/JMeter
/JUnit
/Teraterm
/ZAP
技術・仕様
Ajax
/CORBA
/Jakarta EE(旧称J2EE、Java EE)
/JNI
ライブラリ/Framework/CMS
bootstrap
/jQuery
/FuelPHP
/Lucene
/MyBatis
/Seasar2
/Spring
/Struts
/WordPress
Web API
Google Maps
ITインフラOSとミドルウェア
Linux
/Windows
/シェル
ActiveMQ
/Tomcat
/MariaDB
/MySQL
/Nagios
/Redis
/Solr
ITインフラセキュリティ
公開サーバーのセキュリティ
SI
ホームページの作り方
スポンサーリンク
関連サイト内検索ツール
zealseedsおよび関連サイト内のページが検索できます。
IPアドレス確認ツール
あなたのグローバルIPアドレスは以下です。
3.236.86.184
HTMLの表示色確認ツール
パスワード生成ツール
文字数のプルダウンを選択して、取得ボタンを押すと「a~z、A~Z、0~9」の文字を ランダムに組み合わせた文字列が表示されます。
ここに生成されます。
スポンサーリンク
Copyright (C) 2007-2024 zealseeds. All Rights Reserved. Loarding…