HTML5

静态HTML与服务器跨域交互初探

由于在帮助实践与创新中心的伙伴们完成他们的创新实验项目,所以我加入到了考勤开发的项目中,因为要有一个Android的客户端为成果,但是自己又不会用原生的Java来开发,所以决定用之前学过的PhoneGap+HTML5来完成这项工作。
昨晚完成了整个APP的界面设计,所以就开始完成业务逻辑方面的代码工作,因为之前做过一个类似用PhoneGap的客户端,是通过jQuery+Ajax来和自己的电脑来进行交互所以没有遇到什么交互不了的问题,但是这次是通过Ajax来和远程服务器进行交互,结果Ajax一直显示连接错误。

[cc lang=”javascript” theme=”twitlight” width=”100%” height=”700″ lines=”40″ noborder=”true”]
$.ajax({
type:’post’,
url:’http://202……….’……..
success:function(data){},
error(x, s){
alert(‘与服务器连接不上’);
}
});
[/cc]
所以就觉得难以理解了,于是只能百度或者Google了,经过一系列的查询,发现其实这样的问题并不难解决,其实只需要它 JSONP,其实之前在学习jQuery中的Ajax的时候就已经接触过它,只不过那个时候没有在意它这么强大的功能。

JSONP为什么可以实现跨域操作呢?
JSONP方式的交互方式和Script方式是一样的。本身XMLHttpRequest本身不能跨域操作,但是script标签的src是可以跨域访问,使用jQuery的JSONP就可以实现跨域操作。

JSONP的使用格式?
function(json对象);(function是客户端定义的函数的名字)
url?callback =function (客户端需要按照此形式来定义格式)

不过通过JSONP从跨域服务器中返回的数据是不是一定是JSON数据,敝人还没有验证,不过为什么不使用JSON格式呢,可想而知与服务器交互应该控制流量的大小才是,因为JSON格式的轻量化,选择JSON格式似乎好处多多,如果想更深入的了解JSONP可以参考最下方的第一个参考网址。

下面看一个具体的例子来看如何使用JSONP?
无论是原生的JS,还是一些封装好的JS框架都对JSONP有了一个很好的支持,所以在这里我是通过jQuery来实现这种跨域操作。

1、首先我的界面是这个样子的,前端代码使用了jQuery Mobile框架
[cc lang=”html” theme=”twitlight” width=”100%” height=”700″ lines=”40″ noborder=”true”]

HTML5离线应用构建

这是一段简单的MANIFEST文件代码,除了第一行,剩下的部分是需要离线的文件(html/css/js及图片)

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

下面是一段比较复杂的manifest文件

CACHE MANIFEST
# 指定一个版本号
# version 1
# 该类别指定要缓存的资源文件
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# 指定不进行缓存的资源文件
NETWORK:
login.php
http://foocoder.com

# 每行指定两个文件,第一个为在线时使用的资源,第二个是离线时使用的资源
FALLBACK:
/main.py /static.html        #/main.py  为在线时使用的资源   static.html为离线时使用的资源
images/large/ images/offline.jpg       
*.html /offline.html

浅列Webapp相较于Native的优势与劣势

劣势
1、如果没有JavaScript,HTML5什么都不是,这句话有正确的地方。

2、如果没有JavaScript的库,如jQuery,就不会写JavaScript的脚本,这也有对的地方。
3、现在并没有针对HTML5开发移动Web App的集成开发工具。

4、安全问题:web app的安全问题完全可以说是一场噩梦,如果有恶意的黑客,想要了解你网站的代码或者用户的私密信息,通过浏览器的内置工具就可以来了解到想要了解的数据。

5、本地存储的功能是有限的,首先权限就是一个问题,需要介入的中间层面太多,比如说360等一些手机安全工具。这一点肯定比不上目前的native app能够更方便的操控本地数据。

6、数据同步问题:需要注意的问题是,在没有网络接入的时候并不能够登录web app,但HTML5可以解决这个问题,但最大的问题是:如果用户在浏览不同的浏览器时,会保存数据到当前的浏览器中,开发者是无法强迫用户去用上次登录的浏览器的。

7、HTML5开发的Web App有一点的确可以解决掉下载以及定期更新的弊病,节省了培养用户的成本,也减少了用户的流失,但最大的问题来了,用户如果对产品1.0的界面和操作非常钟爱,但是开发者却又将此App升级到了2.0,而用户并不喜欢2.0的界面也并不一喜欢它的操作,这时候更会遇到用户流失的危险。

8、浏览器的不兼容性还是会存在,尽管现在各大公司Microsoft和Google正在积极的迎合着HTML5的到来,但是历史留下的弊病还是会持续至少十年,可能会更多,如果实在喜欢HTML5来开发Web App,程序员们就要解决掉兼容性问题,浏览器厂商也要更加的给力才行。

优势
1、跨平台是最大的优势,只要用户的移动设备带有浏览器即可,不用苦苦学习Java来开发Android,也不用苦苦学习object-c来开发IOS,一次开发多地使用。
2、用户无需安装就可以使用而且是最新版,这一点在一定程度上节省了用户的流失。不用像现在这样天天提醒用户更新更新更新,很烦人。