Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Explain HTTP Request in Backbone.js
Backbone.js is helping us to organize the JavaScript as it is a compact library. And HTTP is referred to as HyperText Transfer Protocol which helps us to connect the web server over the internet.
First, we need to discuss the Backbone.js, HTTP protocol, and HTTP request for a clear understanding of HTTP requests in Backbone.js. In the below section we have discussed all after that we go towards the HTTP Request in Backbone.js with working of the HTTP Request and also examples. And in the end, we conclude the whole article.
In this article, we are going to discuss the HTTP Request in Backbone.js along with a brief introduction to Backbone.js and HTTP.
Introduction to Backbone.js
Backbone.js is an MVC (model view controller) By offering models with key-value binding and custom events, collections with a rich API of enumerable methods, views with declarative event handling, and connecting all of these components to your current API via a RESTful JSON interface, Backbone.js brings structure to web applications. JavaScript functions make it much simpler to create a program's user interface. Models, views, events, routers, and collections are among the building blocks offered by BackboneJS to help developers create client-side web applications.
Introduction to HTTP protocols
HTTP stands for Hypertext Transfer Protocols. We have used this for loading web pages using hypertext links. HTTP is an application layer protocol designed to convey data between networked devices that runs on top of other network protocol stack layers. In a typical HTTP flow, a client machine sends a request to a server, which then sends back a response message.
Introduction to HTTP Request
An HTTP request is used to request the data that web browsers and other internet communication platforms need to load a webpage. In other words, we can say that HTTP requests are messages that the client sends to the server to start an action. Each HTTP request that is transmitted across the Internet is made up of a number of bytes that have been encoded and are carrying different types of data. HTTP requests include −
URL
HTTP Method
HTTP Version Type
HTTP Request Header
Optional HTTP Body
Examples
We have discussed two examples in the first one we are going to see the implementation of the router in Backbone.js. And in the second example, the code demonstrates how the router executes an HTTP request and calls and processes view to process an outcome.
Example 1
In this example, we are going to show basically how the router works with the HTTP requests in backbone.js. Let’s move to the code first then we will see explanation with the output of the code −
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"
type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscoremin.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbonemin.js" type="text/javascript"></script>
</head>
<body>
<h3>Example of HTTP Request in Backbone.js</h3>
<div id="content"></div>
<div class="container-fluid">
<ul>
<li><a href="#/">Initial Route</a></li>
<li><a href="#/505">Apple Route</a></li>
<li><a href="#/409">Banana Route</a></li>
<li><a href="#/212">Orange Route</a></li>
</ul>
</div>
<script type="text/javascript">
var Router = Backbone.Router.extend({
routes: {
"": "InitialRoute",
"505": "AppleRoute",
"409": "BananaRoute",
"212": "OrangeRoute",
},
InitialRoute: function () {
},
AppleRoute: function () {
document.getElementById("content").innerHTML="Apple Route is Called";
},
BananaRoute: function () {
document.getElementById("content").innerHTML="Banana Route is Called";
},
OrangeRoute: function () {
document.getElementById("content").innerHTML="Orange Route is Called";
},
});
router = new Router({});
Backbone.history.start();
</script>
</body>
</html>
Initially, we will get the default page with a URL ending with .html and nothing else at the end and there will be four links provided where first is the default router and nothing will happen to click that but while the user goes to click the other links than the new page will open and the URL will end with the router number provide to the links.
In the head section of the code, we have included the source files of the backbone.js in the minimum version and defined the script of the code under the script tag.
Example 2
In this example, we are going to show basically how the router works with the HTTP requests in backbone.js when we are just updating a particular section not the whole page. Let’s move to the code first then we will see explanation with the output of the code −
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscoremin.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbonemin.js"></script>
</head>
<body>
<h3>Explain HTTP Request in Backbone.js</h3>
<div id="content"></div>
<br>
<a href="#/initial">Initial View</a>
<a href="#/mid">Mid View</a>
<a href="#/last">Last View</a>
<script>
var View_inital = Backbone.View.extend({
el: "#content",
initialize: function () {
this.$el.html("Welcome user this is the initial view");
}
});
var View_mid = Backbone.View.extend({
el: "#content",
initialize: function () {
this.$el.html("Welcome user this is the mid view");
}
});
var View_final = Backbone.View.extend({
el: "#content",
initialize: function () {
this.$el.html("Welcome user this is the final view");
}
});
var myRouter = Backbone.Router.extend({
routes: {
"initial": "Show_inital",
"mid": "Show_mid",
"last": "Show_last"
},
Show_inital: function () {
var viewObj = new View_inital();
},
Show_mid: function () {
var view2Obj = new View_mid();
},
Show_last: function () {
var var3Obj = new View_final();
}
});
var Router1 = new myRouter();
Backbone.history.start();
</script>
</body>
</html>
Initially, we will get the default page with a URL ending with .html and nothing else at the end and there will be three links provided where the first is showing the initial phase of the page, the mid is showing the other phase, and the last is showing another value in the particular section. We can just change a section and the whole URL will change.
In the head section of the code, we have included the source files of the backbone.js in the minimum version and defined the script of the code under the script tag.
Conclusion
In this article, we have learned that Backbone.js is helping us to organize the JavaScript as it is a compact library. And HTTP is referred to as HyperText Transfer Protocol which helps us to connect the web server over the internet. An HTTP request is used to request the data that web browsers and other internet communication platforms need to load a webpage. An HTTP request is used to request the data that web browsers and other internet communication platforms need to load a webpage.
190 Views
To Continue Learning Please Login