I am building an express (http://expressjs.com/) app which will create an API by parsing another webpage. Here is how I create my route:
app.get('/api/json', test.jsonParser);
Here is my jsonParser method:
exports.jsonParser = function(req, res) {
var client = new XMLHttpRequest();
client.open('GET', smhiURL);
client.onreadystatechange = function() {
if (client.readyState == 4 && client.status == 200) {
if (client.responseText) {
res.render('hello', { message: 'Congrats, you just set up your app!' });
} else {
res.status(404).send("Page not found.");
}
}
}
client.send();
}
Them messag I am sending in the onreadystatechangeis just using defult template so I can test if everything is ok but its not, I am getting NetworkError: 500 Internal Server Error
Any ideas why this is not working? I am guessing there is some async problems but, and the rendermethod is called to late.., but didn't find any better way of doing requests from within express.
Use
https://www.npmjs.com/package/request and pipe the response out.
Note: XMLHttpRequest's are generally restricted to the same origin.
Related
This question already has answers here:
How can I make an AJAX call without jQuery?
(24 answers)
Closed 3 years ago.
I'm setting up my first server with node.js, but I don't know how to connect a client and that server. I don't want to use jquery, and all the questions I could find about this involved jquery or were about different languages. Does anyone know how to do this?
Edit: I have a connection between the server and client, but the response has nothing in it. The code for my server is here, and the code for my client is here (in the folder "Multiplayer").
Do something like this to setup a Node.js HTTP server listenning on port 8080.
The client will send GET requests using AJAX.
index.html
<html>
<head>
<script>
var xhttp = new XMLHttpRequest();
// Create a function callback, called every time readyState changes
xhttp.onreadystatechange = function()
{
// When the response has been received with status 200
// Update the element div#response-holder
if (this.readyState == 4 && this.status == 200)
{
var txtDisplay = elem document.getElementById("response-holder")
txtDisplay.innerHTML = this.responseText;
}
};
// Send a GET request to /api, asynchronously
xhttp.open("GET", "/api", true);
xhttp.send();
<script>
</head>
<body>
<div id="response-holder"></div>
</body>
</html>"
server.js
// Load the http and fs (filesystem) modules
var app = require("http");
var fs = require("fs");
// Serve the "/index.html" home page on port 8080
app.createServer(function (req, resp)
{
fs.readFile("index.html", function(err, data)
{
resp.writeHead(200, {'Content-Type': 'text/html'});
resp.write(data);
resp.end();
}
);
}
).listen(8080);
// Also answer to GET requests on "/api"
app.get('/api', function(req, resp)
{
var responseStr = "Hello World!";
resp.status(200);
resp.setHeader('Content-type', 'text/plain');
return resp.send(responseStr);
}
);
Here is a W3Schools tutorial on AJAX:
https://www.w3schools.com/js/js_ajax_intro.asp
You may do that with vanilla JavaScript, using Fetch API.
Assuming that Node will provide you some URLs, you can get, post, etc., through fetching them.
More on how that works here:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
TCP connection between client and Node server will be the option. Here's a sample code snippet:
var ser = require('ser');
var clientSer = new net.Socket();
clientSer.connect(1220, '127.0.0.1', function() {
console.log('Connected');
client.write('Hello, Connection Established!');
});
clientSer.on('data', function(data) {
console.log('Received: ' + data);
client.destroy(); // kill client after server's response
});
clientSer.on('close', function() {
console.log('Connection closed');
});
Node tutorial: https://www.w3schools.com/nodejs/nodejs_intro.asp
I'm new to using nodejs and javascript so I'm sorry if I'm just doing something obviously wrong. I have a nodejs app I'm running and serves a html page. That html page can send Post requests using XMLHttpRequest. The request goes though and my node app calls the function that my request is meant to invoke. The problem is I want to get some data back from that request so I am trying to get that from the response to the request. The issue is I am getting an empty response and I do not know why.
Here is my request.
function SendCachedTriangulation(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById('responseLog').textContent = "sent triangulation: " + this.response;
}
};
xhttp.open("Post", "/sendCachedTriangulation");
xhttp.setRequestHeader("Content-type", "application/json");
var text = '{ "data" : ' + '{ "someData":"' + '1' + '" } }';
xhttp.send(text);
return false;
}
The result I get from this is response is empty. It does update the element I am trying to update but it just says "sent triangulation: ".
On the nodejs side this is my code.
router.post('/sendCachedTriangulation', (req, res, next) => {
client.SendCachedTriangulation(() => {
res.status(200)
;}, req.body
);
res.status(200).message = "sent triangulation";
res.send();
});
Which this seems to be calling my function to send cached triangulation properly i just don't get that "sent triangulation" message.
What do I need to change to display that message in my HTML page?
Actually I understood your snippet. I also understand that is complicated at first time with Node, because is everything Javascript. Let me explain: in your HTML, think the request is OK, but actually have, let's say, two files: HTML file, that performs the request, and the node HTTP server, that responds the request. So I mean something like:
// /server/app.js
router.post('/sendCachedTriagulation', (req, res, next) => {
res.status(200).send("sent triangulation")
})
// /client/index.html
client.SendCachedTriangulation(/* do stuff */)
I am trying to make a private page dedicated to an Ajax request. Here is the simple request.
window.onload = loaded;
function loaded(){
var xhr = new XMLHttpRequest();
xhr.open('GET', '/data_annotations', true);
xhr.onload = function(){
if(this.status == 200){
var data = xhr.responseText;
console.log(JSON.parse(data));
} else {
console.log("Rip");
}
}
xhr.send();
//httpreq.abort();
}
Here is the node.js that it's running off of:
...
app.get('/', function(req, res, next){
console.log("Connected Successfully.");
res.render('home');
});
app.get('/data_annotations', function(req, res, next){
if(req.xhr || req.headers.accept.indexOf('json') > -1) {
const mc = mongo.MongoClient;
const url = 'mongodb://localhost:27017/';
const dbName = 'practiceMDB';
console.log("Got Data Annotations.");
mc.connect(url, { useNewUrlParser: true }, (err, client) =>{
if(err){
console.log(err);
} else {
const db = client.db(dbName);
data = db.collection('DataAnnotations');
data.find({}).toArray(function(err, data){
res.send(data)
});
client.close();
}
});
} else {
res.redirect('/');
}
});
app.listen(port, function(){
console.log('Server Started on Port '+port);
});
I only want /data_annotaion to run if it's from the Ajax request. If a user types in /data_annotations in the url, it should redirect them to the home page. When I ran this I got these results:
Server Started on Port 3000
Connected Successfully.
Connected Successfully.
This is indicating (to me) that the ajax request isn't registering as an ajax request, and is registering as a normal request. Further, I am getting this error:
Uncaught SyntaxError: Unexpected token < in JSON at position 0
I believe it is due to the redirection. The Ajax request gets redirected, it takes the response of the home page and is unable to parse it (I believe this to be happening because it cannot parse HTML text or string text - don't quote me on that). How do I get Node JS to register my Ajax request?
PS: I looked at this answer to determine if a request is Ajax or not, but it always determines my requests as not Ajax: https://stackoverflow.com/a/28540611/6804700
First thing - In your client-side code you need to set the accept header, because that is what you are looking for in your server side code.
xhr.setRequestHeader("accept", "application/json");
Second you can use the following code to return the data as json in your server side code
res.json(data);
Another comment. It is bad practice to change the result type or redirect in an API. Your url is either returning JSON or redirecting to and HTML page which means the result is not consistent.
I am very new with node js and decided to learn how to secure api keys, i've looked everywhere but can't find a example. But i found some that suggest the only way is to do a server side api request.
I am using openweathermap api for this code, i get the expected data back as a response in chrome network tab but i have questions regarding it.
How do i use the response data (e.g getting the current weather, temp) ?
Is this the proper way on doing a server side api request in node.js?
http.createServer(function(req, res) {
if (req.url === '/') {
res.writeHead(200, {"Content-Type": "text/html"});
fs.createReadStream(__dirname + '/index.html').pipe(res);
} else if (req.url === '/getweather') {
var weatherApiURL = 'https://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=<API KEY>';
request(weatherApiURL, function (error, response, body) {
if (error) {
res.writeHead(500, 'Weather API request failed', {'content-type': 'text/plain'});
res.end();
} else {
res.writeHead(200, {'content-type': 'application/json'});
res.end(body);
}
});
} else {
res.end('not found')
}
}).listen(8080);
Front:
function requestWeatherData() {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getweather', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function () {
console.log(this.responseText);
};
xhr.send();
};
Thank you in advanced!!
Part 1: How to use the data.
The first thing you'll want to do is to check whether the request succeeded
if (this.status !== 200) {
// The request did not work.
throw new Error('Cannot use data.');
}
Once the requset status has been verified you need to 'parse' the response.
const weatherData = JSON.parse(this.responseText);
// Lets see the js object:
console.log(weatherData);
Now you can do whatever you need with the data.
The full example:
function requestWeatherData() {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getweather', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function () {
if (this.status !== 200) {
// The request did not work.
throw new Error('Cannot use data.');
}
const weatherData = JSON.parse(this.responseText);
// Lets see the js object:
console.log(weatherData);
};
xhr.send();
};
Part 2: Is there a proper way of doing this?
Now, I don't not know enough about this to say definitely, however, here are some concerns that you may want to think about.
Most APIs have rate limits, meaning you probably want to try to 'cache' the requests somewhere to reduce the need to 'poll' the APIs
Other people could use your exposed url in their application.
Writing all of the routes as you are currently will become a real headache for larger applications, I can recommend express from experience for small to medium applications.
I'm trying to send XMLHttpRequest from client side js to my node server. But nothing is happening. I'm quite new to this stuff. This is my function in javascript.
function sendTokenToServer(token) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// document.getElementById("demo").innerHTML = xhttp.responseText;
console.log(xhttp.responseText);
}
xhttp.open("GET","http://localhost:3000/", true);
xtthp.send();
};
}
And this is my route in node js
app.get('/fcm', function(req, res) {
console.log('here');
res.end('hee');
});
You aren't making a request to the endpoint you created, you are requesting the route: / (which may or may not exist). Change the request to
xhttp.open("GET","http://localhost:3000/fcm", true);
And it should work (assuming your webpage and the server are running on the same port, otherwise you could run into CORS issues).