◆クライアントからサーバへの要求を非同期で行う：XMLHttpRequest
index.js
・Httpサーバ開始させる(server.js呼び出し)
・サーバ開始時に※①routerモジュールの関数、※②handlerモジュールのリクエスト処理オブジェクトをパラメータで渡す
server.js
・Httpサーバインスタンス生成、
・Httpサーバ開始、待機(http://127.0.0.1:3000)
・リスナー登録
index.jsから渡されたrouterモジュールの関数を呼び出す（パラメータは、リクエストhandleオブジェクト、リクエストのurlパス名、レスポンス）
※①router
リクエストのurlを識別し、リクエストhandlerを呼び出す
・識別できないリクエストのurlの場合、エラーメッセージをテキスト形式でレスポンスする
※②handler
リクエストのurlのパスをキー、処理関数をvalueとするオブジェクトと、様々なリクエストに対して処理関数を実装
index.html
・url --> http://127.0.0.1:3000/indexでリクエストした表示されるリソース
・ボタンをクリックしたら、<div>タグの属性id（content）に対してXMLHttpRequestインスタンスを使い、非同期通信を行い、サーバーからの受信結果
---------------------------------------------------------
index.js
---------------------------------------------------------
var server = require('../js/server');
var router = require('../js/router');
var handler= require('../js/handler');
server.start(router.route, handler.handle);
---------------------------------------------------------
server.js
---------------------------------------------------------
var http = require('http');
var url = require('url');
var server = http.createServer();
function start(route, handle){
server.addListener('request', function(request, response){
var pathName = url.parse(request.url).pathname; // ex. --> /index
console.log(pathName);
route(handle, pathName, response);
//response.writeHead(200, {'Content-Type': 'text/plain'});
//response.end('Hello World');
});
server.listen(3000);
console.log('Server running at http://127.0.0.1:3000/');
}
// グローバル変数のexportsを使いstart()メソッドをモジュールとして登録
exports.start = start;
------------------------------------------------------------------
router.js
------------------------------------------------------------------
function route(handle, pathname, response) {
console.log('about to route a request for ' + pathname);
console.log('typeof handle[path] : ' + typeof handle[pathname]);
if (typeof handle[pathname] === 'function') {
handle[pathname](response);
} else {
console.log('no request handler found for ' + pathname);
response.writeHead(200, {'Content-Type': 'text/plain'});
response.end('no request handler found for ' + pathname);
}
}
exports.route = route;
--------------------------------------------------------------------
handler.js
--------------------------------------------------------------------
function index(response) {
console.log('request handler called --> index');
var fs = require('fs');
fs.readFile("../html/index.html", function(errors, data){
response.writeHead(200, {'Content-Type': 'text/html'});
response.end(data);
});
}
function content(response) {
var fs = require('fs');
fs.readFile("../html/content.html", function(errors, data){
response.writeHead(200, {'Content-Type': 'text/html'});
response.end(data);
});
}
function menu(response) {
response.writeHead(200, {'Content-Type': 'text/plain'});
response.end('Hellow menu!');
}
var handle = {}; // javascript object has key:value pair.
handle['/'] = index;
handle['/menu'] = menu;
handle['/index'] = index;
handle['/content'] = content;
exports.handle = handle;
--------------------------------------------
index.html
---------------------------------------------
<html>
<head></head>
<body>
<div>index!!</div>
<div><button id="btn">click!</button></div>
<div id="content"></div>
<script type="text/javascript">
(function (){
var btnEl = document.getElementById('btn');
debugger;
btnEl.onclick = exe;
var xmlHttp;
function exe(){
createXMLHttpRequest();
var url = "/content";
// サーバからレスポンスを受信した場合
xmlHttp.onreadystatechange = loader;
// リクエスト生成
xmlHttp.open("GET", url, true);
xmlHttp.send(null); // Post処理の場合
}
function createXMLHttpRequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function loader() {
// サーバーからすべて受信した場合
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
// レスポンスボディをテキストで返す場合
var result = xmlHttp.responseText;
document.getElementById("content").innerHTML = result;
}
}
}
})();
</script>
</body>
</html>
------------------------------------------------------------------------
content.html
------------------------------------------------------------------------
<html>
<head></head>
<body>
<div style="border:1px solid red;">result!!!
<div id="result"></div>
</div>
</body>
</html>
-------------------------------------------------------------------------
C:\WORK\DEV\NODE>tree /f servertest2 > tree.txt
C:\WORK\DEV\NODE\SERVERTEST2
├─html
│ content.html
│ index.html
│
└─js
handler.js
index.js
router.js
server.js
------------------------------------------------------------------------
C:\work\dev\node\servertest2\js>node index.js
ブラウザから、http://127.0.0.1:3000/index
댓글 없음:
댓글 쓰기