{"id":278,"date":"2020-06-06T09:15:22","date_gmt":"2020-06-06T00:15:22","guid":{"rendered":"https:\/\/blog.wsd.sh\/?p=278"},"modified":"2020-06-06T09:21:44","modified_gmt":"2020-06-06T00:21:44","slug":"nodejs-book-chapter-6","status":"publish","type":"post","link":"https:\/\/blog.wsd.sh\/?p=278","title":{"rendered":"Nodejs Book: Chapter 6"},"content":{"rendered":"

In the previous chapter, we created a very simple proof of concept ajax request
\nfrom within a client Javascript. In this chapter we’re going to expand on this
\nexample so that instead of just the static text, “Hello, World!” change the
\nrequest so we return “Hello !”. The output from this chapter will look
\nlike the following.<\/name><\/p>\n

\"\"<\/p>\n

The client side code is the most similar so we’ll take a look at that first.<\/p>\n

File: post.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        <input type=\"text\" id=\"inputName\"\/>\n        <button id=\"clickBtn\">Click Me!<\/button>\n        <p id=\"responseText\"><\/p>\n\n        <script type=\"text\/javascript\" src=\"js\/post.js\"><\/script>\n\n    <\/body>\n\n<\/html>\n<\/pre>\n
Above is the code for the hmtl, it’s almost entirely identical, with the only
\ndifference being that we add a new input element, for the user to enter
\ntheir name. The code for the client side Javascript is largely unchanged as
\nwell. The source code is as listed below.<\/p>\n
File: js\/post.js<\/p>\n
\"use strict\";\n\nvar inputName = document.getElementById(\"inputName\");\nvar clickBtn = document.getElementById(\"clickBtn\");\nvar responseText = document.getElementById(\"responseText\");\n\nclickBtn.addEventListener(\"click\", function (event) {\n\n    var args = {\n        \"name\" : inputName.value\n    }\n\n    var xml = new XMLHttpRequest();\n    xml.open(\"POST\", \"\/api\/hello\", true);\n    xml.send(JSON.stringify(args));\n\n    xml.onload = function() {\n\n        responseText.textContent = xml.responseText;\n\n    }\n\n\n});\n<\/pre>\n
The main difference is that we now create a JSON object to be sent to the server,
\nwhich we refer to as args. We also set the request type as “POST” for the xml.open
\nfunction and input the string representation of the arguments we want sent to the
\nserver.<\/p>\n
If your wondering where the “GET” and “POST” types come from, they are two specific
\ntypes of http request. GET is likely the most common, as it only sends a URL
\nwith a set of headers to the server to ask for a given resource. POST is different
\nin that in addition to a URL and headers, a body is also sent with the request. In
\nthis case our JSON string is attached to the body of the request to the server.<\/p>\n
There are also other standard http requests. HEAD, which just requests HTTP header
\nresponses with no body. PUT to send information, DELETE to request the deletion
\nof a resource, OPTIONS which returns the HTTP methods the server supports, and CONNECT
\nwhich converts the connection to a TCP tunnel.<\/p>\n
Which brings us to the source for the actual server:<\/p>\n
File: callback.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    if(req.method === \"GET\") {\n\n        handleFile(req, res);\n\n    } else if(req.method === \"POST\") {\n\n        switch(req.url) {\n            case \"\/api\/hello\":\n\n                api_say_hello(req, res);\n\n            break;\n            default:\n\n                res.writeHead( 204, { \"Content-Type\" : \"text\/plain\" });\n                res.end( \"Empty Response\" );\n\n            break;\n        }\n\n    } else {\n\n        res.writeHead( 204, { \"Content-Type\" : \"text\/plain\" });\n        res.end( \"Empty Response\" );\n\n    }\n\n}\n\nfunction handleListen( ) {\n\n    console.log(\"Server is listening on port 8080\");\n\n}\n\nfunction api_say_hello( req, res ) {\n\n    var json_str, json;\n\n    var json_str = \"\";\n\n    req.on(\"data\", function(data) {\n\n        json_str += data;\n\n    });\n\n    req.on(\"end\", function() {\n\n        try {\n            json = JSON.parse(json_str);\n        } catch(err) {\n            res.writeHead( 400, { \"Content-Type\" : \"text\/plain\" });\n            return res.end( \"Invalid JSON parameter\" );\n        }\n\n        res.writeHead(200, { \"Content-Type\" : \"text\/plain\" });\n        res.end(\"Hello \" + json.name);\n\n    });\n\n}\n<\/pre>\n
The first thing that sticks out is the handle function request.<\/p>\n
function handleRequest(req, res) {\n\n    if(req.method === \"GET\") {\n\n        handleFile(req, res);\n\n    } else if(req.method === \"POST\") {\n\n        switch(req.url) {\n            case \"\/api\/hello\":\n\n                api_say_hello(req, res);\n\n            break;\n            default:\n\n                res.writeHead( 204, { \"Content-Type\" : \"text\/plain\" });\n                res.end( \"Empty Response\" );\n\n            break;\n        }\n\n    } else {\n\n        res.writeHead( 204, { \"Content-Type\" : \"text\/plain\" });\n        res.end( \"Empty Response\" );\n\n    }\n\n}\n<\/pre>\n
We can use the request method to quickly filter what the intent of the request is.
\nFor GET requests, we can assume a file is being requested and serve a file. In the
\ncase of POST, we can consider it a call to the server from an ajax client, and filter
\nout which function should be called to handle the request. And lastly to make sure
\nthat in the case of any other method type are handled and simply returned an empty
\nresponse.<\/p>\n
function api_say_hello( req, res ) {\n\n    var json_str, json;\n\n    var json_str = \"\";\n\n    req.on(\"data\", function(data) {\n\n        json_str += data;\n\n    });\n\n    req.on(\"end\", function() {\n\n        try {\n            json = JSON.parse(json_str);\n        } catch(err) {\n            res.writeHead( 400, { \"Content-Type\" : \"text\/plain\" });\n            return res.end( \"Invalid JSON parameter\" );\n        }\n\n        res.writeHead(200, { \"Content-Type\" : \"text\/plain\" });\n        res.end(\"Hello \" + json.name);\n\n    });\n\n}\n<\/pre>\n
The actual code for handling our “\/api\/hello” reply is written above. When a client
\nsends a POST request to a server, it sends the information in packets. And if
\nthe information being sent to the server is large, the client server may have
\nto send the information in stages. So we listen for data to be sent and add it
\nto our JSON string, and then once the information has finished, we parse the JSON
\nstring. Once that’s finished we are able to send our response.<\/p>\n
So in this chapter we managed to send a simple JSON string to the server and got
\na response. So what about uploading files? We’ll work on that in the next chapter.<\/p>\n","protected":false},"excerpt":{"rendered":"
In the previous chapter we wrote a simple Ajax call where we returned the simple expression “Hello World”. In this chapter we add on to the previous example by writing a simple echo function where we provide a Name as a parameter to the server, and have the server reply with “Hello Name”.<\/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\/278"}],"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=278"}],"version-history":[{"count":4,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/278\/revisions"}],"predecessor-version":[{"id":283,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/278\/revisions\/283"}],"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=278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}