{"id":274,"date":"2020-06-05T10:32:37","date_gmt":"2020-06-05T01:32:37","guid":{"rendered":"https:\/\/blog.wsd.sh\/?p=274"},"modified":"2020-06-05T10:34:53","modified_gmt":"2020-06-05T01:34:53","slug":"nodejs-book-chapter-5","status":"publish","type":"post","link":"https:\/\/blog.wsd.sh\/?p=274","title":{"rendered":"Nodejs Book: Chapter 5"},"content":{"rendered":"

So now that we have a basic working file server up and running, if we want
\nto make a web application, that entails doing more than serving static files.
\nHow can we make requests from a client page and have the server perform some
\nkind of task relevant to the request.<\/p>\n

In the first chapter of this book we established that URL’s are effectively
\njust a string that is passed into a server and that we had to give it meaning.
\nOne of the meanings that we gave it was that of a file path as we build a file
\nserver. But we can also give URL’s other meanings like calling logic, we just
\nhave to decide on a url-base to distinguish what logic we want executed on the
\nserver.<\/p>\n

Basically all we need to do is decide upon a unique URL that doesn’t overwrite
\nother potential calls to the server. We can decide on “\/api”, or “\/callback”,
\nor “\/node”, “\/rest” or otherwise as long as it doesn’t overwrite a file path.
\nMy personal preference is to use the base of “\/api”.<\/p>\n

The file layout of this chapter’s code is listed below.<\/p>\n

- api.js\n+ public\/\n| - get.html\n| - + js\/\n| --- get.js\n<\/pre>\n
File: get.html<\/p>\n
<!DOCTYPE HTML>\n<html>\n\n    <head>\n\n        <meta charset=\"utf-8\"\/>\n        <title>Ajax Request<\/title>\n\n    <\/head>\n\n    <body>\n\n        <button id=\"clickBtn\">Click Me!<\/button>\n        <p id=\"responseText\"><\/p>\n\n        <script type=\"text\/javascript\" src=\"js\/get.js\"><\/script>\n\n    <\/body>\n\n<\/html>\n<\/pre>\n
File: js\/get.js<\/p>\n
\"use strict\";\n\nvar clickBtn = document.getElementById(\"clickBtn\");\nvar responseText = document.getElementById(\"responseText\");\n\nclickBtn.addEventListener(\"click\", function (event) {\n\n    var xml = new XMLHttpRequest();\n    xml.open(\"GET\", \"\/api\/hello\", true);\n    xml.send();\n\n    xml.onload = function() {\n\n        responseText.textContent = xml.responseText;\n\n    }\n\n\n});\n<\/pre>\n
File: api.js<\/p>\n
\"use strict\";\n\nconst http = require(\"http\");\nconst handleFile = require(\"handle-file\");\n\nconst server = http.createServer();\nserver.on(\"request\", handleRequest);\nserver.listen(8080, handleListen);\n\nfunction handleRequest(req, res) {\n\n    switch(req.url) {\n        case \"\/api\/hello\":\n\n            res.writeHead(200, { \"Content-Type\" : \"text\/plain\" });\n            res.end(\"Hello, World!\");\n\n        break;\n        default:\n\n            handleFile(req, res);\n\n        break;\n    }\n\n}\n\nfunction handleListen( ) {\n\n    console.log(\"Server is listening on port 8080\");\n\n}\n<\/pre>\n
When we run our server and click on the button we should now see the following
\noutput:<\/p>\n
\"\"<\/p>\n
Hopefully the code is in this chapter should be pretty self explanatory, but let’s
\ntake a look at two parts. The first part being the request sent from the client.<\/p>\n
var xml = new XMLHttpRequest();\nxml.open(\"GET\", \"\/api\/hello\", true);\nxml.send();\n\nxml.onload = function() {\n\n    responseText.textContent = xml.responseText;\n\n}\n<\/pre>\n
While web pages have become much more dynamic, for a long period of time, web pages
\nwere a static fair. A page was served with a list of hyperlinks, and hyperlinks
\ncould be clicked to navigate to another page. It was assumed that any requests to
\nthe server were for a different page. As content on the internet became more dynamic
\n“Ajax” became a common implementation of sending information to and from the server
\nfrom within Javascript.<\/p>\n
“Ajax” stands for “Asynchronous JSON and XML” request. And it’s exactly the same
\nas a browser requesting a page, just performed from within Javascript and without
\nthe page being reloaded. In this case we send a “GET” request to the url “\/api\/hello”
\nand once it’s loaded we display the response text to the user.<\/p>\n
function handleRequest(req, res) {\n\n    switch(req.url) {\n        case \"\/api\/hello\":\n\n            res.writeHead(200, { \"Content-Type\" : \"text\/plain\" });\n            res.end(\"Hello, World!\");\n\n        break;\n        default:\n\n            handleFile(req, res);\n\n        break;\n    }\n\n}\n<\/pre>\n
For our server, our api.js only has one minor change from the previous chapter.
\nWe’ve added a switch statement to the request url, giving preference to logical
\nfunctions we define and defaulting to serving a file if none of the patterns match.<\/p>\n
This was a basic example of testing waters with ajax. And is not very useful yet.
\nWe will continue expanding this example in the next few chapters as we cover sending
\nand receiving JSON data in the next chapter.<\/p>\n","protected":false},"excerpt":{"rendered":"
In the previous chapter we learned how to create modules to simplify our code. Now that he have a basic grasp on how to serve static files from Nodejs, in this chapter we switch to more learning how to create a more dynamic application server where we handle both static files, and Ajax requests from the client. We start with a simple “hello world” example. <\/p>\n","protected":false},"author":1,"featured_media":249,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/274"}],"collection":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=274"}],"version-history":[{"count":2,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/274\/revisions"}],"predecessor-version":[{"id":277,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/274\/revisions\/277"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/media\/249"}],"wp:attachment":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}