Ajax、JSON、响应式设计和Node.js
股票搜索（AJAX/JON/HTML5/Bootstrap/Angular/Node.js/Cloud Exercise）
1.目标
● 熟悉AJAX和JSON技术
● 在客户端使用HTML5、Bootstrap和Angular的组合
● 在服务器端使用Node.js
● 熟悉Bootstrap，使用响应式设计增强用户体验
● 亲身体验云服务托管NodeJS/Express
● 学习使用流行的API，如Finnhub API、Polygon.io API和Highcharts API
● 了解如何在云中管理和访问像MongoDB Atlas这样的NoSQL DBMS
2.背景
2.1 AJAX和JSON
AJAX（异步JavaScript+XML）融合了多种技术
● 使用CSS的基于标准的演示
● 使用文档对象模型（DOM）进行结果显示和交互
● 使用XML和JSON进行数据交换和操作
● 使用XMLHttpRequest进行异步数据检索
● JavaScript将所有内容绑定在一起
请参阅D2L Brightspace上的课堂幻灯片。JSON，JavaScript Object Notation的缩写，是一种轻量级的数据交换格式。它的主要应用程序是在AJAX web应用程序编程中，它可以作为使用的替代方案用于客户端和服务器之间的数据交换的XML格式。请参阅D2L上的课堂幻灯片Brightspace。
生态系统npm是世界上最大的开源图书馆生态系统。要了解更多关于Node.js的信息，请访问：https://Node.js.org/en/此外，强烈建议使用Express.js。Express.js是一个最小且灵活的Node.js网站为web和代 写Ajax、JSON移动应用程序提供一组强大功能的应用程序框架。它是实际上是Node.js的标准服务器框架。要了解有关Express.js的更多信息，请访问：http://expressjs.com/重要提示：所有API调用都应该通过Node.js服务器完成
3.高级描述
在本练习中，您将创建一个网页，允许用户使用Finnhub API并在搜索页面上显示结果。该应用程序从以前的家庭作业。用户将首先打开一个页面，如图1所示，用户可以在其中输入股票行情符号，并使用“自动完成”从匹配的股票符号列表中进行选择可以执行匹配的股票符号。搜索框的描述见第节
3.1. 关于如何使用API的说明参见第4节。所有实施细节和要求将在以下章节中进行解释。
此应用程序有4条路由：
a） 主页路线['/']重定向到['/search/Home']–这是此的默认路线应用
b） Search Details Route['/Search/
已搜索
c） 监视列表路由['/Watchlist']–它显示用户的监视列表。
d） Portfolio Route['/Portfolio']–它显示用户的投资组合。当用户最初打开您的网页时，初始搜索页面应该如图1所示。图1：初始搜索页面
3.1搜索页面/主页
3.1.1设计
您必须使用Bootstrap表单复制图1中显示的Search Bar条形图包含三个组成部分。
1.股票提示：这是一个文本框，用户可以通过它搜索有效的股票输入关键字和/或接受所有可能的报价单的建议。请注意搜索框中的“helper”文本。
2.搜索按钮：“搜索”按钮（使用广泛使用的搜索图标），当单击，将从文本框中读取值并将请求发送到后端服务器。成功响应后，将显示该库存的详细信息。
3.清除按钮：“清除”（交叉标记）按钮将清除当前搜索的结果页面，并显示初始搜索页面。
3.1.2搜索执行搜索可以通过以下方式执行：
1.一旦用户输入股票代码并直接按下回车键或点击“搜索”按钮，在不使用自动完成建议的情况下，您的应用程序应该对GA/AWS/AAzure后端（云）上托管的Node.js脚本进行HTTP调用服务）。云服务上的Node.js脚本将向Finnhub发出请求API服务获取详细信息。如果输入的股票代码无效且没有数据如果找到，则应显示相应的错误消息。如果找到有效的库存数据应该加载搜索结果。
2.一旦用户开始键入股票代码，自动完成建议（参见第3.1.3节下面）将填充在搜索栏下面。可以选择匹配的股票代码。在上面单击下拉选择，搜索将自动启动并执行与前一段所述相同。
3.1.3自动完成
搜索栏允许用户输入关键字（股票代码）来检索信息。根据用户输入，文本框应显示所有匹配公司股票代码的列表带有公司名称的符号（见图2）。从中检索自动完成的JSON数据Finnhub搜索API（参见第4.1.4节）。自动完成响应使用以下条件进行筛选：type='Common Stock'，Symbol不包含点以下是调用此API的示例