三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

  XMLHttpRequest Level 2的跨域功能(CORS) //另附JSONP的跨域实现 作者:Neoxone    发表时间: 2012年12月3号,星期一     阅读:10,562 次  

XMLHttpRequest Level 2的功能已经大幅提升了,
参见:http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

我们知道,受到浏览器”同域限制“制约,以前的xhr对象是无法完成跨域请求的,而现在只需在Server端做一个访问控制,Client端再用xhr对象请求就行了,一般情况下Client并不需要设置,当然还有些相关的方法属性可供使用的,比如setRequestHeader,withCredentials。
服务端设置参见: https://developer.mozilla.org/en-US/docs/Server-Side_Access_Control

下面我们简单的做个demo
Server端代码(PHP):

  1. if($_SERVER['HTTP_ORIGIN'] == "http://www.cssass.com")
  2.         {
  3.             header('Access-Control-Allow-Origin: http://www.cssass.com');
  4.             header('Content-Type: text/plain');
  5.             if($_SERVER['REQUEST_METHOD'] == "GET")
  6.             {
  7.                 $arr = array( 
  8.                     'id' => '1',
  9.                     'name' => 'XMLHttpRequest Response' 
  10.                 );
  11.                 echo json_encode($arr);
  12.             };
  13.         };

http响应头设置参见:https://developer.mozilla.org/en-US/docs/HTTP_access_control#The_HTTP_response_headers

Client端代码:

正如你所知,ie下是不支持XMLHttpRequest Level 2的,不过ie8引入了自己的跨域对象XDomainRequest。(同时ie8下的xhr对象也引入了 timeou属性t和ontimeout方法)
所以我们做下兼容(不支持ie6,ie7):

接下来,我们来了解下JSONP这种在同域限制的情况下实现跨域请求(GET)的实现过程。
原理其实就是:以script标签的形式在页面中放置一个请求地址,该请求地址返回的数据格式为:

jsonp1354513528560({“id”:”2″,”name”:”JSON with Padding”})

如果jsonp1354513528560是一个预先定义好的JS方法,那么获取其参数(我们实际需要获取的数据)就顺理成章了。

以下是Client端的实现代码:

  1. (function(){
  2.         //jsonp的具体实现
  3.           var randomNum = (new Date).getTime(),
  4.               callName = null,
  5.               sendScriptRequest = function(url,id){
  6.                   //将请求地址以script标签形式插入到页面。(注定是GET请求)
  7.                 var head = document.getElementsByTagName("head")[0];
  8.                 var script = document.createElement("script");
  9.                 script.id = id;
  10.                 script.src = url;
  11.                 script.charset = 'utf-8';
  12.                 head.appendChild(script);
  13.             },
  14.             buildTempFunction = function(callback){
  15.                 //创建一个全局方法,并将方法名当做请求地址的一个参数
  16.                 callName = "jsonp" + randomNum++;
  17.                 window[ callName ] = function(data){
  18.                     callback(data);
  19.                     window[ callName ] = undefined;
  20.                     try{ 
  21.                         delete window[ callName ];
  22.                         //var jsNode = document.getElementById(callName);
  23.                         //jsNode.parentElement.removeChild(jsNode);  //执行全局方法后,将script标签删除
  24.                     } catch(e){}
  25.                 };
  26.                 return callName;
  27.             },
  28.             $jsonp = function(url,params){
  29.                 //生成GET请求地址
  30.                   params.callback = buildTempFunction(params.callback);
  31.                   url += (url.indexOf("?")>0 ) ? "" : "?" ;
  32.                   for(var i in params)
  33.                       url += "&" + i + "=" + params[i];
  34.                 sendScriptRequest(url,callName);
  35.               };
  36.             //对外开放接口:$jsonp
  37.             /**
  38.             * @$jsonp JSONP方法
  39.             * @param {String} url 请求地址
  40.             * @param {Object} params 请求参数
  41.             */ 
  42.               if (!window.$jsonp)
  43.                    window.$jsonp = $jsonp;
  44.     })();

Server端很简单,只需拼接输出一个js的执行方法即可。

  1. $jsonp = $_GET['callback']; //请求端传递的callback参数,作为输出的方法名
  2.         $arr = array( 
  3.             'id' => '2',
  4.             'name' => 'JSON with Padding' 
  5.         );
  6.         echo $jsonp, '(', json_encode($arr), ')';

演示:

因为大多数网站不会开启server端的访问控制,所以xhr2目前比较适用于自己所属的几个域名下网站的连结,并且放弃ie6、7。
JSONP应用倒是很普遍,很多网站开放API的时候,也会用jsonp的形式给js提供接口,这样一来,使得ajax也能直接调用到API,当然只限一些普通的无需授权即用的接口。

然而很多网站并未开放API, 也未在服务端设置callback之类的参数,而我们也不想自己写server端代码去抓取。
那么我们可以试试中间代理:http://developer.yahoo.com/yql/

演示:我们抓取一下我很喜欢的一个电影网站(dianying.fm)的数据。

   

  用File API做图片预览功能 作者:Neoxone    发表时间: 2012年11月28号,星期三     阅读:7,748 次  

图片上传预览应该是个蛮实用的功能。下面利用html5 的 Files API实现如下:

关于Files API本身不做详述,可另行参考:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

HTML5的 file input标签支持multipleaccept ,前一个属性可控制多文件选择,后一个控制上传的文件类型。
files对象可不是单个的file对象,单个的file对象包含其中,而单个的file主要包含如下key/value:

name: “F_5cac2.gif”
size: 3589202
type: “image/gif”
在firefox下,还开放了一项 mozFullPath ,是文件完整的本地路径。(不好意思,这个属性值是取不出来的,只有火狐浏览器本身能识别)

另外,做了一下ie和opera的兼容。
ie下面没有直接设置img的src属性,而采用了AlphaImageLoader滤镜,这也是为了兼容考虑,我记得以前ie7是无法获取文件的完整路径的,这个待考,如果能获取完整路径,直接设置src即可。

而opera(目前为Presto/2.12.388,Version/12.11)因为不支持createObjectURL/revokeObjectURL方法,参见:http://www.opera.com/docs/specs/presto2.12/apis/#file
所以我们就用了FileReader对象的readAsDataURL()方法将 blob(binary large object)数据转换为一个Data URL(参见http://www.opera.com/docs/specs/presto2.11/file/#blob),放入img标签进行显示。值得一提的是,使用FileReader的方式同样适用于Firefox,webkit的浏览器。

   

  说说 HTML5 Device APIs 作者:Neoxone    发表时间: 2012年10月29号,星期一     阅读:6,378 次  

太久没有更新blog了,写篇文章充个数。

三年前写了一篇无用文章:《说说HTML5》,今天再写一篇无用的《说说Device APIs》。

Device APIs是什么?
移动web app要打败 native app,就靠它了

W3C有个一个Device APIs的计划: http://www.w3.org/2009/dap/
旨在为web端提供获取设备信息、调用设备接口的API,包括:电量状态,网络状态,光感,接近感应,蜂鸣,热感应,湿度感应,压力感应等等一堆。看到这些词,大家可能明白这对于移动开发意味着什么,通过这些接口,web页面就能调用到移动设备的各种感应装置了。

但是请注意:目前这些都未形成标准,大多数都在工作草案当中,而有厂商实现的更是寥寥无几,所以短期在各家浏览器中实现那更是无此可能的,这也在一个重要方面上击碎了网络上吹嘘着web app即将代替native app的童话。

我觉得什么时候Device APIs(不限于目前提出的api)得到的广泛支持,web app才有可能一统天下,因为到时候native app的功能都完全可以由html5来开发了。当然这一切也还只处于可能阶段。

mozila管自己的Device APIs叫web APIs (https://wiki.mozilla.org/WebAPI),
看看目前可用的:https://developer.mozilla.org/en-US/docs/WebAPI 少的可怜吧。

Battery API :
这个网上demo有挺多了,http://davidwalsh.name/demo/battery-api.php 用于显示设备电量。

Network information API :
MDC上带了例子:https://developer.mozilla.org/en-US/docs/DOM/window.navigator.connection
firefox12以上支持,还有webkit20应该也已经实现了: http://peter.sh/2012/04/color-input-the-network-information-api-and-chromium-20/

Vibration API:
蜂鸣震动接口。实现代码:window.navigator.mozVibrate()
你可以通过手机上的浏览器(webkit的或firefox的都可以)访问:

由于Device APIs的完善度太低,本文不继续做空谈了。
但是,一旦Device APIs得到实现,对web开发界来说,类似于经历一次盘古开天了,而对已web前端开发者,则将类似于担任起这新世界的清道夫的角色。

   

  (Three.js) 页面展现3D模型 作者:Neoxone    发表时间: 2012年02月24号,星期五     阅读:45,104 次  

CSS3的3d-Transform,Canvas,SVG,WebGL等等技术的出现和发展,正将网页的3D化慢慢变得简单友好,但是3D建模毕竟有其很高的专业性,所以如果拥有一个内心强大,接口简洁的库就能使我们得心应手许多。Three.js便是备受推崇的一个,尽管API的变动,简陋的文档会让我们的上手比较困难。

下面我提供一个入门Demo,及一个用Three.js展示通用的3D模型格式的Demo。(注意:确保你使用的浏览器支持了Canvas,及WebGL。拥有一个先进的浏览器,将为你带来更好的上网体验。Test

下面是入门Demo,加了注释。详细入门教程可以到这里Getting Started with Three.js

考虑到Opera还不支持WebGL,上面使用了Canvas模式渲染。但WebGL的渲染模式要比Canvas快的要多的多。

下面是一个展示机器人MGA-411 Mangusa模型的Demo。
Three.js可以调用以Json格式存储模型信息的js文件来创建模型。模型你可以自己在3D软件上建模完成,或在网上下载。至于模型格式,你可以通过three.js提供的插件在Blender这款开源3D制作软件中将一些3D模型格式,如3ds,obj等,转换成符合three.js标准的js格式。

   

  Firefox10的3D Transform 作者:Neoxone    发表时间: 2012年02月1号,星期三     阅读:12,328 次  

之前写了一篇CSS3的崛起——体验webkit的3D-Effect
随着firefox10正式版发布,firefox也支持3D Transform了,所以补充一篇,将上篇中的代码移植过来,支持firefox。

这里先穿插介绍下firefox10的新特性,firefox10除了支持3D Transform,还提供了Fullscreen API,令人兴奋吧。另外firefox10成为Mozila首个“长期支持版本”(Extended Support Release,简称“ESR”),这种当然是市场考虑啦,至于是什么用意和市场反响我们就不探讨了。

下面是演示demo,只支持firefox10。 chrome浏览器的用户可以参考上一篇。

去除一些效果

使用preserve-3d,实现全方位3D

最后说明一下firefox和webkit间使用的一点差别:
火狐10下的3D Transforms在设置perspective属性值时必须带单位px,webkit可以省略;
另外,webkit在用transition-property设置transform这个值时,可以不用前缀,而firefox需要写上-moz-transform;