プログラミング学習の記録 276 "JavaScript 2 Webアプリケーションの基礎とJavaScriptを使ったプログラミングテクニック (CD-ROM付)(プログラミング学習シリーズ)"の第4章(Ajaxプログラミング)の練習問題

開発環境

• Microsoft Windows 7 Home Premium (OS)
• Internet Explorer 8 (プラウザ)
• Microsoft Visual Web Developer 2010 Express Edition (IDE)
• Script言語:JavaScript

"JavaScript 2 Webアプリケーションの基礎とJavaScriptを使ったプログラミングテクニック (CD-ROM付) (プログラミング学習シリーズ)"のp.101, 第4章(Ajaxプログラミング)の練習問題を解いてみる。

4.1

注意: 問題を修正してHave a Scriptではなくラベル、JavaScriptのページに変わるように変更。(Have a ScriptというTextをこのドメイン内に置く方法が分からないので。)

new Ajax.Updater("d0", "http://sitekamimura.blogspot.com/search/label/JavaScript", { method: "get" });

JavaScript

 

4.2

function ajaxRequst() { new Ajax.Request( "http://sitekamimura.blogspot.com/search/label/JavaScript", { method: "get", onComplete: Complete, onLoading: Loading, onLoaded:Loaded, onSuccess: Success, onFailure: Failure, onException: Exception, on403: Http403, on404: Http404 }); } var d1=document.getElementById("d0"); var p=document.createElement("p"); function Insert(text) { var textNode = document.createTextNode(text); p.appendChild(textNode); d1.appendChild(p); } function Complete() { Insert("通信が完了しました"); } function Loading() { Insert("読み込みを開始しました"); } function Loaded() { Insert("読み込みを完了しました"); } function Success() { Insert("通信に成功しました"); } function Failure() { Insert("通信に失敗しました"); } function Exception() { Insert("例外が発生しました"); } function Http403() { Insert("HTTP 403のエラーが発生しました"); } function Http404() { Insert("HTTP 404のエラーが発生しました"); }

 

4.3

function ajaxRequest1() { new Ajax.Request( "abc.txt", { method: "get", on404: HTTP404 }); } function HTTP404() { var d2 = document.getElementById("d2"); d2.innerHTML = "HTTP 404のエラーが発生しました"; }

 

4.4

function ajaxUpdater() { new Ajax.Updater("d3", "http://sitekamimura.blogspot.com/search/label/JavaScript", { method: "get" }); } function wait() { var msec = (new Date()).getTime(); while (true) { var msec1 = (new Date()).getTime(); if (msec1 > msec + 3000) { break; } } } function load() { wait(); ajaxUpdater(); }

 

4.5

body要素は手を加えたくないので省略。

var d4 = document.getElementById("d4"); function ajaxRequest2(url) { var msec = (new Date()).getTime(); new Ajax.Request(url, { method: "get", parameters: "time=" + msec }); d4.innerHTML = "Ajaxリクエスト数: " + Ajax.activeRequestCount; }