使用Phonegap实现离线功能

PhoneGap使用Sqlite实现离线功能技术研究方案

关键词：PhoneGap，Sqlite，跨平台，html，javascript，ajax，JSON

PhoneGap使用Sqlite实现离线功能技术简介

获取数据功能

1）建立PhoneGap 环境

2）通过ajax请求服务器获取JSON数据

3）解析获取JSON数据。

离线功能

1）调用PhoneGap 的api，制作数据库插件，并保存数据至数据库

2）从数据库中查询数据，动态装载到html页面上。

PhoneGap使用Sqlite实现离线功能技术研究

获取数据功能

1.建立PhoneGap 环境（Android）

1) 在PhoneGap官网下载PhoneGap最新版本的开发包PhoneGap 1.9.0

2) 创建Android项目，将PhoneGap 1.9.0包中的XML文件夹拷进项目中的res文件夹

里，在文件夹asset中建立文件夹www，并把cordova-1.9.0.js拷进www文件夹中。

3) 在工程中加入corvoda-1.9.0.jar，通过buildpath导入工程中。

4) 在AndroidManifest.xml里加入以下代码：

android:largeScreens="true"

android:normalScreens="true"

android:smallScreens="true"

android:xlargeScreens="true"

android:resizeable="true"

android:anyDensity="true"/>

5) 把src中的Activity改成继承DroidGap，setContextView()改成

super.loadUrl("file:///android_asset/www/index.html")

并在www文件夹建立index.html文件，在html文件中导入cordova-1.9.0.js

完成以上步骤，PhoneGap环境配置成功

2.通过ajax请求服务器获取JSON数据

/**此方法实现字符串的排序功能

//通过ajax请求服务器取得数据

function request(){

// 建立一个XMLHttpRequest对象

var xmlhttp;

if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();}

else {// code for IE6, IE5旧版本浏览器使用以下代码

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

// open()三个参数意思：以GET/POST 方式，请求地址，是否使用异步

xmlhttp.open("GET","http://10.108.1.113:8080/PassengerService/servlet/mServlet",true);

// send()执行请求

xmlhttp.send();

xmlhttp.onreadystatechange=function(){

// 请求成功，解析执行结果，并存储到数据库中

if (xmlhttp.readyState==4 && xmlhttp.status==200){

var result=xmlhttp.responseText;

var shu = parserJSON(result);

}else{

// 请求失败，直接从数据库中查询

window.plugins.simpleplugin.selectDB();

}

}

}