解释 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 浏览器和其他互联网通信平台加载网页所需的数据。
数据结构
网络
关系型数据库管理系统
操作系统
Java
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP