展会信息港展会大全

Android平台上基于Rexsee实现的Ajax跨域访问
来源:互联网   发布日期:2015-09-24 19:13:51   浏览:2554次  

导读: 在移动平台的WebApp开发中,跨域问题一直是一个比较重要的环节。尽管Ajax的跨域在某些层面带来了不少安全隐患,但同时也彻底放开了传统Ajax的限制。。目前大量的移动Web开发框架都已从不同角度提出了自己的解决......

在移动平台的WebApp开发中,跨域问题一直是一个比较重要的环节。尽管Ajax的跨域在某些层面带来了不少安全隐患,但同时也彻底放开了传统Ajax的限制。。目前大量的移动Web开发框架都已从不同角度提出了自己的解决方法,效果不一。。

这里介绍Rexsee内置的Ajax对象,通过RexseeAjax对本地的页面进行动态注值。。

这就是我们使用Rexsee时可以使用的独特程序架构 B/C/S,即页面和资源文件本地化,通过ajax从服务器获取数据。

此种架构有3种好处:其一,页面读取和加载速度的优化。其二,流量的优化。其三,用户体验的优化。

先来了解一下rexseeajax对象。此对象包含3个方法和3个事件:前2个方法是异步取值,最后一个方法则是同步取值。事件的对应在手册中有相应的说明,这里就不再叙述了。

使用rexseeajax的时候需要注意:

在rexsee 提供的3个ajax对象函数中,submit和submitWithCallback函数在回调函数(事件)中返回的字串(response)是需要用 unescape解码的,即直接alert(response)会看到乱码,需要alert(unescape(response))才可以看到正常的字 串。但在syncSubmit函数中,返回字串则不需要unescape。

对于submit和syncSubmit,这两个函数是在读取数据的时候默认调用的旋转进度框,如果想在请求数据时不使用旋转进度框,那么我们需要使用 submitWithCallback,当然我想使用其他进度框也可以在其的触发事件onAjaxProgressChanged中编写。

为什么要额外提到这里,因为在数据较多的情况下,使用带默认进度框的ajax方法会使得用户体验变得很不好,而使用没有进度框ajax方法,则可以自己定 义用户等待的界面,比如一个GIF动画等等。同时,可以避免在页面切换时带来的延迟等待(因为我们一般都把页面本地化,页面的读取都是从本地读取,而数据 获取则是从网络)。

附了个示例的JS代码,大家可以将数据页面的内容加大,看看在两种不同的请求形式下,等待程序的长短。那么以后自己的程序该如何去设计,都应该了然于胸了。

数据格式都是标准的json数据和数组,使用eval('('+json+')')方法转换为对象即可方便使用。

[代码]无进度框代码

function checkLogin(){

var name=document.getElementById('username').value;

var password=document.getElementById('password').value;

rexseeAjax.submitWithCallback('http://www.fuwu800.com/yezhenqing/ajaxTest/check.php','name='+name+'&password='+password,'gb2312');

}

function onAjaxReturned(ajaxUrl,response)

{

var temp=eval("("+unescape(response)+")");

temp=temp.result;

if(temp==1){

rexseeBrowser.go('test.html');

}else if(temp==0){

rexseeDialog.alert('消息框','登录失败!');

}

}

5. [代码]有进度框代码

function checkLogin(){

var name=document.getElementById('username').value;

var password=document.getElementById('password').value;

var temp=eval("("+ rexseeAjax.syncSubmit('http://www.fuwu800.com/yezhenqing/ajaxTest/check.php','name='+name+'&password='+password,'gb2312')+")");

temp=temp.result;

if(temp==1){

rexseeBrowser.go('test.html');

}else if(temp==0){

rexseeDialog.alert('消息框','登录失败!');

}

}

6. [代码]数据页面获取,无进度框代码

通过ajax来检查我们的用户名和密码是否合法,合法的话进入数据页面,否则提示失败。

rexseeAjax.submitWithCallback('http://www.fuwu800.com/yezhenqing/ajaxTest/a.html','','gb2312');

function onAjaxReturned(ajaxUrl,response)

{

document.getElementById("contents").innerHTML="";

var temp=unescape(response);

var test=eval("("+temp+")");

for(var i=0;i<test.length;i++){

document.getElementById("contents").innerHTML+="<li>"+test[i].firstName+"."+test[i].lastName+"</li>";

}

}

7. [代码]数据页面获取,有进度框代码

通过ajax来检查我们的用户名和密码是否合法,合法的话进入数据页面,否则提示失败。

window.onRexseeReady=function(){

document.getElementById("contents").innerHTML="";

var test=eval("("+rexseeAjax.syncSubmit('http://www.fuwu800.com/yezhenqing/ajaxTest/a.html','','gb2312')+")");

for(var i=0;i<test.length;i++){

document.getElementById("contents").innerHTML+="<li>"+test[i].firstName+"."+test[i].lastName+"</li>";

}

}

赞助本站

人工智能实验室

相关热词: Ajax 跨域 Android平台 Rexsee

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港