Базы данных - лекция7 - Веб-приложение с Node.js + fs + AJAX

Node.js + fs + HTML + AJAX

Веб-приложение

Веб-приложение с AJAX (не путайте JavaScript в браузере и JavaScript
с Node.js на сервере)

ajax-demo.js var http = require("http"); var fs = require("fs"); //
request, response http.createServer(function (req, res) { console.log("request: " + req.url); switch(req.url) { [...] } }).listen(3000); console.log("Server running at http://localhost:3000/");

ajax-demo.js switch(req.url) { case "/": fs.readFile("./ajax_demo.html", function(err, content) { if(!err)
{ res.writeHead(200, {"Content-Type": "text/html; charset=utf-8"}); res.end(content, "utf-8"); } else { res.writeHead(500, {"Content-Type": "text/html; charset=utf-8"}); res.end(err.message, "utf-8"); console.log(err); } }); break; [...] }

ajax-demo.js switch(req.url) { [...] case "/call1": res.writeHead(200, {"Content-Type": "text/plain; charset=utf-8"});
res.end("reply for /call1"); break; case "/call2": res.writeHead(200, {"Content-Type": "text/plain; charset=utf-8"}); res.end("reply for /call2"); break; [...] }

ajax-demo.js switch(req.url) { [...] default: res.writeHead(404, {"Content-Type": "text/html; charset=utf-8"}); res.write("<!DOCTYPE
html>\n" + "<html>\n" + " <head>\n" + " <meta charset='utf-8'>\n" + " </head>\n" + " <body>\n" ); res.write("404, NOT FOUND: " + req.url); res.end( " </body>\n" + "</html>\n"); }

ajax_demo.html <!DOCTYPE html> <html> <head> <title>Node+http+ajax web app basic demo</title>
<meta charset="UTF-8"/> <script type="text/javascript"> […] </script> </head> <body> <p> Демонстрация работы веб-приложения на Node.js+http+ajax: это HTML-страница с демонстрацией Ajax. </p> <p> <a href="javascript:call1()">Прочитать с сервера значение 1</a>, <a href="javascript:call2()">прочитать с сервера значение 2</a> </p> <p> Результат: <span id="call_res" style="font-style: italic"></span> </p> </body> </html>

ajax_demo.html <script type="text/javascript"> function readServerString(url, callback) { var req =
new XMLHttpRequest(); req.onreadystatechange = function() { if (req.readyState === 4) { // only if req is "loaded" if (req.status === 200) { // only if "OK" callback(undefined, req.responseText); } else { // error callback(new Error(req.status)); } } }; // can't use GET method here as it would quickly // exceede max length limitation req.open("POST", url, true); //Send the proper header information along with the request req.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); req.send(); } [...] </script>

ajax_demo.html <script type="text/javascript"> [...] function call1() { readServerString("/call1", function(err, response)
{ if(!err) document.getElementById("call_res").innerHTML = response; else document.getElementById("call_res").innerHTML = "<span style='color: red'>" + err + "</span>"; }); } function call2() { readServerString("/call2", function(err, response) { if(!err) document.getElementById("call_res").innerHTML = response; else document.getElementById("call_res").innerHTML = "<span style='color: red'>" + err + "</span>"; }); } </script>

• npm install http (на самом деле не обязательно, модуль
fs тоже входит в стандартную поставку) • node ajax-demo.js в браузере открываем адрес: http://localhost:3000/

localhost:3000/

localhost:3000/ (прибить сервер)

localhost:3000/call1

localhost:3000/call2

localhost:3000/page2

Лаба 4.2: динамический фильтр таблицы с Node.js + SQL +
AJAX • Поле ввода — строка фильтра • Под полем ввода таблица — содержимое таблицы из базы данных, отфильтрованной по введенному в поле ввода значению (показаны только те строки, которые содержат введенное значение в качестве подстроки) • При вводе строки посимвольно или при нажатии специальной кнопки отправлять на сервер запрос с введенным значением фильтра • На сервере сформировать ответ, запросив значения из базы SQL • Получить строки отфильтрованной таблицы, обновить отображение таблицы без перезагрузки страницы

Самостоятельное изучение • Верстка HTML + CSS • Material UI
(и HCI вообще) • Библиотеки AJAX (jQuery) • Фреймворк React.js • Библиотеки шаблонов для формирования веб-страниц на сервере (со смешением HTML и кода, аналоги: php, jsp; без смешения кода) • Одностраничные веб-приложения (статический HTML, контент загружается динамически с JavaScript)

Базы данных - лекция7 - Веб-приложение с Node.js + fs + AJAX

Базы данных - лекция7 - Веб-приложение с Node.js + fs + AJAX

Anton

More Decks by Anton

Other Decks in Education

Featured

Transcript

Node.js + fs + HTML + AJAX

Веб-приложение

Веб-приложение с AJAX (не путайте JavaScript в браузере и JavaScript

ajax-demo.js var http = require("http"); var fs = require("fs"); //

ajax-demo.js switch(req.url) { case "/": fs.readFile("./ajax_demo.html", function(err, content) { if(!err)

ajax-demo.js switch(req.url) { [...] case "/call1": res.writeHead(200, {"Content-Type": "text/plain; charset=utf-8"});

ajax-demo.js switch(req.url) { [...] default: res.writeHead(404, {"Content-Type": "text/html; charset=utf-8"}); res.write("<!DOCTYPE

ajax_demo.html <!DOCTYPE html> <html> <head> <title>Node+http+ajax web app basic demo</title>

ajax_demo.html <script type="text/javascript"> function readServerString(url, callback) { var req =

ajax_demo.html <script type="text/javascript"> [...] function call1() { readServerString("/call1", function(err, response)

• npm install http (на самом деле не обязательно, модуль

localhost:3000/

localhost:3000/

localhost:3000/ (прибить сервер)

localhost:3000/call1

localhost:3000/call2

localhost:3000/page2

Лаба 4.2: динамический фильтр таблицы с Node.js + SQL +

Самостоятельное изучение • Верстка HTML + CSS • Material UI