Pages: 5/282 First page Previous page 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Next page Final page [ View by Articles | List ]
Aug 4

随着Web App的发展,越来越多的移动端App使用HTML5的方式来开发,除了一些HybridApp以外,其他一部分Web App还是通过浏览器来访问的,通过浏览器访问就需要联网发送请求,这样就使得用户在离线的状态下无法使用App,同时Web App中一部分资源并不是经常改变,并不需要每次都向服务器发出请求,出于这些原因,HTML5提出的一个新的特性:离线存储。通过离线存储,我们可以通过把需要离线存储在本地的文件列在一个manifest配置文件中,这样即使在离线的情况下,用户也可以正常使用App。

怎么用

首先来讲解下离线存储的使用方法,说起来也很简单。只要在你的页面头部像下面一样加入一个manifest的属性就可以了。

<!DOCTYPE HTML> <html manifest = "cache.manifest"> ... </html>

然后cache.manifest文件的书写方式,就像下面这样:

CACHE MANIFEST #v0.11  CACHE:  js/app.js css/style.css  NETWORK: resourse/logo.png  FALLBACK: / /offline.html

离线存储的manifest一般由三个部分组成:
1.CACHE:表示需要离线存储的资源列表,由于包含manifest文件的页面将被自动离线存储,所以不需要把页面自身也列出来。
2.NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问,他们不会被离线存储,所以在离线情况下无法使用这些资源。不过,如果在CACHE和NETWORK中有一个相同的资源,那么这个资源还是会被离线存储,也就是说CACHE的优先级更高。
3.FALLBACK:表示如果访问第一个资源失败,那么就使用第二个资源来替换他,比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了,那么就去访问offline.html。

浏览器怎么解析manifest

那么浏览器是怎么对离线的资源进行管理和加载的呢?这里需要分两种情况来讨论。

        
  •     

    在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。

        
  •     
  •     

    离线的情况下,浏览器就直接使用离线存储的资源。

Aug 3

 A curated list of delightful Node.js packages and resources.

Inspired by the awesome list thing.

Packages

Jul 29
弹出一个半透明遮罩层,结果点击穿透,能点到层下的按钮,触摸屏能触摸滚动下面的页面,以下解决,拿走不谢!
禁止点击穿透,禁止触摸穿透


css


js

May 21
有时听几首不错的曲子让人很安静,静静的思考问题,这是很好的,也是难得的!
班得瑞《haven on earth》


班得瑞的《莱茵河波影》
May 17
A new beginning……
Highslide JS
May 13
The jqXHR objects returned by $.ajax() as of jQuery 1.5 implement the Promise interface, giving them all the properties, methods, and behavior of a Promise (see Deferred object for more information). These methods take one or more function arguments that are called when the $.ajax() request terminates. This allows you to assign multiple callbacks on a single request, and even to assign callbacks after the request may have completed. (If the request is already complete, the callback is fired immediately.) Available Promise methods of the jqXHR object include:

jqXHR.done(function( data, textStatus, jqXHR ) {});
An alternative construct to the success callback option, the .done() method replaces the deprecated jqXHR.success() method. Refer to deferred.done() for implementation details.

jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
An alternative construct to the error callback option, the .fail() method replaces the deprecated .error() method. Refer to deferred.fail() for implementation details.

jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });
An alternative construct to the complete callback option, the .always() method replaces the deprecated .complete() method.

In response to a successful request, the function's arguments are the same as those of .done(): data, textStatus, and the jqXHR object. For failed requests the arguments are the same as those of .fail(): the jqXHR object, textStatus, and errorThrown. Refer to deferred.always() for implementation details.

jqXHR.then(function( data, textStatus, jqXHR ) {}, function( jqXHR, textStatus, errorThrown ) {});
Incorporates the functionality of the .done() and .fail() methods, allowing (as of jQuery 1.8) the underlying Promise to be manipulated. Refer to deferred.then() for implementation details.

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

The this reference within all callbacks is the object in the context option passed to $.ajax in the settings; if context is not specified, this is a reference to the Ajax settings themselves.

For backward compatibility with XMLHttpRequest, a jqXHR object will expose the following properties and methods:

readyState
status
statusText
responseXML and/or responseText when the underlying request responded with xml and/or text, respectively
setRequestHeader(name, value) which departs from the standard by replacing the old value with the new one rather than concatenating the new value to the old one
getAllResponseHeaders()
getResponseHeader()
statusCode()
abort()
No onreadystatechange mechanism is provided, however, since done, fail, always, and statusCode cover all conceivable requirements.

Callback Function Queues

The beforeSend, error, dataFilter, success and complete options all accept callback functions that are invoked at the appropriate times.

As of jQuery 1.5, the fail and done, and, as of jQuery 1.6, always callback hooks are first-in, first-out managed queues, allowing for more than one callback for each hook. See Deferred object methods, which are implemented internally for these $.ajax() callback hooks.

The callback hooks provided by $.ajax() are as follows:

beforeSend callback option is invoked; it receives the jqXHR object and the settings object as parameters.
error callback option is invoked, if the request fails. It receives the jqXHR, a string indicating the error type, and an exception object if applicable. Some built-in errors will provide a string as the exception object: "abort", "timeout", "No Transport".
dataFilter callback option is invoked immediately upon successful receipt of response data. It receives the returned data and the value of dataType, and must return the (possibly altered) data to pass on to success.
success callback option is invoked, if the request succeeds. It receives the returned data, a string containing the success code, and the jqXHR object.
Promise callbacks — .done(), .fail(), .always(), and .then() — are invoked, in the order they are registered.
complete callback option fires, when the request finishes, whether in failure or success. It receives the jqXHR object, as well as a string containing the success or error code.

官方文档写的很详细:http://api.jquery.com/jquery.ajax/

注意:complete和error时的textStatus不一样。



May 13
使用nginx搭建https服务器,最近在研究nginx,整好遇到一个需求就是希望服务器与客户端之间传输内容是加密的,防止中间监听泄露信息,但是去证书服务商那边申请证书又不合算,因为访问服务器的都是内部人士,所以自己给自己颁发证书,忽略掉浏览器的不信任警报即可。下面是颁发证书和配置过程。

首先确保机器上安装了openssl和openssl-devel

至此证书已经生成完毕,下面就是配置nginx

然后重启nginx即可。

ps: 如果出现“[emerg] 10464#0: unknown directive "ssl" in /usr/local/nginx-0.6.32/conf/nginx.conf:74”则说明没有将ssl模块编译进nginx,在configure的时候加上“--with-http_ssl_module”即可^^

至此已经完成了https服务器搭建,但如何让浏览器信任自己颁发的证书呢?

今天终于研究捣鼓出来了,只要将之前生成的server.crt文件导入到系统的证书管理器就行了,具体方法:

控制面板 -> Internet选项 -> 内容 -> 发行者 -> 受信任的根证书颁发机构 -> 导入 -》选择server.crt
May 13
Highslide JS
HTTP请求方法并不是只有GET和POST,只是最常用的。据RFC2616标准(现行的HTTP/1.1)得知,通常有以下8种方法:OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE和CONNECT。

使用node作为apiserver提供数据,h5ajax请求是无论如何过不了,
Highslide JS
试探请求

Highslide JS
真实请求

最终为node只支持了post和get,而没有对request method为options的请求做处理
添加如下代码搞定问题

Pages: 5/282 First page Previous page 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Next page Final page [ View by Articles | List ]