You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
15 lines
2.1 KiB
15 lines
2.1 KiB
import { addBanner, addArticle, addHeader, addSubHeader, addParagraph, addCaption, addQuote } from '/scripts/article.js'; |
|
import { addInset, addInsetList, addInsetCodeListing, addInsetBulletList } from '/scripts/inset.js'; |
|
import { addImageWithCaption, addButtonGroup } from '/scripts/visuals.js'; |
|
import { menuLearningRestApis2 } from '/scripts/buttongroups.js'; |
|
import { boards } from '../scripts/sample_request.js'; |
|
|
|
const main = document.querySelector("main") |
|
main.append(addBanner("Learning REST APIs", "Morten Rand-Hendriksen : February 2018", "REQUEST")) |
|
main.append(addArticle()) |
|
const article = document.querySelector("article") |
|
article.append(addHeader("Sending a Request from a JavaScript File")) |
|
article.append(addParagraph("With these two functions, I am trying to generate a call from effectively inside a web page by creating a function to send a request (that is getBoards) and a function that generates an HTML element to be added to the page. This could most likely be done with a single function but this is just an experiment so I am not too concerned about design principles here, but rather in whether or not the method works.")) |
|
article.append(addInsetCodeListing(["function boards() {", " const paragraph = document.createElement(\"p\");", " paragraph.innerHTML=getBoards();", ""," console.log(\"Calling the boards function......\");","" , " return paragraph;", "}", "", "function getBoards() {", " const responseText=\"\";", " var xhr = new XMLHttpRequest();", " xhr.open(\"GET\", \"http://localhost:3000/api/boards/\", true);", " xhr.onload = function() {", " console.log(xhr.responseText);", " };", " xhr.send();", "", " console.log(\"Calling the getBoards function......\");", " console.log(\"Returning response text: $responseText\");", " return responseText;", "}", "", "export { boards }"])) |
|
article.append(addParagraph("The console logging is for troubleshooting purposes, so that I could confirm that the appropriate functions were being called, what response the request is getting and what was being returned by the getBoards function.")) |
|
main.append(menuLearningRestApis2()) |