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.
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 github.com repo
Here is the Front end code using Backbone.JS to send GET request 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
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
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 😀