Monthly Archives: November 2017

Using Request object to make web requests

UPDATE

Client Side

ref – https://github.com/redmacdev1988/SlideShow-Frontend

When we want to make a web request, we can use JS’s Request object.
The first parameter takes in an url, next parameter is a dictionary where key/values specify the details of the request. i.e web verb, headers, body data, etc.

For example, we want to make a PUT request on an url http://1xx.xx9.xx.xxx/pictorials/beijing-tower, use standard mod as cors, specify body data as “description=’hehe haha'”, etc.

Also notice that we set the body data like so: parameter=value&also=another

https://stackoverflow.com/questions/14551194/how-are-parameters-sent-in-an-http-post-request

updatePictorial.js

Then we fetch this request object, and get the response.

Server side

ref – https://github.com/redmacdev1988/SlideShow-Backend/

In node, we specify our routes. We say for our app, when the incoming request has the route of /pictorials/id and the web verb is PUT, then we take care of this by calling exported function update_a_pictorial in the pictorialController file

SlideShow-Backend/api/routes/pictorialRoutes.js

And so we implement update_a_pictorial function. We have the standard request/response object. In the req object, we look at the body to make sure we have received the data. The id, being passed via the url, will be in the params array property.

Once you have that, we use mongo’s findOneAndUpdate function to update the row associated with the ID with our new description.

SlideShow-Backend/api/controllers/pictorialController.js

DELETE

This feature makes a DELETE request. We set up our basic Request properties such as method, mode, body, etc.
Notice in our body, we now attached the unique id of the pictorial so the server can delete that row in the database.

client side

Also notice that we set the body data like so: parameter=value&also=another
https://stackoverflow.com/questions/14551194/how-are-parameters-sent-in-an-http-post-request

SERVER SIDE

We then let express know that for the delete verb, call delete_a_pictorial function.

SlideShow-Backend/api/routes/pictorialRoutes.js

SlideShow-Backend/api/controllers/pictorialController.js

We extract the data (unique id) from the body, and use it to specify which pictorial we want to delete.

JavaScript Preloading

https://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480001

JavaScript Preloading

JavaScript includes the Image among its native object types. The Image object represents an HTML image tag on the page and exposes the same properties and events. Perhaps oddly, the Image has no constructor that accepts an image source, so an image must be loaded into the object by setting its src attribute. Doing so causes the image to be downloaded from the server at that point.

Once an image is preloaded with JavaScript, you can take advantage of the cached image using only its filename. It’s not necessary to keep using the JavaScript variable that you loaded the image into. The thonky.com provides an excellent demo to illustrate this. The demo provides a button to preload the image. After it has finished loading, the page displays a second button that allows you to use the preloaded image in an image tag, using only the image filename. Even though the code does not refer to the variable that the image was loaded into, the image will still show up right away because it’s in the cache.

Example

fetch POST, cors error

HTML

So we have an image loader input file type. We also have a button control.
The onclick event for the button calls our js function uploadImage.

Once

Node js server side