小胖的 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 实例课堂(三)
分享到：
相关推荐
NULL 博文链接：https://fins.iteye.com/blog/556161
NULL 博文链接：https://fins.iteye.com/blog/559479
本demo的目的是将多层json数据（一级分类嵌套着二级） 解析成单层，然后将键改为符合插件需要的值，不然没法显示 代码测试真实有效，就是请求的地址大家需要改一下，因为那是我的局域网地址
微信小程序bilibili项目实战小胖商城（源码）.zip微信小程序bilibili项目实战小胖商城（源码）.zip微信小程序bilibili项目实战小胖商城（源码）.zip微信小程序bilibili项目实战小胖商城（源码）.zip微信小程序...
小胖无限网络使用参数详细表 里面含精确的详细表说明
小胖阅读器恰到好处的简单。简单，在于外观，更在于体验。所以你一定会喜欢全新的小胖阅读器，它会给你简洁畅快的使用感受，而不需要过多的思考压力。 功能介绍 恰到好处的简单 简单，在于外观，更在于体验。所以你...
微信小程序demo：小胖看车团(源代码+截图)微信小程序demo：小胖看车团(源代码+截图)微信小程序demo：小胖看车团(源代码+截图)微信小程序demo：小胖看车团(源代码+截图)微信小程序demo：小胖看车团(源代码+截图)微信...
小胖猪开糖果店（感知5以内的数量）.doc
内容概要：目前主要包含叫号功能，可以设置范围、选择数量、重复选择、自动选择、振动反馈、声音反馈等功能。比如用于班级抽查作业，公平有趣，学生可嗨了。 采用android多线程、异步刷新界面技术，集成了腾讯互动...
温暖的午后，小胖刚刚献完血，小胖的女朋友小红很疼爱他，决定晚上去去菜场买点蔬菜给吴小胖补补。 小红进入菜场发现她只带了n元，菜场有m种菜，但她希望买最贵的菜给小胖补补。输入格式:第一行输入一个nm（nm<=...
Web版基于Adobe Acrobat PDF转图片及图片合并工具,需要安装Adobe Acrobat XI软件，Web版部署IIS的基于Adobe Acrobat也已经实现，需要的可以联系我，Web实现原理，客户端（浏览器）上传PDF到服务器中，服务器端处理...
如今越来越多的路由器进入我们的眼帘，而今天小编将为大家介绍国内首款第三方路由器测评软件“路小胖”，路小胖路由器怎么样好不好？下面是路小胖路由器评测。
基于Adobe Acrobat WinFromPDF转图片及图片合并工具,需要安装Adobe Acrobat XI软件，Web版部署IIS的基于Adobe Acrobat也已经实现，需要的可以联系我，Web实现原理，客户端（浏览器）上传PDF到服务器中，服务器端处理...
小胖减肥记作文.doc
贪吃贪睡的小胖猪作文.doc
xiaopan 教程 wifi破 wpa破解pin码破解教程
echarts实例，一个完整的echarts前后台交互实例。可以参考使用
《小胖过生日》教学设计.pdf
《小胖虎农场微信小程序（全套）》是一款专为农场管理和农产品销售设计的综合性应用程序。该系统利用微信小程序的便捷性，为农场主提供一个易于管理的农场运营平台，同时也为消费者提供一个方便快捷的农产品购买渠道...