小胖的 Adobe AIR with Ajax 实例课堂(二)

最新推荐文章于 2021-01-17 18:12:58 发布

fins

最新推荐文章于 2021-01-17 18:12:58 发布

阅读量113

点赞数

CC 4.0 BY-SA版权

分类专栏： AIR & Flex & AS 文章标签： AIR Ajax Adobe Google 应用服务器

本文链接：https://blog.youkuaiyun.com/fins/article/details/83521499

AIR & Flex & AS 专栏收录该内容

13 篇文章

订阅专栏

小胖的 Adobe AIR with Ajax 实例课堂(二)

[size=large][b]第二课 : 调用google翻译服务,实现英汉单词互译[/b][/size]

======================
[size=medium][b]google翻译服务简介[/b][/size]

上一课的前言部分实在太啰嗦了 ,这一课让我们加快点节奏,直入主题吧.

google的翻译服务提供了基于HTTP服务的API(按google的说法是提供了一个简单的 RESTful 界面 ).
只要向服务地址发送HTTP请求,并传递相应的数据, google就会把结果以JSON字符串的形式返回给客户端.

调用google的翻译服务的URL类似如下:
[url]http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=test&langpair=en%7Czh-CN[/url]

其中 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翻译服务"相关信息,请移步[url="http://code.google.com/intl/zh-CN/apis/ajaxlanguage/documentation/reference.html"]这里[/url]

在我将要开发的这个小工具中, 调用 google翻译的这个RESTful服务, 最好的方式自然就是Ajax了.
下面看看具体如何来做吧.

======================
[size=medium][b]利用Ajax调用google翻译服务[/b][/size]

在开始之前, 先告诉大家一个很重要的知识点:
在Adobe AIR, XMLHttpRequest 是可以跨域访问URL的.
这个特性让人不得不泪流满面.

既然这样, 那么我想大家心里也有数了, 调用google的翻译服务实在是很简单的事情.

那么下面可以设计一个简单的页面,页面包含如下功能:
[list]
[*] 提供一个可以输入欲翻译单词的输入框.
[*] 一个触发翻译功能的按钮.
[*] 一个用来选择是英汉还是汉英翻译的选择框.
[*] 一个显示翻译结果(或错误提示)的区域
[/list]

这几个功能很好实现,打开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;
}

运行后,效果就是这样了:
[img]http://dl.iteye.com/upload/picture/pic/51722/45ccf386-0182-344c-92d7-9d6fcdd13761.jpg[/img]
还是那么丑呵呵.不过不管怎样,界面总算出来了, 美化的事情以后再说,先试着实现基本的功能吧.

页面画好了,剩下的就是利用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应用吧.
并且试着进行一些简单的翻译看看效果吧.

如果没有出来效果或者报错, 那么下载 [b]附件 [url="http://dl.iteye.com/topics/download/6322e018-de85-3291-b381-3815ebf7aba9"]lession_2.zip[/url][/b], 看看里面的实例是如何实现的.

======================
[size=medium][b]一个关于刷新页面的小技巧[/b][/size]

在开发过程中, 每次改变 main.html 后,如果想看看效果, 似乎是蛮麻烦的事情.
因为要关闭正在运行的当前应用,然后重新运行. (AIR中同一个应用是不能运行多个实例的)

要是能直接在已经运行的应用中,刷新页面就好了.

虽然前面说过 AIR就是一个特殊的浏览器, 我们开发的应用就是一个HTML页面,
但是AIR这个浏览器没有提供刷新的快捷键和按钮, 所以在开发期, 给我们的页面提供一个刷新按钮,用来实时的开到最新的开发成果是很有意义的事情.

在开发结束或者稳定后, 再把这个刷新按钮去掉就OK了.

这个就不详述了, 看一看 [b]附件 [url="http://dl.iteye.com/topics/download/6322e018-de85-3291-b381-3815ebf7aba9"]lession_2.zip[/url][/b] 中的 main.html 文件大家就能有所体会.

======================

这一课结束了. 其实关于AIR的东西并不多,简单总结一下无非以下两点:
[list]
[*] AIR中的XMLHttpRequest可以跨域访问
[*] 开发期,给页面加一个"刷新页面"的功能可以提高我们开发的效率.
[/list]

到目前为止,这个小工具的第一个功能特性已经完成了"利用google翻译服务翻译单词,支持汉英和英汉"
虽然还不够好,但仍然是一个大进步.

那么下一课就让我们进步的再大一点吧嘎嘎!

第三课在这里: [url="http://fins.iteye.com/blog/559479"]小胖的 Adobe AIR with Ajax 实例课堂(三)[/url]