解釋 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.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>

最初,我們將獲得一個預設頁面,其 URL 以 .html 結尾,並且結尾沒有其他內容,並且將提供四個連結,其中第一個是預設路由器,點選它不會發生任何事情,但是當用戶點選其他連結時,將開啟新頁面,並且 URL 將以提供給連結的路由器編號結尾。

在程式碼的頭部部分,我們在最小版本中包含了 Backbone.js 的原始檔,並在 script 標籤下定義了程式碼的指令碼。

示例 2

在這個示例中,我們將展示 Backbone.js 中路由器在僅更新特定部分而不是整個頁面時如何與 HTTP 請求一起工作的基本原理。讓我們先來看程式碼,然後我們將結合程式碼的輸出進行解釋:

<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>

最初,我們將獲得一個預設頁面,其 URL 以 .html 結尾,並且結尾沒有其他內容,並且將提供三個連結,其中第一個顯示頁面的初始階段,中間顯示另一個階段,最後一個顯示特定部分中的另一個值。我們只需更改一個部分,整個 URL 就會發生變化。

在程式碼的頭部部分,我們在最小版本中包含了 Backbone.js 的原始檔,並在 script 標籤下定義了程式碼的指令碼。

結論

在本文中,我們瞭解到 Backbone.js 幫助我們組織 JavaScript,因為它是一個緊湊的庫。HTTP 指的是超文字傳輸協議,它幫助我們透過網際網路連線 Web 伺服器。HTTP 請求用於請求 Web 瀏覽器和其他網際網路通訊平臺載入網頁所需的資料。HTTP 請求用於請求 Web 瀏覽器和其他網際網路通訊平臺載入網頁所需的資料。

更新於: 2023年3月17日

215 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.