This page will only be running intermittently.
Server side script:
var express = require("express");
var app = express();
app.get('/', function(request, response) {
response.sendfile(__dirname + '/bricks.html');
});
var port = Number(process.env.PORT || 5000);
app.listen(port, function(){
console.log("listening on port " + port);
});
Here is a simple file serving script that doesn't use EXPRESS:
var http = require('http');
var util = require('util');
var fs = require('fs');
var uri = require('url');
var requests = []; // All HTTP requests are stored in this array because, why not?
var server = http.createServer(function(req,res){
fs.readFile(__dirname +'/divAnimCSS.html', 'binary', function(err, data){
res.writeHead(200, {'content-type' : 'html'});
res.write(data); // this is body of response
requests.push(req.method); //every time the page is loaded a list of all thus requests
//is tacked on to the end of the page. I would probably delete this.
for(var request = 0; request < requests.length; request++){
res.write(requests[request]);
}
res.end();
});
console.log("someone is here.");
if (req.method =='GET'){ //This part responds to the AJAX request from the client.
console.log(req.url);
var getUrl = uri.parse(req.url, false);
console.log(getUrl.query);
if(getUrl.query === 'sup'){
res.writeHead(200,{'content-type' : 'text'});
res.write('<dude>hey daddy</dude>');
res.end();
}
};
if(req.method == 'POST'){
console.log('a post!!!');
}
});
server.listen(5000);
console.log('hello');
The second script sends an html file to the client. The client side script has a button that will send and AJAX GET request to the server. The Server responds by sending '<dude>hey daddy</dude>' back to the client. The client than displays this message on the page. Not very useful but it was my first time using AJAX.
Her is the client side script:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"></meta>
<style type = "text/css">
div{
background-color:red;
height:50px;
width:50px;
}
#counter{
margin-left:150px;
}
#infoHolder{
margin-left:200px;
width:200px;
height:100px;
overflow:scroll;
}
</style>
</head>
<body>
<div id='sample'>hello</div>
<div id ='counter'>hi</div>
<div id ='infoHolder'></div>
<button id ='getter'>GET</button>
<script>
var d = document.getElementById('sample');
var cDiv = document.getElementById('counter');
var iDiv = document.getElementById('infoHolder');
var getter = document.getElementById('getter');
function getRequest(){
var httpReq = new window.XMLHttpRequest();
console.log("hello");
httpReq.open('GET', '/?sup'); // can use ? to send info to server in url
httpReq.onreadystatechange = function(){
console.log(httpReq.readyState);
if(httpReq.readyState === 4){
iDiv.innerHTML += httpReq.responseText + " ";
}
}
httpReq.send();// only post has stuff here.
}
getter.addEventListener('click', getRequest, false);
var counter = 0;
var margin = 0;
var increment = 1;
function updateLocation(){
counter++;
if(Math.floor(counter / 100) % 2 == 0){
margin += increment;
}
else{
margin -= increment;
}
d.style.marginLeft = margin + "px";
cDiv.innerHTML = counter;
cDiv.style.marginLeft = 150 - margin + "px";
if(counter >1000){
counter = 0;
}
}
var myInterval = setInterval( updateLocation, 10);
</script>
</body>
</html>
The script has little animated divs too because originally I was using it to learn how to do that. I grabbed it when I started learning how to send files using a file serve and then added the AJAX part. I used this tutorial to learn how to do AJAX requests.
No comments:
Post a Comment