ExMobi的那些实现异步(Ajax)提交的方法

nandy007
   2014-12-03 13:54:23发布  2017-02-22 09:48:28更新 3收藏, 2595浏览
ExMobi客户端技术
1

在移动应用开发中使用异步请求(Ajax)是非常常用的,因为使用Ajax可以达到界面与数据分离,即让一些需要显示的布局框架页面放到本地,而Ajax只是获取显示的数据内容,将Ajax获取到的数据注入到框架中。
由于ExMobi是可以使用服务端处理的,但实际开发中有的请求是不需要经过ExMobi服务器的,特别是免费版的ExMobi就没有服务端的概念
所以,接下来的介绍我们以经过服务端和第三方直连进行分类。
第一类:经过ExMobi服务端
此类Ajax均可以配置mapp路由经过JSP进行处理:
第一种:使用Ajax对象类(不带附件),即

  1. 14.1 Ajax封装类


Ajax对象类本身是需要经过ExMobi服务端的,但是可以不需要配置mapp路由,也就是我们常说的透传。当然如果配置了mapp路由仍然可以在ExMobi的的JSP中对请求进行处理和格式化输出。而且Ajax对象类不能提交附件
比如:

var address = document.getElementById("address").value;
                        var region = document.getElementById("region").value;
                        
                        var url = "http://api.map.baidu.com/place/v2/search?&query="+address+"®ion="+region+"&output=json&ak=D6f320a027a612f55050cba5855f64de";
                        new Ajax({
                                url : url,
                                method : "get",
                                reqCharset : "UTF-8",
                                successFunction : "doSuccess",
                                failFunction : "doFail",
                                isBlock : true
                        }).send();

上述的url参数可以配置mapp也不可以不配置,如果不配置的话将原样返回数据,所以一般如果是返回json数据可以不同配置mapp,如果是html、xml等建议配置mapp后返回json给客户端

第二种:使用FormSubmit表单提交类(带附件)
FormSubmit是对Ajax类的一个扩充,能够支持使用异步的方式提交带附件的请求。而且调用方式跟Ajax类类似,只是对于提交的参数需要符合格式要求,对于文件类和非文件类的参数要有明确的标识。



第三种:使用form表单的异步请求
即在form表单控件中设置success和fail回调函数:

successform属性【说明】表单提交服务器成功后执行回调函数【注】回调函数的入参为FromResponse类对象.。若form表单不具有成功回调函数,则默认打开处理页面;若form表单具有成功回调函数,则成功接收回应后将不主动打开页面,而是进入二次开发人员设置成功回调函数中处理。【适用平台】ALL【基座版本】4.2+wp8基座4.6+支持,win8基座4.10+支持
failform属性【说明】表单提交服务器失败后执行回调函数【注】回调函数的入参为FromResponse类对象。若form表单不具有失败回调函数,则默认打开处理页面;若form表单具有失败回调函数,当发生错误后(非200状态时)并不弹出错误提示框,而是进入二次开发人员设置的失败回调函数中处理。【适用平台】ALL【基座版本】4.2+wp8基座4.6+支持,win8基座4.10+支持

这样,form表单被提交(submit)之后如果请求成功会进到success回调函数中,如果请求报错会进到fail回调函数中。
这种方式适合提交参数很多的情况以及参数中有附件的情况。
需要注意的是此方法必须配置mapp路由,否则会导致请求错误!而且建议返回json数据。

比如:

<form id="formid" action="http://127.0.0.1:8001/jsp/input_submit_example.jsp" success="doSuccess" fail="doFail">

<div style="width:80%;border-size:1;border-radius:4;align:center;margin:100 0 0 0">

<input type="text" prompt="用户名" hideborder="true" ricon="res:image/popClose.png" id="user" riconhref="clear('user')" name="username"/>

<input type="password" prompt="密码" hideborder="true" ricon="res:image/popClose.png" id="pwd" riconhref="clear('pwd')" name="password"/>

</div>

<input type="button" value="登      录" style="width:80%;align:center;" onclick="doSubmit()"/>

</form> 

第四种:文件下载,即:

  1. void ClientUtil.download(url,dstpath, successCallFun,errorCallFun,isblock)

可以通过ExMobi服务端去下载一个文件并保存到本地,比如:

var url = "http://192.168.7.1:8080/mydb.db3";

    var dstpath = "res:db/mydb.db3";

    var successCallFun = succFun;

    var errorCallFun = errorFun;

    var isblock = true;

    ClientUtil.download(url, dstpath, successCallFun, errorCallFun, isblock);/*文件下载*/

第二类:直连第三方系统(不经过服务端)
这类Ajax是直接与第三方系统进行交互的,不经过ExMobi的服务端(不可以在server中写JSP),尤其在免费版中是最常用的。
方法一:直连不带附件,即

  1. <font size="4">14.7 DirectAjax请求第三方获取数据</font>

此方法是直接往第三方系统请求数据的,但是不能带附件,比如:

var address = document.getElementById("address").value;
                        var region = document.getElementById("region").value;
                        
                        var url = "http://api.map.baidu.com/place/v2/search?&query="+address+"®ion="+region+"&output=json&ak=D6f320a027a612f55050cba5855f64de";
                        new DirectAjax({
                                url : url,
                                method : "get",
                                reqCharset : "UTF-8",
                                successFunction : "doSuccess",
                                failFunction : "doFail",
                                isBlock : true
                        }).send();

而且建议直连请求返回json数据给回调函数方便处理

方法二:直连带附件,即

  1. 14.9 DirectFormSubmit第三方服务器提交数据

此方法适用于当提交的参数中需要提交附件的时候使用,其他方法同DirectAjax,比如:

var url = "http://192.168.7.1:8180/ademo/up";        

    var ajaxData = {};       

    

    var data1 = {};

    data1.type = 0;

    data1.name = "username";

    data1.value= "Miss Hu";

    var data2 = {};

    data2.type = 0;

    data2.name = "nickname";

    data2.value= "旖旎";

    var data3 = {};

    data3.type = 1;

    data3.name = "photo";

    data3.value= "res:image/pic3.png";

    var data4 = {};

    data4.type = 0;

    data4.name = "email";

    data4.value= "yinihu@gmail.com.cn";

    var data5 = {};

    data5.type = 0;

    data5.name = "loginTime";

    var date = new Date();

    data5.value= date.Date();

    var arrayData = new Array();

    arrayData.push(data1);

    arrayData.push(data2);

    arrayData.push(data3);

    arrayData.push(data4);

    arrayData.push(data5);

    ajaxData.data = arrayData;  

    ajaxData.method = "POST";          

    ajaxData.isBlock = true;

    ajaxData.url = url;         

    ajaxData.successFunction = "testDirectFormSubmitSuccessCallBack";  

    ajaxData.failFunction = "testDirectFormSubmitFailCallBack";               

           

    var ajax = new DirectFormSubmit(ajaxData);    

    ajax.setStringData("key",data1.name);  

    var arr = new Array();

    arr.push(data2.name+":"+data2.value);

    arr.push(data3.name+":"+data3.value);

    arr.push(data4.name+":"+data4.value);

    ajax.setArrayData("arr1",arr);  

    ajax.send();

方法三:直连下载,即

  1. 14.8 DirectDownload请求第三方下载数据

当我们需要直接从第三方获取一个文件的时候就可以使用此方法。

以上提到的方法都带有章节名称,大家可以查阅相关的二次开发手册了解各个方法的具体参数和实际用法

下载APP
扫码下载栗子社区APP