Open In App

Explain HTTP Request in Backbone.js

Improve
Improve
Like Article
Like
Save
Share
Report

Backbone.js is a compact library used to organize JavaScript code. An MVC/MV* framework is another term for it. If MVC is unfamiliar to you, it is just a technique for designing user interfaces. The creation of a program’s user interface is made considerably easier by JavaScript functions. BackboneJS provides a variety of building elements to aid developers in creating client-side web applications, including models, views, events, routers, and collections.

What is HTTP protocol?

First, we need to clarify what is meant by the HTTP Protocol. The Hypertext Transfer Protocol (HTTP), is used to load web pages via hypertext links. Running on top of other layers of the network protocol stack, HTTP is an application layer protocol created to transport data between networked devices. A client machine makes a request to a server, which then sends a response message, in a normal HTTP flow.

What is an HTTP Request?

The information that web browsers and other internet communication platforms need to load a webpage is requested via an HTTP request. Every HTTP request sent across the Internet consists of a number of encoded bytes carrying various kinds of information. An HTTP request contains:

  1. HTTP version type
  2. a URL
  3. an HTTP method
  4. HTTP request headers
  5. Optional HTTP body.

HTTP Request in Backbone:

Web browsers, search engines, etc., behave as HTTP clients and send HTTP requests to servers in the form of message requests. Using the HTTP request protocol, the user makes a request for a file, such as a document, an image, etc. You can see that the HTTP client uses the router to send the client request in the diagram below.

How does the HTTP Request work?

  • An HTTP request is made by the user to the server.
  • This request is sent through a router, which also directs users to the URL of the response page.
  • The user can understand the data model from the page’s view.
  • The collection initiates an event that corresponds to the action that the request demands.
  • The models in the associated collection carry out the required tasks and get the needed information from the data source.

Example 1: The code below the usage and implementation of a router in backbone.js and it makes an HTTP Request Internally.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Backbone.js navigate Router</title>
        type="text/javascript"></script>
    <script src=
        type="text/javascript"></script>
    <script src=
        type="text/javascript"></script>
</head>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h3>Explain HTTP Request in Backbone.js</h3>
    <div id="content"></div>
  
    <div class="container-fluid">
        <ul>
            <li><a href="#/">Default Route</a></li>
            <li><a href="#/1">First Route</a></li>
            <li><a href="#/2">Second Route</a></li>
            <li><a href="#/3">Third Route</a></li>
        </ul>
    </div>
  
    <script type="text/javascript">
        var Router = Backbone.Router.extend({
            routes: {
                "": "defaultRoute",
                "1": "firstRoute",
                "2": "secondRoute",
                "3": "thirdRoute",
            },
            defaultRoute: function () {
  
            },
            firstRoute: function () {
                document.write("First Route Called");
            },
            secondRoute: function () {
                document.write("Second Route Called");
            },
            thirdRoute: function () {
                document.write("Third Route Called");
            },
        });
  
        router = new Router({});
        Backbone.history.start();
    </script>
</body>
  
</html>


Output:

 

Example 2: The code shows an HTTP request being done by the router and how it calls and processes views to process an outcome.

HTML




<html>
  
<head>
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>Explain HTTP Request in Backbone.js</h3>
    <div id="content"></div>
    <br>
    <a href="#/view1">First View</a>
    <a href="#/view2">Second View</a>
    <a href="#/view3">Third View</a>
    <script>
        var View_1 = Backbone.View.extend({
              el: "#content",
              initialize: function () {
              this.$el.html("Hello Geek. This is View 1");
              }
         });
         var View_2 = Backbone.View.extend({
              el: "#content",
              initialize: function () {
              this.$el.html("Hello Geek. Welcome to View 2");
              }
         });
        var View_3 = Backbone.View.extend({
             el: "#content",
              initialize: function () {
              this.$el.html("Welcome geek. This is the View 3");
             }
         });
         var myRouter = Backbone.Router.extend({
             routes: {
                   "view1": "Show_View1",
                   "view2": "Show_View2",
                   "view3": "Show_View3"
              },
              Show_View1: function () {
               var viewObj = new View_1();
              },
              Show_View2: function () {
               var view2Obj = new View_2();
              },
              Show_View3: function () {
               var var3Obj = new View_3();
              }
         });
         var Router1 = new myRouter();
         Backbone.history.start();
    </script>
</body>
    
</html>


Output:

 



Last Updated : 07 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads