小胖的 Adobe AIR with Ajax 实例课堂(二)
第二课 : 调用google翻译服务,实现英汉单词互译
======================
google翻译服务简介
上一课的前言部分实在太啰嗦了 ,这一课让我们加快点节奏,直入主题吧.
google的翻译服务 提供了基于HTTP服务的API(按google的说法是 提供了一个简单的 RESTful 界面 ).
只要向服务地址发送HTTP请求,并传递相应的数据, google就会把结果以JSON字符串的形式返回给客户端.
调用google的翻译服务的URL类似如下:
http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=test&langpair=en%7Czh-CN
其中 q=test 意为要翻译的词是"test",
langpair=en%7Czh-CN 其实就是 langpair=en|zh_CN , 意为"英到汉"的翻译.
调用成功的返回信息类似如下:
{"responseData":{"translatedText":"测试"}, "responseDetails":null, "responseStatus":200}
调用失败的返回信息类似如下:
{"responseData":null, "responseDetails":"invalid text", "responseStatus":400}
responseData.translatedText 为翻译结果
responseDetails 为提示信息(通常为错误提示信息) ,上例中提示信息的意思是 无效的输入值. 也就是说让google翻译了一个无法翻译的字符串,例如空格 回车符等.
responseStatus 为状态码, 200为调用成功.
想了解更多更深入的"google翻译服务"相关信息,请移步
这里
在我将要开发的这个小工具中, 调用 google翻译的这个RESTful服务, 最好的方式自然就是Ajax了.
下面看看具体如何来做吧.
======================
利用Ajax调用google翻译服务
在开始之前, 先告诉大家一个很重要的知识点:
在Adobe AIR, XMLHttpRequest 是可以跨域访问URL的.
这个特性让人不得不泪流满面.
既然这样, 那么我想大家心里也有数了, 调用google的翻译服务实在是很简单的事情.
那么下面可以设计一个简单的页面,页面包含如下功能:
- 提供一个可以输入欲翻译单词的输入框.
- 一个触发翻译功能的按钮.
- 一个用来选择是 英汉 还是 汉英 翻译的选择框.
- 一个显示翻译结果(或错误提示)的区域
这几个功能很好实现,打开main.html,清空<body>里的内容,然后写入如下代码:
<div>
<textarea id="queryWord" name="queryWord" rows="" cols="">test</textarea>
</div>
<div>
<input type="radio" name="langpair" value="en|zh-CN" checked="checked">英-->汉
<input type="radio" name="langpair" value="zh-CN|en">汉-->英
</div>
<div>
<button type="button" id="doTranslate" >翻译</button>
</div>
<div> 结果 :</div>
<div id="result"> </div>
同时在head里的style中加入下面的样式
* {
font-size : 14px;
}
#result {
border : 1px solid #cccccc;
padding : 10px;
margin : 10px;
}
运行后,效果就是这样了:
还是那么丑 呵呵.不过不管怎样,界面总算出来了, 美化的事情以后再说,先试着实现基本的功能吧.
页面画好了,剩下的就是利用JS来读取这些表单域的值,然后通过XHR请求把这些值传递给google翻译服务,
再然后等着把结果显示出来就ok了.
这些我们利用JQuery来实现. 在main.html页面的 head里的script区里写入如下代码:
// 页面初始化后 执行下面的代码
$(document).ready(function(){
//给"翻译"按钮注册点击事件
$("#doTranslate").click(function(event){
// 取"单词输入框"的内容,并trim,如果输入内容为空则不做翻译
var q= $.trim( $('#queryWord').val()||$('#queryWord').text() );
if (!q) {
return;
}
//定义一些常量
var ERR_MSG="( Cann't Translate! )";
var TRANSLATE_API="http://ajax.googleapis.com/ajax/services/language/translate";
var TRANSLATE_VER = "1.0";
// 取翻译类型的值
var langpair=$('input:radio[name=langpair]:checked').val();
// 利用Ajax调用 google翻译服务, 将返回结果写入到 id="result"的DIV里.
// AIR 里的 Ajax 支持跨域访问!!!! 所以我们可以直接调用google翻译服务.
$.getJSON( TRANSLATE_API,
// 调用服务时 传递的参数.
{
v : TRANSLATE_VER,
q : q,
langpair : langpair
},
// 调用服务后的回调函数.
function(data, textStatus){
if (textStatus=="success") {
var status=data.responseStatus,t;
if (status==200) {
t=data.responseData? data.responseData.translatedText:ERR_MSG;
}else{
t=data.responseDetails||ERR_MSG;
}
}
//把翻译结果 或者是错误提示 显示在id="result"的DIV里
$('#result').html(t)
}
);
});
});
这些代码如果不懂得JQuery的同学看起来可能有点晕, 不过无所谓了, 主要了解一下思路, 其实大家可以使用自己熟悉的方式来实现这个功能,整个过程并不复杂.
好了 现在再用 run.bat 运行一下这个AIR应用吧.
并且试着进行一些简单的翻译 看看效果吧.
如果没有出来效果 或者报错, 那么下载
附件 lession_2.zip, 看看里面的实例是如何实现的.
======================
一个关于刷新页面的小技巧
在开发过程中, 每次改变 main.html 后,如果想看看效果, 似乎是蛮麻烦的事情.
因为要关闭正在运行的当前应用,然后重新运行. (AIR中 同一个应用是不能运行多个实例的)
要是能直接在已经运行的应用中,刷新页面就好了.
虽然前面说过 AIR就是一个特殊的浏览器, 我们开发的应用就是一个HTML页面,
但是AIR这个浏览器 没有提供刷新的快捷键和按钮, 所以在开发期, 给我们的页面提供一个 刷新按钮,用来实时的开到最新的开发成果是很有意义的事情.
在开发结束 或者稳定后, 再把这个刷新按钮去掉就OK了.
这个就不详述了, 看一看
附件 lession_2.zip 中的 main.html 文件大家就能有所体会.
======================
这一课结束了. 其实关于AIR的东西并不多,简单总结一下无非以下两点:
- AIR中的XMLHttpRequest可以跨域访问
- 开发期,给页面加一个"刷新页面"的功能 可以提高我们开发的效率.
到目前为止,这个小工具的第一个功能特性已经完成了"利用google翻译服务翻译单词,支持汉英 和 英汉"
虽然还不够好,但仍然是一个大进步.
那么 下一课就让我们进步的再大一点吧 嘎嘎!
第三课在这里:
小胖的 Adobe AIR with Ajax 实例课堂(三)
分享到：
相关推荐
在"小胖的 Adobe AIR with Ajax 实例课堂(一)"中，我们可以期待学习如何利用Adobe AIR结合Ajax技术来构建桌面应用程序。 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新...
在"小胖的 Adobe AIR with Ajax 实例课堂(三)"这个教程中，我们将深入探讨如何利用这些技术构建功能丰富的桌面应用。 首先，让我们理解什么是Ajax。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载...
在IT领域，Ajax（异步JavaScript和XML）是一种在不刷新整个页面的情况下更新部分网页内容的技术，而jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和AJAX交互。ZTree是一款基于jQuery的树形插件，...
微信小程序bilibili项目实战小胖商城（源码）.zip微信小程序bilibili项目实战小胖商城（源码）.zip微信小程序bilibili项目实战小胖商城（源码）.zip微信小程序bilibili项目实战小胖商城（源码）.zip微信小程序...
小胖无限网络使用参数详细表 里面含精确的详细表说明
小胖阅读器恰到好处的简单。简单，在于外观，更在于体验。所以你一定会喜欢全新的小胖阅读器，它会给你简洁畅快的使用感受，而不需要过多的思考压力。 功能介绍 恰到好处的简单 简单，在于外观，更在于体验。所以你...
xiaopan 教程 wifi破 wpa破解pin码破解教程
内容概要：目前主要包含叫号功能，可以设置范围、选择数量、重复选择、自动选择、振动反馈、声音反馈等功能。比如用于班级抽查作业，公平有趣，学生可嗨了。 采用android多线程、异步刷新界面技术，集成了腾讯互动...
微信小程序demo：小胖看车团(源代码+截图)微信小程序demo：小胖看车团(源代码+截图)微信小程序demo：小胖看车团(源代码+截图)微信小程序demo：小胖看车团(源代码+截图)微信小程序demo：小胖看车团(源代码+截图)微信...
这篇文档介绍的是一个针对幼儿园小班的数学教育活动——"小胖猪开糖果店"，旨在帮助幼儿感知5以内的数量，并培养他们的分类能力。活动的设计遵循了《纲要》中关于幼儿数学教育的理念，强调从生活中学习和体验数学的...
【小胖减肥记】这篇作文以幽默轻松的方式讲述了一个名叫小胖的孩子的减肥经历，从中我们可以提炼出几个与健康和生活习惯相关的知识点。 1. **肥胖与健康风险**：文章指出，过重或肥胖可能导致心血管疾病，增加身体...
【路小胖路由器评测详解】 在当今的科技时代，路由器作为家庭网络的核心设备，其重要性日益凸显。尤其是在智能家居的普及下，路由器不仅扮演着连接互联网的角色，更成为智能家居系统中的关键节点。然而，市场上的...
温暖的午后，小胖刚刚献完血，小胖的女朋友小红很疼爱他，决定晚上去去菜场买点蔬菜给吴小胖补补。 小红进入菜场发现她只带了n元，菜场有m种菜，但她希望买最贵的菜给小胖补补。输入格式:第一行输入一个nm（nm<=...
Web版基于Adobe Acrobat PDF转图片及图片合并工具,需要安装Adobe Acrobat XI软件，Web版部署IIS的基于Adobe Acrobat也已经实现，需要的可以联系我，Web实现原理，客户端（浏览器）上传PDF到服务器中，服务器端处理...
这个“DirectX小胖娃走动源码”显然是一个使用DirectX实现的示例项目，它展示了如何通过编程使一个虚拟角色——小胖娃能够移动。我们将深入探讨DirectX中的DirectDraw和DirectSound两个组件，以及它们在游戏开发中的...
基于Adobe Acrobat WinFromPDF转图片及图片合并工具,需要安装Adobe Acrobat XI软件，Web版部署IIS的基于Adobe Acrobat也已经实现，需要的可以联系我，Web实现原理，客户端（浏览器）上传PDF到服务器中，服务器端处理...
2. **数据交互**：ECharts支持从后台获取数据并动态展示，这涉及到Ajax请求或者Promise来获取JSON格式的数据，然后通过`setOption`方法更新图表内容。 3. **图表类型与配置**：ECharts支持多种图表，如折线图(line)...
标题中的“小胖、小瘦锻炼记.rar”很可能是一个关于健康锻炼或减肥塑形的电子资源，以RAR格式压缩，通常包含多个文档或图像文件。RAR是一种常见的压缩格式，用于集合多个文件并减小它们的大小以便于存储和传输。 在...
总之，“小胖看车团-微信团购小程序”是一个集成了电商功能的微信小程序实例，涉及了微信小程序的全栈开发技术，包括前端UI设计、后端数据交互、用户交互以及微信平台的特有API。无论是初学者还是有经验的开发者，都...