`

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

阅读更多
小胖的 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">&#160;</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 实例课堂(三)








12
4
分享到:
评论
3 楼 fins 2009-12-29  
caoming_ke 写道


小胖的 Adobe AIR with Ajax 实例课堂(二)
里面很多乱码怎么办?



请问你是在哪里看到的乱码? 是运行时 还是自己用编辑器查看代码时?

如果是后者 请确认你的编辑器是以UTF-8编码查看文件.
2 楼 avanry 2009-12-26  
为什么不直接用FLEX BUILDER开发工具呢?
用工具就直接建工程了,你这是基于网页版的AIR吧....
还有个问题:AIR不是具有AJAX特性吗?还需要集成AJAX吗?(原谅我,I am a freshman)
1 楼 netfork 2009-12-26  
谢谢小胖,写的很清楚。

相关推荐

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

    在"小胖的 Adobe AIR with Ajax 实例课堂(一)"中,我们可以期待学习如何利用Adobe AIR结合Ajax技术来构建桌面应用程序。 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新...

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

    在"小胖的 Adobe AIR with Ajax 实例课堂(三)"这个教程中,我们将深入探讨如何利用这些技术构建功能丰富的桌面应用。 首先,让我们理解什么是Ajax。Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载...

    基于单片机的科学型计算器设计(51+1602+KEY40)#0067

    包括:源程序工程文件、Proteus仿真工程文件、配套技术手册等 1、采用51/52单片机作为主控芯片; 2、采用1602液晶显示; 3、采用5*8矩阵键盘输入; 4、功能键包括:复位键(RST),回删键(DEL),确定键(OK),第二功能切换(2U),背光灯键(LED); 5、运算均为单精度浮点数,包括: 加(+),减(-),乘(x),除(÷), e底指数(e^n),N次方(x^n),开N次方(sqrt), 正弦(sin),余弦(cos),正切(tan), 对数(log), 阶乘(n!)(n<35), 排列(Arn), 累加(∑), *开启第二功能(2U)后可用: 反正弦(asin),反余弦(acos),反正切(atan), 组合(Crn)

    基于三菱FX2N PLC的机械手控制系统设计与实现

    内容概要:本文详细介绍了如何利用三菱FX2N系列PLC构建机械手控制系统。主要内容涵盖电路图设计、IO表配置、源程序编写以及单机组态。文中提供了具体的梯形图编程实例,展示了如何通过PLC精确控制机械手的各种动作,如抓取、移动和放置。此外,还分享了许多实用的调试技巧和注意事项,强调了传感器状态交叉验证和关键动作的时间守护机制。通过这些内容,读者可以全面了解PLC在机械手控制中的应用。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是对PLC编程和机械手控制感兴趣的初学者和有一定经验的研发人员。 使用场景及目标:适用于需要设计和实施机械手控制系统的工业场合,帮助工程师掌握PLC编程技巧,提高机械手控制系统的稳定性和可靠性。 其他说明:文章不仅提供理论指导,还包括大量实战代码和调试经验,有助于读者快速上手并在实践中不断优化系统性能。

    豆包生成美女的AI提示词基于豆包平台的美女图像生成提示词

    内容概要:本文档提供了用于生成具有时尚性感元素的美女跳舞图像的提示词指南。文档内容包括角色设定为擅长描绘时尚与超现实主义图片的创作者,背景设定强调女性形象,偏好展现性感漂亮女孩的镜头表达。目标在于根据用户指令创作三幅统一风格的图像,注重色彩搭配和高清效果,同时确保每张图片都具备半身像、真实感和电影效果的特点。文档还给出了具体的输出示例,详细描述了人物形象、服装搭配以及场景布置等要素,旨在为用户提供满意的图像生成服务。; 适合人群:对图像生成感兴趣,尤其是喜欢带有时尚性感元素的美女图像的用户。; 使用场景及目标:①根据用户提供的简单场景信息(如户外或室内)生成三幅不同场景但风格统一的赛博朋克风格美女跳舞图像;②确保生成的图像符合特定的要求,如半身像、真实感、电影效果、性感服装、特定灯光效果等;③通过询问用户对生成图像的满意度来保证服务质量。; 其他说明:文档明确了图像生成的工作流程,从接收用户指令到根据反馈调整生成内容,确保整个过程高效且满足用户需求。同时,文档还限制了生成图像的具体条件,如场景必须为赛博朋克风格、不能出现鞋子和其他人等,以保证图像的独特性和一致性。

    蓝桥杯大赛模拟题PDF

    题目描述 1.问题描述 一个正整数如果任何一个数位不大于右边相邻的数位,则称为一个数位递增的 数,例如1135是一个数位递增的数,而1024不是一个数位递增的数。 给定正整数n,请问在整数1至n中有多少个数位递增的数? 输入格式 输入的第一行包含一个整数n。 输出格式 输出一行包含一个整数,表示答案。 样例输入 30 样例输出

    基于非对称纳什谈判的多微网电能共享优化策略及其MATLAB实现

    内容概要:本文详细介绍了基于非对称纳什谈判的多微网电能共享运行优化策略及其MATLAB代码实现。首先阐述了纳什谈判和合作博弈的基本理论,然后将多微网电能共享合作运行模型分解为微网联盟效益最大化和合作收益分配两个子问题。文中展示了如何通过交替方向乘子法(ADMM)进行分布式求解,确保各微网隐私安全。此外,还探讨了电转气(P2G)和碳捕集(CCS)设备的应用,以实现低碳调度。最后,通过具体代码示例解释了模型的构建、求解及优化过程。 适合人群:对电力系统优化、博弈论、MATLAB编程感兴趣的科研人员和技术开发者。 使用场景及目标:适用于希望深入了解多微网电能共享优化策略的研究者,旨在提高微网联盟的整体效益并实现公平合理的收益分配。同时,该策略有助于降低碳排放,提升系统的环境友好性和经济性。 其他说明:文章提供了详细的代码注释和调试技巧,帮助读者更好地理解和实现这一复杂的优化策略。

    MATLAB机器人仿真:基于视觉控制的六轴机械臂运动路径规划与实现

    内容概要:本文详细介绍了如何利用MATLAB进行六轴机械臂的视觉控制系统仿真。首先,通过MATLAB的图像处理工具箱捕捉并处理实时视频流,使用HSV颜色空间进行颜色阈值处理,从而定位红色小球的位置。然后,借助Robotics Toolbox中的逆运动学模块,将摄像头获取的目标位置转换为机械臂的关节角度,确保机械臂能够精准地追踪目标。此外,还讨论了路径规划的方法,如使用五次多项式插值和平滑滤波器,使机械臂的动作更加流畅。文中强调了实际应用中可能遇到的问题及其解决方法,如奇异点处理、坐标系转换和机械臂的速度限制等。 适合人群:具有一定编程基础和技术背景的研究人员、工程师以及对机器人视觉控制感兴趣的开发者。 使用场景及目标:适用于希望在MATLAB环境中快速搭建和测试机械臂视觉控制系统的科研人员和工程师。主要目标是掌握从图像处理到机械臂控制的完整流程,理解各模块的工作原理,并能够在实际项目中应用。 其他说明:本文不仅提供了详细的代码示例,还分享了许多实用的经验和技巧,帮助读者更好地理解和优化仿真系统。同时提醒读者注意仿真与现实之间的差异,如摄像头延迟、机械臂传动误差等问题。

    【KUKA 机器人坐标的建立】:mo2_base_en.ppt

    KUKA机器人相关文档

    【KUKA 机器人资料】:KAKA机器人汽车座椅测试系统.pdf

    KUKA机器人相关文档

    三相变流器MPC控制:Matlab/Simulink仿真实现及优化技巧

    内容概要:本文详细介绍了三相变流器的模型预测控制(MPC)在Matlab/Simulink环境下的实现过程。首先,初始化程序设置了关键参数,如直流母线电压、开关频率和控制周期等,确保系统的稳定性和效率。接着,通过MPC_sfun.c实现了核心控制算法,采用状态空间模型进行滚动预测,提高了系统的动态响应能力。最后,利用out.m生成高质量的仿真结果图,展示了负载突变时的快速恢复特性,并提供了优化建议,如调整代价函数权重和引入软约束等。 适合人群:电力电子工程师、控制系统研究人员以及对MPC感兴趣的科研工作者。 使用场景及目标:适用于需要精确控制电压电流的场合,如电动汽车充电站、风力发电系统等。主要目标是提高系统的动态响应速度、降低总谐波失真(THD),并在性能和计算负担之间取得平衡。 其他说明:文中提到了一些实用技巧,如控制周期的选择、预测步长的优化、图形绘制的最佳实践等,有助于读者更好地理解和应用MPC控制策略。同时,强调了在实际应用中需要注意的问题,如避免过高开关频率导致器件损坏等。

    网络炒作策划要点解析.ppt

    网络炒作策划要点解析.ppt

    三菱Q03UDE PLC SFC编程模板在16轴伺服控制系统中的应用与优化

    内容概要:本文详细介绍了三菱Q03UDE PLC使用SFC(顺序功能图)编程方法在16轴伺服控制系统中的应用。文章首先概述了硬件配置,包括500个IO点、16轴伺服控制以及触摸屏的画面编程。接着深入探讨了SFC编程的具体实现方式,如将复杂的轴控制分解为独立的流程块,利用并行结构解决多轴同步问题,通过触摸屏实时监控和反馈SFC步状态,以及如何高效管理和复用输出点。此外,文章还讨论了SFC在状态管理和报警处理方面的优势,并提供了具体的代码示例来展示其实现细节。最后,作者分享了一些实用技巧和注意事项,强调了SFC编程相比传统梯形图的优势。 适合人群:从事工业自动化控制系统的工程师和技术人员,尤其是对三菱PLC和SFC编程感兴趣的读者。 使用场景及目标:适用于需要进行复杂多轴伺服控制项目的工程师,旨在提高调试效率、减少信号冲突、缩短新人培养周期,并提供一种更加直观和高效的编程方法。 其他说明:文中提到的实际项目经验有助于读者更好地理解和应用SFC编程技术,同时也提醒了一些常见的错误和陷阱,帮助读者避免不必要的麻烦。

    LabVIEW与三菱FX3U PLC串口通讯:基于Modbus协议的简易实现及应用

    内容概要:本文详细介绍了如何使用LabVIEW实现与三菱FX3U PLC的串口通讯,采用Modbus无协议通讯方式进行简单读写操作。主要内容包括PLC通讯参数配置、LabVIEW工程结构搭建、Modbus报文构造方法以及具体的读写数据模块实现。文中提供了详细的代码示例和注意事项,帮助读者快速理解和实践这一通讯过程。 适合人群:对工业自动化有一定兴趣的技术人员,尤其是熟悉LabVIEW和三菱PLC的工程师。 使用场景及目标:适用于需要将LabVIEW作为上位机与三菱FX3U PLC进行串口通讯的应用场合,如工业控制系统、实验教学等。主要目标是掌握Modbus协议的基础知识及其在LabVIEW中的具体实现。 其他说明:文章还提供了一些常见的错误排查方法和实用技巧,如CRC校验的处理、地址偏移量的注意事项等。此外,附带了完整的源码供读者下载和参考。

    图像检索-基于零样本开集的草图图像检索系统实现-附项目源码+流程教程-优质项目实战.zip

    图像检索_基于零样本开集的草图图像检索系统实现_附项目源码+流程教程_优质项目实战

    基于C语言写的电话簿程序

    基于C语言写的电话簿程序

    基于单片机的电压(20V)检测设计(51+1602+AD0808)#0063

    包括:源程序工程文件、Proteus仿真工程文件、配套技术手册等 1、采用51单片机作为主控芯片; 2、采用1602液晶显示检测电压值,范围0~20V; 3、采用ADC0808进行模数转换;

    【剧本杀AI提示词指令】基于AI的剧本杀定制化创作系统(deepseek,豆包,kimi,chatGPT,扣子空间,manus,AI训练师)

    内容概要:本文介绍了一个专业的剧本杀创作作家AI。它能根据客户需求创作各种风格和难度的剧本杀剧本,并提供创作建议和修改意见。其目标是创造引人入胜、逻辑严密的剧本体验。它的工作流程包括接收理解剧本要求、创作剧本框架情节、设计角色背景线索任务剧情走向、提供修改完善建议、确保剧本可玩性和故事连贯性。它需保证剧本原创、符合道德法律标准并在规定时间内完成创作。它具备剧本创作技巧、角色构建理解、线索悬念编织、文学知识和创意思维、不同文化背景下剧本风格掌握以及剧本杀游戏机制和玩家心理熟悉等技能。; 适合人群:有剧本杀创作需求的人群,如剧本杀爱好者、创作者等。; 使用场景及目标:①为用户提供符合要求的剧本杀剧本创作服务;②帮助用户完善剧本杀剧本,提高剧本质量。; 阅读建议:此资源详细介绍了剧本杀创作作家AI的功能和服务流程,用户可以依据自身需求与该AI合作,明确表达自己的创作需求并配合其工作流程。

    Matlab图像处理技术实现静态图片美颜与特效处理

    内容概要:本文详细介绍了如何利用Matlab进行静态图片的美颜和特效处理。首先通过Viola-Jones算法进行人脸定位,然后采用双边滤波对皮肤进行磨皮处理,在HSV色彩空间中调整亮度以达到美白效果,最后运用小波变换将星空图等特效融合到图片中。整个过程中涉及多个图像处理技术和算法,如Haar特征、双边滤波、HSV转换、小波变换等。 适合人群:对图像处理感兴趣的初学者以及有一定Matlab基础的研发人员。 使用场景及目标:适用于希望深入了解图像处理原理并掌握具体实现方法的学习者;目标是能够独立完成简单的图像美化任务,如人像磨皮、美白、特效添加等。 其他说明:文中提供了完整的代码示例,帮助读者更好地理解和实践相关技术。同时强调了参数选择的重要性,并给出了合理的建议范围。

Global site tag (gtag.js) - Google Analytics