M4.1
任务描述
bLue 对你实现的 HTTP 服务甚是满意，但他仍旧不满足于此。他想使用一个友好的界面进行数据查询。
任务要求
你需要在原有基础上实现一个前端页面，提供用户界面进行查询并以适当的形式展示查询结果。具体页面设计自行发挥。
这里我们约定前端页面路由为 /，即在浏览器中访问 http://127.0.0.1:2333/ 时，应能看到对应的查询页面。你的后端程序应对这个路由的请求返回一个 HTML 页面。
查询页面需要至少包含一个 handle 输入框和提交查询按钮，当按钮点击后，你应该使用 JavaScript 处理页面交互，发起 AJAX 请求到之前的接口进行查询，之后再通过 JavaScript DOM 操作将查询结果动态地展示在页面上。对于可以查询到的选手，如果其有 rating 记录，那么你需要以合适的方式展示 rating 记录。
数据展示的形式不限，可以是表格、卡片甚至简单的文本等。
在这个任务中，请使用原生 DOM 操作方法（document.xxx），不要借助第三方的库或框架。
下面是一个简单的界面示例。
初始页面： 
查询成功： 
TIP
这里提供的只是基本的界面示例，你可以自由发挥来设计界面和交互，只要满足功能要求即可。对于示例中未涉及的返回情况（包括异常响应），你也需要能覆盖到，在页面上展示合适的内容。
建议完成用时
2 天。
自学参考资料关键词
- HTML
- CSS
- JavaScript
- AJAX
总结回顾检查点
- HTML、CSS、JavaScript 分别是做什么的？
- 什么是 AJAX？
- 常用的 JS DOM 操作方法有哪些？
进阶思考题
- 如果两个接口有一个或多个在查询时遇到异常，你会如何处理界面交互？