Ajax 本のサンプルPG動かせず httpRequest ? .dtd ?

2005年に刊行されたAjaxの本を2020年の今、実行しようとしています。
この　本です。
"AJAX Webアプリケーションアイデアブック (日本語) 単行本 – 2005/12/9 羽田野太巳"

この4章に"テキストボックスの入力支援"という章があり、ここらへんから、Chromeでは動作が動きません。

自分でどう自己解決を図ったか
→ブラウザをIEにしてやってみましたが、できないことにはかわりありませんでした。
タイムアウト云々のメッセージがでてきたので、それにてググってみました。
検索したキーワード
Ajax　タイムアウトです
通信エラー w3.org/TR/xhtml1
http://www.w3.org/1999 タイムアウト

ファイル内部で定義しているURLが古そう、、そこらへんが原因かな、とは思いつつ。
すいません、どなたかお力添えをお願いします！！

chromeでやってだめだった、の図です

html
1<!-- ファイル名は textbox1.html -->
2<?xml version="1.0" encoding="utf-8"?>
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5<html xmlns="http://www.w3.org/1999/xhtml">
6<head>
7<meta http-equiv="content-type" content="text/html;charset=utf-8" />
8<title>テキストボックスへの自動挿入</title>
9<link href="common.css" rel="stylesheet" type="text/css" />
10<script type="text/javascript" src="textbox1.js"></script>
11</head>
12<body bgcolor="#ffffff">
13<h1>テキストボックスへの自動挿入</h1>
14<p>
15  商品コードに"a", "b", "c"のいずれかを入力すると、該当の商品コードと商品名が自動的にセットされます。
16</p>
17<form action="">
18<p>
19  <label for="code">■ 商品コード </label>：
20  <input type="text" id="code" name="code" size="5" autocomplete="off" />
21</p>
22<p>
23  <label for="item">■ 商品名 </label>：
24  <input type="text" id="item" name="item" size="40" autocomplete="off" />
25</p>
26</form>
27</body>
28</html>
29

css
1<!-- file name = common.css -->
2body {
3    font-family: "ＭＳ Ｐゴシック";
4    font-family: Helvetica, Arial, sans-serif;
5    color: #4c4c4c;
6}
7h1 {
8    font-size: 16px;
9}
10h2 {
11    font-size: 14px;
12}
13h3 {
14    font-size: 12px;
15}
16p {
17    font-size: 12px;
18}
19div {
20    font-size: 12px;
21}

text
1a0001,15インチ液晶ディスプレイ
2a0002,17インチ液晶ディスプレイ
3a0003,19インチ液晶ディスプレイ
4a0004,20インチ液晶ディスプレイ
5a0005,21インチ液晶ディスプレイ

javascript
1// file name = textbox1.js
2//グローバル変数の定義
3var httpObj;               // HTTP通信用オブジェクト
4var timerId;               // HTTP通信用タイマーオブジェクト
5var timeout_sec = 10;      // HTTP通信タイムアウト秒数
6
7// テキストの内容をテキストボックスにセットする
8function printItemList() {
9    // 商品コードの入力文字を取得
10    var in_code = document.getElementById('code').value;
11    var target_url;
12    if(in_code == 'a' || in_code == 'b' || in_code == 'c') {
13        target_url = in_code + '.txt';
14    } else {
15        return false;
16    }
17    // 処理を実行するための関数リファレンスを定義
18    var funcRef = function(text_data) {
19        var lines = text_data.split("\n");
20        var parts = lines[0].split(",");
21        document.getElementById('code').value = parts[0];
22        document.getElementById('item').value = parts[1];
23    };
24    // HTTP通信を開始し、完了したら上記関数を実行させる
25    httpRequest(target_url, funcRef);
26}
27
28// 引数に与えられたURLにHTTPリクエストを行ない、指定された関数を実行
29function httpRequest(target_url, funcitonReference) {
30    try {
31        if(window.XMLHttpRequest) {
32            httpObj = new XMLHttpRequest();
33        } else if(window.ActiveXObject) {
34            httpObj = new ActiveXObject("Microsoft.XMLHTTP");
35        } else {
36            httpObj = false;
37        }
38    } catch(e) {
39        httpObj = false;
40    }
41    if(! httpObj) {
42        httpObjGenerateFail();
43    }
44    // タイマーをセット
45    timerId = setInterval('timeoutCheck()', 1000);
46
47    httpObj.open("GET", target_url, true);
48    httpObj.onreadystatechange = function() {
49        if (httpObj.readyState == 4) {
50            clearInterval(timerId);
51            if (httpObj.status == 200) {
52                funcitonReference(httpObj.responseText);
53            } else {
54                alert(httpObj.status + ' : ' + httpObj.statusText);
55                return false;
56            }
57        }
58    }
59    httpObj.send('');
60}
61
62// XMLHttpRequestオブジェクト生成に失敗した場合の処理
63function httpObjGenerateFail() {
64    alert('ご利用のブラウザーでは、当サイトをご利用頂けません。');
65    return false;
66}
67// HTTPタイムアウト処理
68function timeoutCheck() {
69    timeout_sec --;
70    if(timeout_sec <= 0) {
71        // タイマーをストップする
72        clearInterval(timerId);
73        // HTTPリクエストを中断する
74        httpObj.abort();
75        // エラーダイアログを表示
76        alert('タイムアウトです。');
77        return false;
78    }
79}
80
81// イベントリスナーをセットする
82function setListeners(e) {
83    var code = document.getElementById('code');
84    addListener(code, 'keyup', printItemList, false);
85}
86
87function addListener(elem, eventType, func, cap) {
88    if(elem.addEventListener) {
89        elem.addEventListener(eventType, func, cap);
90    } else if(elem.attachEvent) {
91        elem.attachEvent('on' + eventType, func);
92    } else {
93        alert('ご利用のブラウザーはサポートされていません。');
94        return false;
95    }
96}
97
98// HTMLがロードされた際に、setListeners()関数を実行させる
99addListener(window, 'load', setListeners, false);
100

m.ts10806

2020/03/28 04:51

どうしてもこの本でなければいけない理由はあるのでしょうか？さすがに古すぎて、勉強したとしても活きる場面がないかと思うのですが

raaarta

2020/03/28 04:58

m.tsさまレスポンスありがとうございます！いけない理由はございません。ただ、最近系のトピック（gas,google apps script)を教習していても、やはりチラホラ,Ajaxはでてきます。Ajaxメインに絞った本を探したら、たいがい、、2000年代中盤になりました。そういう経緯です。

m.ts10806

2020/03/28 05:00

「Ajaxで何をやりたいか」によるのではないでしょうか。書籍も執筆時点で最新でも刊行時点で古くなっていることはあります・・・が、いずれにしても書籍は新しいものに越したことはありません。というよりAjaxも手段の1つなので、基本的なことは新しい情報を参考にしておさえておき、あとは自身で色々考えて組んでみることだと思います。

raaarta

2020/03/28 05:05

度々ありがとうございます！はい、何をやりたいか、をイメージできるよう、、まずはAjaxに限らず、そのジャンルを学ぶ場合は、サンプルコードを実際に動かしてみて ”こんなことができるんだ！じゃぁ、●●なんてできるものならやりたいな" と思うタイプでして。。。ご指摘の通り、刊行が最近のAjax本をぼちぼち探します。

m.ts10806

2020/03/28 05:11 編集

>はい、何をやりたいか、をイメージできるよう、、揚げ足取るわけではないですが「何をするか」と決めるのは作る人（もしくは作る人に依頼したい人）なので、イメージするのはあくまで「”こういうことをしたい”をどのように実現していくか」ということだと思います。冒頭の文章から古いのは重々承知の上でしょうし、どうしましょうか。 Ajaxってローカルで実行しようと思ったら結構いろいろ準備する必要があって面倒だったりします。もしかしたら刊行当時はそのままでローカルファイル開けばできたかもしれませんけど、セキュリティ云々の対策が進んでできなくなってる可能性も、ないわけではないので。

coco_bauer

2020/03/28 05:12

2005年というとWindows XPの時代ですよね。今年１月にサポートが切れたWindows 7がリリースされた2009年より４年も前です。2005年頃と現在では様々な規格などが改訂されているので、2005年の状態のまま今でも稼働しているシステムは無いと思います。最新のAJAXの本を使いましょう！

raaarta

2020/03/28 08:20

cocoさんご意見ありがとうございます。最新の本をみましょう、ですよね。

raaarta

2020/03/28 08:24

m.tsさん改めてご意見ありがとうございました。いま、回答をいただきましたので、とりあえずそちらを拝見します。失礼します。