Ok, first I will try to answer your question. XMLHttpRequest (XHR for short) is known to be a bit hard to work with, but I think what you need is like this:
var data = new FormData();
data.append("content", "hello");
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", handleResponse); // This is the new line
xhr.open("POST", "my-project.glitch.me");
xhr.send(data);
function handleResponse() {
// In this function, 'this' is an XMLHttpRequest object
// Do something with the response here
console.log(this.status, this.responseText);
}
You attach a listener function before sending the request.
Now, a lot of people swerve XHR altogether. A modern alternative is Fetch, which is built into most modern browsers as a replacement for XHR. Here’s a good intro to fetch: https://javascript.info/fetch
You can also use a library. In the old days, jQuery was popular for it’s ajax functions that do what you want. A more modern alternative is axios but adding it into your project is left up to you
Hope this helps. Here to answer more questions when I can
What you are trying to do is referred to as communication between a client and an API. Thus requires a front-end and a back-end.
I recommend you have a look at the Fetch API to send requests from the browser to a server. If your API returns JSON data I recommend you have a look at Axios, which I’ll be using in my examples below.
A simple example between a client-server relationship in code could look like this:
app.js (server-side)
// Import express
const express = require("express");
// Create an application
const app = express();
// Add a static site middleware. This allows
// the browser to request files like `index.html`
app.use(express.static(__dirname + "/public"));
// Add a ping route.
app.get(
// This is the route of which the
// browser can request a "pong"
// response.
"/ping",
// This is the middleware used to respond
// to the client, you can think of this
// like the route handler.
async (req, res) => {
// Send a JSON response to the client.
res.json("pong!");
}
);
// Start your server.
app.listen(3000, () => console.log("🚀 Server is running at port 3000."));
client.js (client-side)
// A ping function to send a request to
// the ping route.
const ping = async () => {
const { data } = await Axios.get("/ping");
return data;
};
// Call the ping function:
ping()
// Since the ping function
// returns a promise we must
// use .then() and .catch()
// to get the responses.
.then(data => console.log("Server said:", data))
.catch(error => console.error("Server failed:", error));
I’m a bit new to this, how can I use Axios on the client-side?
I’m trying to send form data so my server.js can store those details somewhere (the “action” attribute with the “POST” method didn’t work) and Axios isn’t defined on the client so I can’t use it, unless I could somehow define it within my client.js still?
What am I doing wrong? It says Axios is not defined.
Perhaps this is an XY problem sprouting, all I need to do is send a string so that server.js can store that sent data, is this the best way to go about this?