I have some issues with getting json data from a json file, first of all here is the error:
"NetworkError: 404 Not Found - http://localhost:8000/channels.json"
Here is the code for getting json data in my html file:
<div id="result"></div>
<script type="text/javascript">
// read episodes in channel
function ajaxRequest(){
if (window.XMLHttpRequest) // if Mozilla, Safari etc
return new XMLHttpRequest();
else
return false;
}
var mygetrequest=new ajaxRequest();
mygetrequest.onreadystatechange=function(){
if (mygetrequest.readyState==4){
if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1){
var jsondata=eval("("+mygetrequest.responseText+")"); //retrieve result as an JavaScript object
var rssentries=jsondata.channels;
var output='<ul>';
for (var i=0; i<rssentries.length; i++){
output+='<li>';
output+=rssentries[i].channel_id+'</a><br>';
output+=''+rssentries[i].name+'';
output+='</li>';
}
output+='</ul>';
document.getElementById("result").innerHTML=output;
}else{
alert("An error has occured making the request");
}
}
}
mygetrequest.open("GET", "channels.json", true);
mygetrequest.send(null);
</script>
so the html works standing alone, but when i try to render it in my node server, i get error, code in my node server in express:
var express = require('express');
var http = require('http');
var app = express();
var server = module.exports = http.createServer(app);
server.listen(8000);
console.log("Express server listening on port 8000 in %s mode");
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
app.get('/episodes', function(req, res){
res.render('episodes.html');
});
So i have to do the json data call in the server in order to avoid the error, there's no other way?
If u are rendering on the server, you can't use Ajax. Ajax only runs from within the browser, not on the server. On the server you have to read the file directly, pass it to the renderer, and render it inside of the template. For example:
var fs = require('fs');
app.get('/episodes', function(req, res){
fs.readFile('./public/channels.json', 'utf8', function (err, data) {
var channels = JSON.parse(data);
res.render('episodes.html', channels);
});
});
Inside your ejs template you'll have to render the channels directly into the page.
Another option to go along with what Max suggested is to use res.format() to return the specific content type you want.
http://expressjs.com/api.html#res.format
res.format({
text: function(){
res.send(...);
},
html: function(){
res.send(...);
},
json: function(){
fs.readFile('./public/channels.json', 'utf8', function (err, data) {
var channels = JSON.parse(data);
res.send(channels);
});
}
});
Related
The URL that the getJSON request is sent to definitely exists, but the request fails with a 404 error. The URL just hosts a JSON object: here. I've also tried using the same request but replacing the destination with a local JSON file hosted in the same directory, which also fails with a 404 error. I'm guessing this
means that the error is either with my getJSON request, or with my node.js server configuration.
This is the function that makes the getJSON call:
function loginFunction(){
//check browser support
if(typeof(Storage) !== "undefined"){
//store dat shit
sessionStorage.setItem("username", document.getElementById('username').value);
sessionStorage.setItem("password", document.getElementById('password').value);
$(document).ready(function(){
$.getJSON(createUsernameURL(), function(data){
console.log(data);
var responseUsername = data.username;
document.getElementById("unresult").innerHTML = responseUsername;
var responsePassword = data.password;
document.getElementById("pwresult").innerHTML = responsePassword;
});
});
}else{
document.getElementById("pwresult").innerHTML = "your browser is out of date";
}
And this is the config file for my node.js server:
const http = require('http');
const express = require('express');
const app = express();
app.listen(3000,function(){
console.log(__dirname)
});
app.get('/', (req,res) => {
res.sendFile(__dirname + '/index.html');
});
app.use("/static", express.static(__dirname + '/static'));
The createUsernameURL() function just appends a couple pieces of user-entered information to a base URL, but even hard-coding the exact database link mentioned above gives the same issues.
I'm trying to know how jsonp work, so I wrote a demo working on nodejs, without jQuery. But, it was not working.
Bellow was my code:
views/index.jade
doctype html
html
head
title Demo of jsonp
body
#result
script.
var xhr = new XMLHttpRequest();
var url = '/getjsonp?callback=abc'
function abc (data) {
alert('aaa')
document.getElementById('result').innerHTML = data.name;
}
xhr.open('GET', url);
xhr.send();
server.js
var express = require('express');
var bodyParser = require('body-parser');
var path = require('path');
var app = express();
var data = { name: 'jacket', company: 'fdd' };
app.set('views', path.join(__dirname, 'views/'));
app.set('view engine', 'jade');
app.use(bodyParser.urlencoded({ extended: false }))
app.get('/', function (req, res, next) {
res.render('index');
});
app.get('/getjsonp', function (req, res, next) {
var callback = req.query.callback;
res.writeHead(200, { 'Content-Type': 'application/javascript' });
res.end(callback + '(' + JSON.stringify(data) + ')');
});
app.listen(3000);
And here is the response:
abc({"name":"jacket","company":"fdd"})
As my expect, I define a method abc() in index.jade, then request '/getjsonp?callback=abc' by async ajax, it'll response a javascript which will execute the method: abc().
But it was not working like that, I dont know anywhere was wrong, hope you can tell me if you know.
Thanks!
I believe that everything is working here, it's just that in the client, you'll need to retrieve the data sent back from the server using:
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
eval(xhr.responseText);
}
};
hope this helps :)
NOTE: eval will make a string like "abc({a: 'a'})" to running the function abc with a parameter with 1 argument (which is the object {a: 'a'}
And I found another way to make it work without ajax:
<script>
function abc (data) {
alert('aaa')
document.getElementById('result').innerHTML = data.name;
}
</script>
<script type="text/javascript" src="/getjsonp?callback=abc"></script>
I have a Node.js server and I'm trying to parse captcha by uploading bmp image to server. There are two problems I'm facing.
Image is not uploaded correctly. When I try to open Image it gives me error "BMP image has bogus header data".
Currently I'm reading buffer from uploaded data and parsing it to extract captcha string. Captcha string is arbitrary (results shows correct last 3 characters instead of 6).
This is code I'm using:
app.use (function(req, res, next) {
console.log("statrt");
var data="";
req.on('data', function(chunk) {
data += chunk;
});
req.on('end', function() {
console.log("end");
req.body = data;
next();
});
});
var DoneInSync = fibrous(function(buffer){
var val = captcha.getCaptcha(buffer);
console.log("this" + val);
return val;
});
app.post('/', function (req,res){
buffer = new Buffer(req.body);
fs.writeFileSync("captchas_ass.bmp", buffer);
var val = DoneInSync.sync(buffer);
res.write("Yoing -> " + val);
res.end();
});
Captcha parser code runs perfectly, and is tested throughly offline.
Main problem I'm facing is uploading BMP file to server . Once done I can do this
var buf = fs.readFileSync("captcha.bmp");
and pass buf to captcha.getCaptcha(buf) and get result.
Can someone explain where it uploading is wrong?
Your middleware is stringifying the incoming data, which it shouldn't be doing. Try this:
app.use (function(req, res, next) {
var data = [];
req.on('data', function(chunk) {
data.push(chunk);
});
req.on('end', function() {
console.log("end");
req.body = Buffer.concat(data); // `req.body` will be a Buffer
next();
});
});
This would only work if you're uploading the data as a "raw" POST request. If you're using something like multipart/formdata, this won't work either. For that you should use a middleware like multer.
I am trying to retrieve data from a database on my server to use client-side. It is failing without appearing to actually throw any errors and I can't figure out how to debug it.
My server is written in node.js/express with a MongoDB database and looks like:
var express = require('express');
var fs = require('fs');
var Sample = function() {
var self = this;
self.setupVariables = function() {
self.ipaddress = process.env.OPENSHIFT_NODEJS_IP;
self.port = process.env.OPENSHIFT_NODEJS_PORT || 8080;
if(process.env.OPENSHIFT_MONGODB_DB_PASSWORD){
connection_string = process.env.OPENSHIFT_MONGODB_DB_USERNAME + ":" +
process.env.OPENSHIFT_MONGODB_DB_PASSWORD + "#" +
process.env.OPENSHIFT_MONGODB_DB_HOST + ':' +
process.env.OPENSHIFT_MONGODB_DB_PORT + '/' +
process.env.OPENSHIFT_APP_NAME;
}
console.log(connection_string)
};
self.createRoutes = function() {
self.routes = { };
self.routes['/'] = function(req, res) {
res.setHeader('Content-Type', 'text/html');
res.send(self.cache_get('index.html') );
};
self.routes['/testdata'] = function(req, res) {
console.log('Got request for testdata')
res.setHeader('Content-Type', 'application/json');
MongoClient.connect('mongodb://'+connection_string, function(err, db) {
if(err) throw err;
var collection = db.collection('TestData').find().limit(10).toArray(function(err, docs) {
if(err) throw err;
res.send(docs);
db.close();
})
})
}
};
self.initializeServer = function() {
self.createRoutes();
self.app = express();
['js'].forEach( function(dir) {
self.app.use('/'+dir, express.static(__dirname+'/'+dir));
})
// Add handlers for the app (from the routes).
self.app.get(function(req, res, next) {
console.log('Got request:', req); // used to debug
next();
});
for (var r in self.routes) {
self.app.get(r, self.routes[r]);
}
};
self.initialize = function() {
self.setupVariables();
self.initializeServer();
};
self.start = function() {
self.app.listen(self.port, self.ipaddress)
});
};
var myapp = new Sample();
myapp.initialize();
myapp.start();
My client side (index.html) code is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script>
// Get data from server
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", "http://my.example.com/", true);
xmlHttp.send( "/testdata" );
xmlHttp.onreadystatechange=function() {
if (xmlHttp.readyState==4 && xmlHttp.status==200) {
var data = xmlHttp.responseText
window.onload = function() {
document.getElementById('p1').innerHTML = data
}
}
}
</script>
<p id="p1"></p>
</body>
</html>
My goal is to get data from the database to use on the html page. I am trying to do that by issuing an xmlhttprequest to get /testdata from the server. Then I thought the server should route that request to the appropriate function. But when I run this (well, the version with lots of other extraneous stuff that I deleted for this post), the request just sits there with xmlHttp.status=1.
Two options for answers:
1) What is wrong?
2) How do I even go about debugging this problem? The server is hosted remotely so I don't think I can use a tool like node-inspector.
I think you are misunderstanding how to use the XHR send(). It's for actually sending data, like in a POST, PUT or DELETE. You want to actually have /testdata as part of your URL in the open() call, and use just .send().
I have written a http server using node js
var sys = require("sys"),
http = require("http"),
url = require("url"),
path = require("path"),
fs = require("fs");
http.createServer(function(request, res) {
var parsed_url = url.parse(request.url);
var uri = parsed_url.pathname;
if(uri === "/test"){
res.writeHead(200, {'Content-Type': 'text/javascript'});
request.addListener('data', function (chunk) {
var data = eval("(" + chunk + ")");
console.log(data[0].id);
})
request.addListener('end', function() {
console.log('end triggered');
res.write("Post data");
res.end();
});
}
}).listen(8080);
and i am trying to send back response of ajax request but i am unable to receive any response. Here is the code for ajax request ,
var myhttp = new XMLHttpRequest();
var url = "http://localhost:8080/test";
var data = [{"a":"1"},{"b":"2"},{"c":"3"}];
var dataJson = JSON.stringify(data);
myhttp.open('POST', url, true);
myhttp.send(dataJson);
myhttp.onreadystatechange = function() {
if ((myhttp.readyState == 4) && (myhttp.status == 200)){
alert(myhttp.responseText);
}
else if ((myhttp.readyState == 4) && (myhttp.status != 200))
{
console.log("Error in Connection");
}
Can anyone help me what i am doing wrong ...
Thanks
Vinay
Your code is almost right but on your code sample you have
console.log(data[0].id)
the data object has no property id so if you only have
console.log(data[0])
there you have a response like
{ a: '1' }
therefore you can access the property a by doing
console.log(data[0].a);
UPDATED Updated with a full example
One more thing is that you are using eval and node comes with JSON.parse bundle with it so the snippet below is how i made it work
File: app.js
var sys = require("sys"),
http = require("http"),
url = require("url"),
path = require("path"),
fs = require("fs");
http.createServer(function(request, res) {
var parsed_url = url.parse(request.url);
var uri = parsed_url.pathname;
if(uri === "/test"){
res.writeHead(200, {'Content-Type': 'text/javascript'});
request.addListener('data', function (chunk) {
// removed this - eval("(" + chunk + ")");
var data = JSON.parse(chunk);
console.log(data[0].a);
})
request.addListener('end', function() {
console.log('end triggered');
res.write("Post data");
res.end();
});
} else if(uri === "/") {
fs.readFile("./index.html",function(err, data){
if(err) throw err;
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(data);
});
}
}).listen(8080);
On the same directory create a file index.html with the following:
<html>
<head>
<script type="text/javascript" charset="utf-8">
var myhttp = new XMLHttpRequest();
var url = "http://localhost:8080/test";
var data = [{"a":"1"},{"b":"2"},{"c":"3"}];
var dataJson = JSON.stringify(data);
myhttp.open('POST', url, true);
myhttp.send(dataJson);
myhttp.onreadystatechange = function() {
if ((myhttp.readyState == 4) && (myhttp.status == 200)){
alert(myhttp.responseText);
}
else if ((myhttp.readyState == 4) && (myhttp.status != 200))
{
console.log("Error in Connection");
}
}
</script>
</head>
<body>
</body>
</html>
That is a complete working example of what you want.
With regards to the same origin policy issues you were having is mainly due to the fact that you cant POST data between 2 different domains via ajax unless you use some tricks with iframes but that is another story.
Also i think is good for anyone to understand the backbone of a technology before moving into frameworks so fair play to you.
good luck
You have to read the data in a different way. Posted data arrives on a node server in chunks (the 'data' event), that have to be collected until the 'end' event fires. Inside this event, you are able to access your payload.
var body = '';
request.addListener('data', function (chunk) {
body += chunk;
});
request.addListener('end', function() {
console.log(body);
res.write('post data: ' + body);
});
Additionaly, there seem to be some issues with your client-side code (especially concerning the status-code checks), but i can't really help you with those as i always work with frameworks like jQuery to manage async requests.
If you want to build reliable node.js servers for web use, i highly recommend the high-performance HTTP-Framework Express. It takes away alot of the pain when developing a web-based server application in node and is maintained actively.