同期通信と非同期通信

Ajax
Webプログラミング演習

Asynchronous JavaScript + XML
–
ＳＴＥＰ１０
Ajaxを利用した
RSSフィードの表示
–
クライアントサイド（ブラウザ内）で非同期サーバ通信
と動的ページ生成を組み合わせる技術の総称
ウェブアプリケーションの操作性向上


同期通信と非同期通信（１）
ブラウザ
httpサーバ
同期通信と非同期通信（２）
ブラウザ
リクエスト
（ページ遷移を伴わない）サーバとの小刻みな通信＝必要な
データを必要な時に要求（リクエスト）
非同期通信＝サーバの応答（レスポンス）を待つ間も処理を
実行可能
ブラウザ
httpサーバ
リクエスト
httpサーバ
ブラウザ
リクエスト1
httpサーバ
リクエスト1
リクエスト2
レスポンス1
応答待ち
レスポンス2
リクエスト2
レスポンス
レスポンス
レスポンス1
割り込み
レスポンス2
レスポンス処理は割り込み
（コールバック関数）を利用
同期通信
非同期通信
マッシュアップとAjax

マッシュアップ（mashup）
–
複数のウェブサービスを組み合わせて，ひとつの複合サービス
を実現すること

–
（音楽用語から派生）
複数の異なる音源を組み合わせて一つの曲に仕上げる
同期通信

非同期http通信を実現する機能を提供する，JavaScript組
込みクラス
–
主要メソッド

open(HTTPメソッド, URL, 非同期フラグ, 名前, パスワード)
–
Google Maps, Amazon商品検索, 楽天トラベルAPI，.他多数
–
ブラウザからJavaScriptやiframeを使ってAPIを利用
比較的時間のかかるサービスを利用する場合は，（応答待ちを
しない）Ajaxが適切
⇔サーバサイドマッシュアップ
サーバとの通信方式を設定
 HTTPメソッド：”GET”, ”POST”など
 URL：HTTPアクセスする先
注：表示ページと同一サーバ上のURLにしかアクセスできない
クライアントサイドマッシュアップ
–
非同期通信
XMLHttpRequest
組み合わせを前提としたウェブサービスAPIの提供


リクエストの順序とレスポンスの
順序が一致しないことがある



非同期フラグ：trueなら非同期通信を行う（省略時はtrue）
名前，パスワード：ユーザ認証が必要な場合に指定（省略可）
send(送信データ)
–
サーバへのリクエスト送信
 送信データ：POSTする場合に送るデータ（不要の時は’’）
1
XMLHttpRequest（つづき）
–
主要プロパティ

onreadystatechange
–

readyState
–

通信状態（readyState）が変化した時に呼び出されるイベント処理関
数
通信状態
 0 （uninitialized：読み込み開始前の初期状態），
1 （loading：読み込み中），2 （loaded：読み込んだ），
3 （interactive：読み込んだデータを解析中）
4 （complete：読み込んだデータの解析完了）
responseXML
–
レスポンスを XML DOM 形式で取得
AjaxでRSSフィードを処理する

RSSフィード
–
–

サイトで公開されている情報の要約をXML書式で記述したもの
この演習ではRDF Site Summary（RSS0.9, RSS1.0）を利用
Ajaxでフィード処理
–
–
典型的なAjaxプログラミング
//リクエストの送信
function ajaxRequest(url){
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.onreadystatechange = function(){
if(req.readyState==4){
onResponse(req);
}
}
req.send('');
}
//コールバック関数
function onResponse(req){
var myxml = req.responseXML;
.... レスポンスXMLの処理 ....
}
XMLHttpRequestオブジェクトの生成
通信方式の設定
イベント処理関数の設定
通信状態が4（解析完了）になったらコールバック関数を
呼び出す
リクエスト送信
XML形式でレスポンスを取得
演習
% cd myblog

次ページに示すJavaScriptを記述したファイルを作成
–
ファイル名は「feed.js」
興味のあるサイトのRSSフィードをリクエスト
コールバック関数でフィードの中身を調べて，表示用HTMLタグ
を生成してページに埋め込む
feed.js
//RSSフィードの読込指示
function insertFeed(){
ajaxRequest('/~manda/webprg/rss.php');
}
//リクエストの送信
function ajaxRequest(url){
var req = requestObj();
req.open('GET', url, true);
req.onreadystatechange = function(){
if(req.readyState==4){
onResponse(req);
}
}
req.send('');
}
//通信オブジェクトの生成
function requestObj(){
return new XMLHttpRequest();
}
（次ページへつづく）
feed.js（つづき）
リクエストするrssフィードのURLを引数として
ajaxRequest関数を呼び出す。
//コールバック関数
function onResponse(req){
var rss = req.responseXML;
if(rss){
var title = rss.getElementsByTagName('channel')[0].getElementsByTagName('title'
)[0].firstChild.nodeValue;
サイトタイトルを取得
var item = rss.getElementsByTagName('item')[0]; 最新エントリを取得
if(item){
var ititle = item.getElementsByTagName('title')[0].firstChild.nodeValue; エントリタイトル
var ilink = item.getAttribute('rdf:about'); エントリのURL
document.getElementById('feed').innerHTML +=
"<li>"+title+"<ul><li><a href=¥""+ilink+"¥">"+ititle+"</a></li></ul></li>";
}
}
}
（ソースプログラム）
2
コールバック関数（onResponse）の
処理内容

以下の形式のHTMLタグを作成し，"feed"という
id属性を持つHTML要素（ULを想定）の中に追
加挿入する
<li>サイトタイトル
<ul>
<li>
<a href="個別エントリURL">最新エントリタイトル</a>
</li>
</ul>
</li>

</ul>
index.phpにアクセスして，フィード領域にウェブプログラ
ミング演習サイトの最新エントリへのリンクが表示されれ
ばOK
他サイトのフィードを追加
–
–
–

head領域内でfeed.jsを読み込むように
<head>
....
<script type="text/javascript" src="feed.js">//</script>
....
</head>

挿入 <ul id="feed">
フィード表示の確認

index.phpの修正
bodyタグのonload属性でinsertFeed関数を実行
<body onload="insertFeed()">

body領域内にフィード表示領域用のHTML要素を置く
....
<div>フィード
<ul id="feed"> </ul>
</div>
....
次回の予定

特別編
insertFeed関数の中で，ajaxRequest関数を複数個呼び出す
引数は友達のブログのRSSフィードのURL
/~ユーザID/myblog/rss.php
リクエスト順序と表示順序が異なるときがある（＝非同期通信）
3

Download Report