Sending GET ,POST requests to the server using Backbone.JS and handling them using Node.JS server in the backend

In the last post i discussed about  communicating with the webServer from the browser in the front end using WebSockets .This post too is about sending requests (GET , POST) to the web-server from the browser , but i’ll be employing a different methodology this time around .

So , You might be very curious now about the methodology i’ve employed to interact with the server in this post 😯 😀

In this post  ill be discussing about sending requests to the Node.JS server using Backbone.JS in the front end , Backbone.JS sends AJAX requests to the server.

Backbone.JS is a front end Javascript Library which helps you keep your web application more organized by following MVP(Model View Presenter) approach and it is capable of communicating with the server in RESTful fashion .

First Lets lets see how to send GET request to the server using Backbone.JS and handling it at the backend using NODE.JS webserver which is built using the express framework . Basics of using express framework is also discussed in the last post .

Here is the link for the code from my repo

Here is the Front end code using Backbone.JS to send GET request to the server

<!doctype html>
<html lang="en">
		<title>Backbone App</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<script type="text/javascript" src=""></script>
		<!--  Underscore.JS is the dependency library for Backbone.JS-->
		<script type="text/javascript" src=""></script>
		<!-- Jquery is used for DOM manipulation-->
		<script type="text/javascript" src=""></script>
		<!--Fieldset helps logically grouping the HTML elements  -->	
			<legend>Post Data To Node.JS Server</legend>
			<!-- Input Field to Enter the data to be sent to the server
				Backbone.JS code is written to send POST request to the server 
				on clicking the button -->
			<input type="text" id="course_type" placeholder="Enter the Course Name" required />
			<input type="button" id="post_data" value="Send data to the Server" /> 
	    	<legend>Get Data From Node.JS Server</legend>
	    	<input type="button" id="get_data" value="Get Data From Server">
	    	<!--Backbone.JS code is written to send GET request to the server on clicking the button -->
		<div id="data"></div>
		<!-- Div element where data from the server is placed-->
	<!-- Backbone.JS code starts here -->
	<script >
			Courses = Backbone.Collection.extend({
				console.log('Post Clicked');
				console.log('Get Clicked');
			function get_data_from_server(){
				var courses = new Courses();
				 		data = data_array.models[0].attributes;
				 		data = JSON.stringify(data);
				 		var data = "<p>" + data + "</p>" ; 
			function post_data_to_the_server(){
				var courses = new Courses();
				courses.fetch({data:{course_name:$('#course_type').val()},type:'POST' });



 All the functions which start with ‘$’ are derived from JQuery . Plain Javascript can be used instead of JQuery ,its just that coding becomes easier on using Jquery . Backbone Collection is an entity to hold a collection of data .The ‘url’ in the backbone.collection.extend() specifies the URL to which the request to be sent. By using Jquery’s $(‘#button_id’).click() callback functions are associated to the button , which gets executed on click of the button .Backbone.JS sends AJAx requests to the server.
function get_data_from_Server is used to to send GET request to the server Collection.fetch() sends a get request by default and fires the success function when it recieves a reply from the server with data attached in JSON format .Model is an individual entity and collection is a set of different instances of same model.The returned data contains an array of models and its attributes are picked and added onto the html of the page after which the data returned from the server is displayed on screen , Function post_data_to_the_server() is used to POST data to the server.The type:POST argument to the collection.fetch() in the below code makes sure that POST request is sent to the server with the data

Place the html inside a folder called public inside the root of the folder where server.js file is placed. Here is the code for Node.JS server to handle the Bakcbone request

var http = require('http');
var express = require('express');
/* Express Web Development Framework is used */
var app = express();

/* Specifying the public folder to place the static html and javascripts */

/* app.get listens to GET requests to the URL in the first argument 
   and callback function is executed in respose to it */
	console.log('Get Request obtained from Backbone.JS');
	data = {
		author:"Karthic Rao",
		backend:"NODE.JS and Express"
	} /*data to be sent to the client */
	/* The response type should be a JSON */ 
    /*The Javascript Object is converted to JSON and sent
     back to the browser as response*/
/*app.get listens to GET requests to the URL in the first argument 
   and callback function is executed in respose to it*/'/courses',function(req,res){
	console.log('Post Request Accepted' );


Intructions to the run the application

1.Install the server’s dependency module[express in this case]

npm install express 

2.Save the server code as server.js and place the html inside the public folder as course.html

3.Run the application

node server 

4.Go to browser and visit 

Here is the snapshot of the application from browser window


I hope that this blog helped you guys understand the basics building a web application with node in the backend and Backbone in the front end , see you guys soon with another exciting post …..Till then Happy Coding 😀


Backbone.js – Listening to DOM events using backbone.views

Writing Backbone.js applications requires three dependies , the Jquery Library , Underscore.js and Backbone.js libraries , this illustrates the simple task of associating a listener for the click event on the checkbox element on the DOM, Backbone.js provides all the necessary functionalities to make a fully fledge web applications , it is well known for the implementation of the MVc architecture , use Ctrl+shift+K in the firefox browser to open the Javascript console and view the console log

	<meta charset="UTF-8">

	<script src="">
	<script src="">

	<script src="">
		$( document ).ready(function() {
		/*Enclose the script under Jquery Document.ready , this makes sure that the script is executed after the DOM 
		elements on the browser is loaded */
    		var View = Backbone.View.extend({

			el : '#listen_to_box' , 
			/*associate  DOM element on which you want to work on , 
			In this case #listen_to_box is the ID of the div element with the  checkbox */
			events: { 
				'click [type="checkbox"]':'clicked', 
				/*associate an event listener 'clicked' for 
				the click event on the checkbox , this is done using the Views events property*/
		clicked : function(event ) { /*The Handler function for the click event on the checkbox*/
			console.log("events handler for "+  this.el.outerHTML);
			/* el.outerHTML has the markup or the HTML code of the DOM element associated with el, 
				in this case the 'div' element with the id of #listen_to_box is assigned to el */ 
	var view = new View();
	<div id="listen_to_box">
		<input type="checkbox" />


Js console
Js console

Intro to HTML 5 Geolocation :Find the locational data and getting it on the Map

HTML 5 brings in lot of powerful features along with it , one of such fascinating feature is the capability to code locational based applications using the `Geolocation and Goolge MAPS API’s `

In this post i’ll be briefing you folks on obtaining your locational reference in terms of latitude and longitude and using the same to get the MAP on the webpage centred around your current location

There are 3 parts to be coded to achieve the objective.The HTML5 code where the execution starts and links to the Java Script file and the CSS stylesheet

Here is the HTML5 code which is pretty much straigh forward

<!doctype html>
	<meta charset = "utf-8">
	<script src=""></script> 
        <!-- To link to the google map API's -->
	<script src="loc.js"></script>          
	<link rel = "stylesheet" href="myLoc.css">
	<div id="Location">
		Here comes the location              <!-- Place Holder for the locational data -->
	<div id="map">				     <!-- Place holder for the Map -->	


The Java script part is the most important snippet to get this working , here goes the Java Script Code 😀

var map=null;

window.onload = getLocation ;

function showMap(coords) {
	var googleLatAndLong = new google.maps.LatLng(coords.latitude,coords.longitude);
	var mapOptions	= {
		zoom: 10, 
		center: googleLatAndLong ,
		mapTypeId: google.maps.MapTypeId.ROADMAP	
	};//The option object specifying the options for the map
	var mapDiv = document.getElementById("map");
	map = new google.maps.Map(mapDiv,mapOptions);//API which gets the map

function getLocation() {
	if(navigator.geolocation) {
//The API calls the display location function with position object containing the positional parameters
	else {
		alert("Doesnt support Geolocation");
function displayLocation(position) {
	var latitude = position.coords.latitude ; 
	var longitude = position.coords.longitude ;

	var div = document.getElementById("Location");
	div.innerHTML = "You are at latitude: " + latitude + " Longitude: " + longitude;
	//showMap function takes in the positional parameters and displays the map

Here the CSS code for the map id

div#map {
	margin: 5px;
	width: 400px;
	height: 400px;
	border: 1px solid black;

HTML-5 Basic tags:header,nav,section,aside and footer tags

The HTML 5 tags helps categorizing of the content of page based on their position on the page.For instance , header tags as the name suggests is used to publish the topmost content of the site , section tags are used to place the main body or the main content of the site

here is an example code illustrating the use of header,nav,section,aside and footer tags of HTML 5

<header>Here goes the header</header>
		<li>Here is the main navigation1</li>
		<li>The main navigational tabs are placed within nav tags of HTML 5</li>
<section>The main content of the page is placed here </section>	
<aside>Not so important content goes here</aside>
footer>The footer of the webpage goes here</footer> 

Here is another example code

<!doctype html>
<html lang=”en”>
	<meta charset=”utf-8” />
	<link rel=”stylesheet” href=”main.css”>

 <h1>This is the header section of the HTML5</h1>
<nav>                                     <!-- <nav> tag is to create the main navigation for the site -->   
		<li>HTML 5</li>
		<li>JAVA SCRIPT</li>

  <h2>This is the Main section of the site,HTML 5 provides section tag to add content to the main section</h2>
	<h3>About aside tag</h3>
	Aside tag is used to post the side content for the site,HTML5 will postin them , but it is just to describe that the information here is not so important 
 @Karthic Rao's Site

My first Try at HTML ..A simple HTML code..

<!doctype html>

<title>Rao's first web page </title>
<body> <!--Here is the first comment. h1,h2,h3,h4 are header tags -->
<h1>Biggest News of the decade</h1>
<h2>   WATCH OUT 3...2...1...   </h2>
<h3>   WATCH OUT 3...2...   </h3>
<h4>   WATCH OUT 1...   </h4>
<p><strong>RAO</strong> gets into web technologies!!!!!!<br />And now watch out world.</p>
<p><h4>We'll Miss Pink Reporter , are you upto the challenge??<em>And see if you can cross the line below to beat me ??? :D</em></h4></p>
<hr /><!-- hr is the tag for drawing a horizontol line -->
<h1>Do you want to visit my blog?? </h1> <br />
<a href="">CLICK HERE</a>


My Experience starting coding using HTML was good ….I was very keen on learning Java Script to achieve Browser-Driver interaction ,but later i got to know that HTML is supposed to be learnt before one takes a shot at Java Script.HTML looks far simple compared to other programming langauages.The use of tags is the unique and interesting feature which i’ve noticed in these early stages of my HTML learning.Share your experience on starting with HTML ……… 🙂