解釋 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 瀏覽器和其他網際網路通訊平臺載入網頁所需的資料。
資料結構
網路
關係型資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP