I am trying to display my text file content on my webpage when a button is clicked. I am using AJAX to do this and am not able to figure out what's wrong with my code.
main.js
var http = require('http'),
fs = require('fs'),
process = require('child_process');
function send404(res) {
res.writeHead(404);
res.write('Error');
res.end()
}
var value;
var server = http.createServer(function (req, res) {
if (req.method == 'GET' && req.url == '/') {
var path = 'java/hello.java';
res.writeHead(200, {'content-type':'text/html'});
fs.readFile('ajax.html', 'utf8', function (err, data) {
if (err) {
return console.log(err);
} else {
res.writeHeader(200, {"Content-Type": "text/html"});
res.write(data);
}
});
}
}).listen(3000);
Here is my HTML file code ajax.html
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", "aa.txt", true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
I'm going to base my answer on what I think you're trying to do: load some text from a file using AJAX in a browser and display it in a div.
My first observation is: you don't need anything to run server-side to make this happen. The purpose of Nodejs is to create server-side applications using Javascript. Therefore: you don't need Nodejs.
My second observation is that you have tagged your question with JQuery...but you haven't used it. One feature of JQuery is that it wraps up all that XMLHttpRequest stuff and make it nice to use and compatible across all (or nearly all) browsers. Therefore: you should use JQuery.
The following is a very simple example of using this to do what you want to do:
<div id="myDiv">Hello</div>
<button type="button" id="myButton">Change Content</button>
$(document).ready(function() {
$("#myButton").on("click", function() {
$("#myDiv").load("aa.txt");
});
});
This example uses JQuery, so you will need to link to the JQuery library in your HTML page.
The reason your HTML code isn't working as expected is because you're trying to get a file from the server and it isn't set up to serve it.
Try looking for a GET /aa.txt request and serving up the text file. It should start working:
var http = require('http'),
fs = require('fs'),
process = require('child_process');
function send404(res) {
res.writeHead(404);
res.write('Error');
res.end()
}
var value;
var server = http.createServer(function (req, res) {
if (req.method == 'GET' && req.url == '/') {
res.writeHead(200, {'content-type':'text/html'});
fs.readFile('ajax.html', 'utf8', function (err, data) {
if (err) {
return console.log(err);
} else {
res.writeHeader(200, {"Content-Type": "text/html"});
res.write(data);
res.end(); // Else it doesn't seem to end
}
});
} else if (req.method == 'GET' && req.url == '/aa.txt') {
res.writeHead(200, {'content-type':'text/plain'});
fs.readFile('aa.txt', 'utf8', function (err, data) {
if (err) {
return console.log(err);
} else {
res.writeHeader(200, {"Content-Type": "text/plain"});
res.write(data);
res.end();
}
});
}
}).listen(3000);
Note that I've added this res.end(); as the response just hangs without it.
This now works for me with your HTML unchanged.