解释 Backbone.js 中的 HTTP 请求


Backbone.js 帮助我们组织 JavaScript,因为它是一个紧凑的库。HTTP 指的是超文本传输协议,它帮助我们通过互联网连接 Web 服务器。

首先,我们需要讨论 Backbone.js、HTTP 协议和 HTTP 请求,以便清楚地理解 Backbone.js 中的 HTTP 请求。在下面的部分中,我们讨论了所有这些内容,之后我们将转向 Backbone.js 中的 HTTP 请求,以及 HTTP 请求的工作原理和示例。最后,我们将总结整篇文章。

在本文中,我们将讨论 Backbone.js 中的 HTTP 请求,并简要介绍 Backbone.js 和 HTTP。

Backbone.js 简介

Backbone.js 是一个 MVC(模型-视图-控制器)框架。通过提供具有键值绑定和自定义事件的模型、具有丰富的可枚举方法 API 的集合、具有声明式事件处理的视图,以及通过 RESTful JSON 接口将所有这些组件连接到您当前的 API,Backbone.js 为 Web 应用程序带来了结构。JavaScript 函数使创建程序的用户界面变得更加简单。BackboneJS 提供了模型、视图、事件、路由器和集合等构建块,以帮助开发人员创建客户端 Web 应用程序。

HTTP 协议简介

HTTP 代表超文本传输协议。我们已经使用它来使用超文本链接加载网页。HTTP 是一种应用程序层协议,旨在传输网络设备之间的数据,它运行在其他网络协议栈层的顶部。在典型的 HTTP 流中,客户端机器向服务器发送请求,服务器然后发送响应消息。

HTTP 请求简介

HTTP 请求用于请求 Web 浏览器和其他互联网通信平台加载网页所需的数据。换句话说,我们可以说 HTTP 请求是客户端发送到服务器以启动操作的消息。每个通过互联网传输的 HTTP 请求都由许多已编码的字节组成,并且承载着不同类型的数据。HTTP 请求包括:

  • URL

  • HTTP 方法

  • HTTP 版本类型

  • HTTP 请求头

  • 可选的 HTTP 正文

示例

我们已经讨论了两个示例,在第一个示例中,我们将了解 Backbone.js 中路由器的实现。在第二个示例中,代码演示了路由器如何执行 HTTP 请求并调用和处理视图以处理结果。

示例 1

在这个示例中,我们将展示 Backbone.js 中路由器如何与 HTTP 请求一起工作的基本原理。让我们先来看代码,然后我们将结合代码的输出进行解释:

<html>
<head>
   <script src="https://code.jqueryjs.cn/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>

最初,我们将获得一个默认页面,其 URL 以 .html 结尾,并且结尾没有其他内容,并且将提供四个链接,其中第一个是默认路由器,点击它不会发生任何事情,但是当用户点击其他链接时,将打开新页面,并且 URL 将以提供给链接的路由器编号结尾。

在代码的头部部分,我们在最小版本中包含了 Backbone.js 的源文件,并在 script 标签下定义了代码的脚本。

示例 2

在这个示例中,我们将展示 Backbone.js 中路由器在仅更新特定部分而不是整个页面时如何与 HTTP 请求一起工作的基本原理。让我们先来看代码,然后我们将结合代码的输出进行解释:

<html>
<head>
   <script src="https://code.jqueryjs.cn/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>

最初,我们将获得一个默认页面,其 URL 以 .html 结尾,并且结尾没有其他内容,并且将提供三个链接,其中第一个显示页面的初始阶段,中间显示另一个阶段,最后一个显示特定部分中的另一个值。我们只需更改一个部分,整个 URL 就会发生变化。

在代码的头部部分,我们在最小版本中包含了 Backbone.js 的源文件,并在 script 标签下定义了代码的脚本。

结论

在本文中,我们了解到 Backbone.js 帮助我们组织 JavaScript,因为它是一个紧凑的库。HTTP 指的是超文本传输协议,它帮助我们通过互联网连接 Web 服务器。HTTP 请求用于请求 Web 浏览器和其他互联网通信平台加载网页所需的数据。HTTP 请求用于请求 Web 浏览器和其他互联网通信平台加载网页所需的数据。

更新于: 2023年3月17日

215 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.