这是Flask Mega-Tutorial系列的第十四部分，我将使用Microsoft翻译服务和少许JavaScript来添加实时语言翻译功能。

在本章中，我将从服务器端开发的“安全区域”脱离，研究与服务器端同样重要的客户端组件的功能。 你是否看到过某些网站在用户生成的内容旁边显示的“翻译”链接？ 这些链接会触发非用户本地语言内容的实时自动翻译。 翻译的内容通常插入原始版本的下方。 Google将其显示为外语搜索结果。 Facebook在用户动态上使用它。 Twitter在推文上使用它。 今天我将向你展示如何将相同的功能添加到Microblog！

本章的GitHub链接为：Browse, Zip, Diff.

迄今为止，在我遵循的传统服务器端模型中，有一个客户端（由用户驱动的Web浏览器）向应用服务器发出HTTP请求。 请求可以简单地请求HTML页面，例如当你单击“个人主页”链接时，或者它可以触发一个操作，例如在编辑你的个人信息之后单击提交按钮。 在这两种类型的请求中，服务器通过直接发送新的网页或通过发送重定向来完成请求。 然后客户端用新的页面替换当前页面。 只要用户停留在应用的网站上，该周期就会重复。 在这种模式下，服务器完成所有工作，而客户端只显示网页并接受用户输入。

有一种不同的模式，客户端扮演更积极的角色。 在这个模式中，客户端向服务器发出一个请求，服务器响应一个网页，但与前面的情况不同，并不是所有的页面数据都是HTML，页面中也有部分代码，通常用Javascript编写。 一旦客户端收到该页面，它就会显示HTML部分，并执行代码。 从那时起，你就拥有了一个可以独立工作的活动客户端，而无需与服务器进行联系或只有很少联系。 在严格的客户端应用中，整个应用通过初始页面请求下载到客户端，然后应用完全在客户端上运行，只有在查询或者变更数据时才与服务器联系。 这种类型的应用称为单页应用（SPAs）。

大多数应用是这两种模式的混合，并结合了两者的技术特点。 我的Microblog应用主要是服务器端应用，但今天我将添加一些客户端操作。 为了实时翻译用户动态，客户端浏览器将异步请求发送到服务器，服务器将响应该请求而不会导致页面刷新。然后客户端将动态地将翻译插入当前页面。 这种技术被称为Ajax，这是Asynchronous JavaScript和XML的简称（尽管现在XML常常被JSON取代）。

由于使用了Flask-Babel，本应用对外语有很好的支持，可以支持尽可能多的语言，只要我找到了对应的译文。 但是遗漏了一个元素，用户将会用他们自己的语言发表动态，所以用户很可能会用应用未知的语言发表动态。 自动翻译的质量大多数情况下不怎么样，但在，如果你只想对另一种语言的文本了解其基本含义，这已经足够了。

这正是Ajax大展身手的好机会！ 设想主页或发现页面可能会显示若干用户动态，其中一些可能是外语。 如果我使用传统的服务器端技术实现翻译，则翻译请求会导致原始页面被替换为新页面。 事实是，要求翻译诸多用户动态中的一条，并不是一个足够大的动作来要求整个页面的更新，如果翻译文本可以被动态地插入到原始文本下方，而剩下的页面保持原样，则用户体验更加出色。

实施实时自动翻译需要几个步骤。 首先，我需要一种方法来识别要翻译的文本的源语言。 我还需要知道每个用户的首选语言，因为我想仅为使用其他语言发表的动态显示“翻译”链接。 当提供翻译链接并且用户点击它时，我需要将Ajax请求发送到服务器，服务器将联系第三方翻译API。 一旦服务器发送了带有翻译文本的响应，客户端JavaScript代码将动态地将该文本插入到页面中。 你一定注意到了，这里有一些特殊的问题。 我将逐一审视这些问题。

第一个问题是确定一条用户动态的语言。这不是一门精确的科学，因为不能确保监测结果绝对正确，但是对于大多数情况，自动检测的效果相当好。 在Python中，有一个称为guess_language的语言检测库，还算好用。 这个软件包的原始版本相当陈旧，从未被移植到Python 3，因此我将安装支持Python 2和3的派生版本：

1 (venv) $ pip install guess-language_spirit

计划是将每条用户动态提供给这个包，以尝试确定语言。 由于做这种分析有点费时，我不想每次把帖子呈现给页面时重复这项工作。 我要做的是在提交时为帖子设置源语言。 检测到的语言将被存储在post表中。

第一步，添加language字段到Post模型：

app/models.py：添加监测到的语言到Post模型：

1 class Post(db.Model): 2 # ... 3 language = db.Column(db.String(5))

你一定还记得，每当数据库模型发生变化时，都需要生成数据库迁移：