пятница, 16 марта 2018 г.

Browser XMLHttpRequest and Node Server

Файл server.js

var http = require('http')
    , fs = require('fs')
    , path = require('path')
    , url = require('url')
    , querystring = require('querystring');

var server = http.createServer();

server.on('request', function (request, response) {
    if (request.method === 'POST' && url.parse(request.url).path === '/ajax') {
        var data = [];
        request.on('data', function (chunk) {data.push(chunk)});
        request.on('end', function () {
            setTimeout(function () {
                response.writeHead(200, {'Content-Type': 'text/plain'});
                var query = querystring.parse(data.join());
                response.end(query.data);
            }, 1000);
        });
    } else {
        fs.readFile(path.resolve(path.join(__dirname, 'index.html')), function (error, indexHTML) {
            if (error) {throw error;}
            response.writeHead(200, {'Content-Type': 'text/html'});
            response.end(indexHTML);
        });
    }
});

server.listen(80, '127.0.0.1', function (error) {
    if (error) {throw error;}
    console.log('Server started at 127.0.0.1:80');
});

Файл index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>XMLHttpRequest</title>
</head>
<body>
    <div id="server-response"></div>
    <script type="text/javascript">
        setTimeout(function () {
            var request = new XMLHttpRequest();
            if (request.readyState === 0) {
                console.log('readyState 0 UNSENT: ' + (request.readyState === request.UNSENT));
            }
            request.open('POST', '/ajax', true, 'username', 'password');
            if (request.readyState === 1) {
                console.log('readyState 1 OPENED: ' + (request.readyState === request.OPENED));
            }
            request.onreadystatechange = function () {
                if (request.readyState === 2) {
                    console.log('readyState 2 HEADERS_RECEIVED: ' + (request.readyState === request.HEADERS_RECEIVED));
                }
                if (request.readyState === 3) {
                    console.log('readyState 3 LOADING: ' + (request.readyState === request.LOADING));
                }
                if (request.readyState === 4) {
                    console.log('readyState 4 DONE: ' + (request.readyState === request.DONE));
                }
                if (request.readyState === 4) {
                    var response = this;
                    if (response.status === 200) {
                        document.getElementById('server-response').innerHTML = (
                               '<p>RESPONSE STATUS:</p>'
                            + '<p>' + response.status + '</p>'
                            + '<p>RESPONSE STATUS TEXT:</p>'
                            + '<p>' + response.statusText + '</p>'
                            + '<p>HEADERS:</p>'
                            + '<p>' + response.getAllResponseHeaders() + '</p>'
                            + '<p>HEADER CONTENT_TYPE:</p>'
                            + '<p>' + response.getResponseHeader('Content-Type') + '</p>'
                            + '<p>RESPONSE URL:</p>'
                            + '<p>' + response.responseURL + '</p>'
                            + '<p>RESPONSE:</p>'
                            + '<p>' +response.response + '</p>'
                            + '<p>RESPONSE TEXT:</p>'
                            + '<p>' + response.responseText + '</p>'
                        );
                    } else {
                        document.getElementById('server-response').innerHTML = 'Error. Status code: ' + response.status + ', status text: ' + response.statusText;
                    }
                }
            };
            request.timeout = 2000;
            request.ontimeout = function () {document.getElementById('server-response').innerHTML = 'Timeout'};
            request.onabort = function () {document.getElementById('server-response').innerHTML = 'Abort'};
            request.onerror = function (event) {document.getElementById('server-response').innerHTML = 'Error. Server is not available. Status code: ' + event.target.status;};
            if (request.overrideMimeType) {request.overrideMimeType('text/plain', 'x-user-defined');}
            request.setRequestHeader('My-Header', 'abcdef');
            request.withCredentials = true;
            request.responseType = 'text';
            request.send('data=123&value=456');
            setTimeout(function () {request.abort();}, 500);
        }, 5000);
    </script>
</body>
</html>

Комментариев нет:

Отправить комментарий