snandy

创建xhr时异常处理-Ajax之六

摘要：前面几篇一直采用最精简的方式创建Ajax的核心XMLHttpRequest对象var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');没有考虑其可能出现的异常，即创建失败。其实个人认为以上创建方式创建失败的几率非常之少，起码在IE6/7/8/Firefox/Safari/Chrome/Opera如此，其它浏览器就不知了。但作为一个基础库还是完善下，如果出现创建失败，failure的第二个参数msg将会被赋值为"create xhr f 阅读全文

posted @ 2011-04-27 06:17 snandy 阅读(5436) 评论(2) 推荐(1) 编辑

仅IE9/10/(Opera)同时支持script元素的onload和onreadystatechange事件

摘要：如下 IE9/10同时支持script元素的onload和onreadystatechange事件结果：IE6/7/8 : 弹出2IE9/10 : 弹出2，1Firefox/Safari/Chrome/Opera : 弹出1测试结果可以看出，IE9后已经开始支持script的onl... 阅读全文

posted @ 2011-04-26 17:28 snandy 阅读(6901) 评论(2) 推荐(4) 编辑

各浏览器对link标签onload/onreadystatechange事件支持的差异

摘要： 1，onload事件<!DOCTYPE HTML><HTML> <HEAD> <meta charset="utf-8" /> <title>Link Element onload</title> <link type="text/css" rel="stylesheet" href="http://i3.sinaimg.cn/rny/webface/login/css/login101021_min.css" onload=" 阅读全文

posted @ 2011-04-26 12:44 snandy 阅读(6832) 评论(0) 推荐(4) 编辑

处理超时-Ajax之五

摘要：上一篇只是检查是否超时，超时后却不做任何处理。这里如果超时，会给failure第二个参数msg赋值为“request timeout”。这样使用者能清楚的知道一次HTTP请求的细节。实现细节较为诡异，慢慢体会。这里timeout的效果和JQuery，Ext是一样的。如下Ajax.text('../servlet/Ajax',{ timeout : 2000, success : function(result){}, failure : function(xhr,msg){ alert(msg); }});完整源码Ajax =function(){ function reque 阅读全文

posted @ 2011-04-26 08:18 snandy 阅读(8565) 评论(1) 推荐(5) 编辑

检查超时-Ajax之四

摘要：有时发出一个请求，后端什么时候返回前端并不清楚。有可能是1秒，3秒甚至更长时间。因此有必要添加一个参数来设置等待的时间，如果在设定的时间内没有返回结果则放弃该次请求。实现思路：发出请求后指定一个时间，如超过该时间没有返回结果则忽略。window对象的setTimeout方法再次起作用了(setTimeout能解决很多IE下古怪的bug)代码如下：var timeout = opt.timeout || 0;//指定是否启用请求超时处理，不传参数timeout则忽略var isTimeout = false; //一个标志位，是否超时if(timeout>0){ setTimeout(f 阅读全文

posted @ 2011-04-26 06:36 snandy 阅读(3511) 评论(2) 推荐(2) 编辑

结果分类-Ajax之三

摘要： Ajax中的x指的是XML，早期的数据格式都喜欢用XML，然后一层层的解析。当然简单的也会返回HTML(或称HTML片段)。现在使用JSON格式的也很多。根据不同需求，给Ajax对象添加了三个实用方法：Ajax.text、Ajax.json、Ajax.xml。 Ajax.text返回纯文本，即responseText Ajax.json返回json，即会将responseText解析成js对象 Ajax.xml返回xml文档，即responseXML 使用方式与Ajax.request相同，第一个参数是请求url，第二个是配置参数。完整代码Ajax = function(){ function 阅读全文

posted @ 2011-04-25 18:30 snandy 阅读(2166) 评论(2) 推荐(4) 编辑

html5中可通过document.head获取head元素

摘要：今天，看一个国外网站发现人家获取head元素如下var head = document.head || document.getElementsByTagName('head')[0];后面的是我们常用的方式，前面的document.head 着实第一次见。查资料发现原来是html5的东东。的确简单了，一个属性搞定。当然，IE6/7/8不支持。IE9/Safari/Chrome/FF/Opera均支持（最新版本）。记录下。html4中HTMLDocument接口如下html5中HTMLDocument接口如下相关：http://www.w3.org/TR/DOM-Level-2 阅读全文

posted @ 2011-04-25 16:33 snandy 阅读(8380) 评论(2) 推荐(4) 编辑

改造请求参数-Ajax之二

摘要：接上篇。引入了一个私有函数_serialize，它会把js对象串行化成HTTP所需参数模式，接受如下两种结构{name:'jack',age:20} --> name=jack&age=20{fruit:['apple','banana','orange']} --> fruit=apple&fruit=banana&fruit=orange请求后台的一个servlet，发送参数name=jack,age=20，默认使用异步，GET方式。现在data可以如下了Ajax.request(' 阅读全文

posted @ 2011-04-25 09:39 snandy 阅读(3486) 评论(3) 推荐(5) 编辑

基本的封装-Ajax之一

摘要： Ajax，或许已经是老掉牙的话题。我学习总结一下。大概会有6篇，从基本的Ajax直至高级的应用。最后会形成一个实用的Ajax工具库。创建一个基本的Ajax应用不需要太多的代码，大概三个步骤，几十行代码即可。 1，创建Ajax的核心对象XMLHttpRequest 因为浏览器之间的不兼容，IE7之前的版本并没有原生的XMLHttpRequest对象却实现为ActiveX对象。互联网及各种书籍中有着多种创建方式，有的复杂很多行代码，有的则简洁很少代码。当然复杂的考虑的情形更多一些。如下几乎将IE中所有的情况都考虑到了function cretaeXHR(){ try{ return new XML 阅读全文

posted @ 2011-04-25 08:36 snandy 阅读(11815) 评论(9) 推荐(6) 编辑

JavaScript中实现私有属性的写类方式（2）

摘要：上一篇写了个工具函数$class，这篇再完善以下。实现以下功能1，继承2，子类继承父类时，不继承父类的私有属性/** * @param {String} className * @param {String/Function} superCls * @param {Function} classImp */function $class(className, superCls, classImp){ if(superCls === '') superCls = Object; function clazz(){ if(typeof this.init == "func 阅读全文

posted @ 2011-04-18 19:24 snandy 阅读(2558) 评论(7) 推荐(0) 编辑

JavaScript中实现私有属性的写类方式（1）

摘要：之前讨论过JavaScript中的写类方式。但没有讨论私有的实现。这篇看下。我们知道JS中私有属性的实现本质就是 var + closure。如下function Person(n, a){ // public this.name = n; // private var age = a; this.getName = function(){ return this.name; } this.getAge = function(){ return age; }}测试如下，age是私有的，使用点操作符无法获取到，而只能使用getName方法。var p = new Person('jack 阅读全文

posted @ 2011-04-18 17:29 snandy 阅读(3984) 评论(5) 推荐(0) 编辑

别了，JavaScript中的isXX系列

摘要：我们很容易被漂亮的代码吸引，也不知不觉的在自己的代码库中加入这些。却没有冷静的想过它们的优劣。这不，我就收集了一系列形如 “是否为……？” 的判断的boolean函数。isNull: function(a){ return a === null;},isUndefined: function(a){ return a === undefined;},isNumber: function(a){ return typeof a === 'number';},isString: function(a){ return typeof a === 'string';}, 阅读全文

posted @ 2011-04-16 11:35 snandy 阅读(4065) 评论(11) 推荐(2) 编辑

JavaScript模态对话框类

摘要： /*** JavaScript ModelDialog v0.1** new ModelDialog({ * caption 标题 '对话框标题'(默认) * template 主体内容 ''(默认) * dialogCls 对话框className 'md-dialog'(默认) * headCls 头部className 'md-head'(默认) * btnCloseCls 关闭按钮className 'md-close'(默认) * bodyCls 主体className 'md-body' 阅读全文

posted @ 2011-04-15 09:29 snandy 阅读(2451) 评论(15) 推荐(4) 编辑

Javascript自由拖拽类

摘要：基本拖拽 jQuery插件效果拖拽状态：x:0, y:0 Drag me. Drag me. 任意方向水平方向垂直方向停止拖拽开启拖拽恢复初始状态 dragdrop.zip 阅读全文

posted @ 2011-04-14 08:24 snandy 阅读(6641) 评论(30) 推荐(28) 编辑

Javascript自动补全类(1)

摘要： /** * new InputSuggest({ * input HTMLInputElement 必选 * data Array ['sina.cn','sina.com','2008.sina.com','vip.sina.com.cn'] 必选 * containerCls 容器className * itemCls 容器子项className * activeCls 高亮子项className * width 宽度设置此项将覆盖containerCls的width * opacity 透明度设置此项将覆盖contain 阅读全文

posted @ 2011-04-13 09:12 snandy 阅读(2611) 评论(6) 推荐(6) 编辑

IE6/7 and IE8/9(quirks mode)中Fieldset元素设置宽度后渲染成行内元素Bug

摘要：如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>IE6/7 and IE8/9(quirks mode)中Fieldset元素设置宽度后将表现为行内元素</title> </head> <body> <fieldset style="width:200px;background:gold"> FIELDSET </fieldset> <span style= 阅读全文

posted @ 2011-04-11 18:21 snandy 阅读(2764) 评论(2) 推荐(3) 编辑

事件模块的演变（5）

摘要：上一篇正式推出了我的事件模块event-v0.1，已经搭起了它的初始框架。或许有人要说，与众多JS库或框架相比，它还没有解决事件对象的兼容性问题。是的，我故意将此放到后续补充。因为事件对象的兼容性问题太多了，太繁琐了。这篇我将引入一个私有的_fixEvent函数，add中将调用该函数。_fixEvent将修复（或称包装）原生事件对象，返回一个标准的统一接口的事件对象。如下function _fixEvent( evt, el ) { var props = "altKey attrChange attrName bubbles button cancelable charCode c 阅读全文

posted @ 2011-04-09 12:00 snandy 阅读(1719) 评论(0) 推荐(2) 编辑

事件模块的演变（4）

摘要：上一篇解决了IE6/7/8中同一个类型事件的多个handler执行无序的情况，为此改动也是较大的。实现几乎与前一个版本完全不同。但好处也是明显的。有时需要添加只执行一次的事件handler，为此给add方法添加第四个参数one，one为true则该事件handler只执行一次。<div id="d1" style="width:200px;height:200px;background:gold;"></div><script>var el = document.getElementById('d1') 阅读全文

posted @ 2011-04-09 10:19 snandy 阅读(1594) 评论(1) 推荐(0) 编辑

事件模块的演变（3）

摘要：上一篇中的add有个问题，对同一类型事件添加多个hanlder时，IE6/7/8下会无序，如IE9/Firefox/Safari/Chomre/Opera会依次输出1,2,3,4,5。但IE6/7/8中则不一定。为解决所有浏览器中多个事件handler有序执行，我们需要一个队列来管理所有的handl... 阅读全文

posted @ 2011-04-08 20:50 snandy 阅读(1702) 评论(3) 推荐(4) 编辑

事件模块的演变（2）

摘要：上一篇我们封装了一个addEvent，1，解决了IE6/7/8下事件handler中this为window的错误。2，并且统一了事件对象作为事件handler的第一个参数传入。这篇把对应的删除事件的函数补上。上一篇中fn在IE6/7/8中实际上被包装了，IE6/7/8中真正的handler是el["e"+fn]。因此删除时要用到它。同时将两个方法挂在一个对象E上，add，remove分别添加和删除事件。E = { //添加事件 add : function(el, type, fn){ if(el.addEventListener){ el.addEventListener 阅读全文

posted @ 2011-04-08 17:32 snandy 阅读(1851) 评论(0) 推荐(0) 编辑

事件模块的演变（1）

摘要：本篇开始将回顾下Javascript的事件机制。同时会从一个最小的函数开始写到最后一个具有完整功能的，强大的事件模块。为叙述方便将响应函数/回调函数/事件Listener/事件handler都称为事件handler。先看看页面中添加事件的几种方式1，直接将JS代码写在HTML上<div onclick="alert(4);">Div1 Element</div>HTML Element元素自身就拥有了很多onXXX属性，只需将JS代码赋值给其就可以了。赋值给onXXX的字符串将作为响应函数的函数体（FunctionBody）。大概这是上世纪90年代的阅读全文

posted @ 2011-04-08 16:13 snandy 阅读(2003) 评论(4) 推荐(5) 编辑

attachEvent在IE6/7/8下添加同一个类型事件的多个handler执行倒序

摘要：如下，<div id="d1" style="width:200px;height:200px;background:gold;"></div><script type="text/javascript"> function addEvent(el, type, fn){ if(el.addEventListener){ el.addEventListener(type, fn, false); }else{ el.attachEvent('on' + type, fn); } } 阅读全文

posted @ 2011-04-08 14:17 snandy 阅读(1685) 评论(5) 推荐(4) 编辑

仅IE6/7/8中添加同一个事件handler多次触发后会执行多次

摘要：如下<div id="d1" style="width:200px;height:200px;background:gold;"></div><script> function addEvent(el, type, fn){ if(el.addEventListener){ el.addEventListener(type, fn, false); }else if(el.attachEvent){ el.attachEvent('on'+type, fn); } } function handler( 阅读全文

posted @ 2011-04-08 09:25 snandy 阅读(2144) 评论(11) 推荐(2) 编辑

Safari5中alert的BUG

摘要：如下，alert无限循环下去<!DOCTYPE htmlt><html><head><meta charset="utf-8"></head><body onclick="alert(3)"><p>Safari alert Bug</p></body></html>猜测Safari5中将点击alert框的确定按钮也当成点击body了。事件一直冒泡到弹出框上。阅读全文

posted @ 2011-04-07 17:54 snandy 阅读(3215) 评论(4) 推荐(0) 编辑

单例/单体模式(Singleton)

摘要：首先，单例模式是对象的创建模式之一，此外还包括工厂模式。单例模式的三个特点：1，该类只有一个实例2，该类自行创建该实例(在该类内部创建自身的实例对象)3，向整个系统公开这个实例接口Java中大概是这个样子class Singleton { //私有，静态的类自身实例 private static Singleton instance = new Singleton(); //私有的构造子(构造器,构造函数,构造方法) private Singleton(){} //公开，静态的工厂方法 public static Singleton getInstance() { return ins... 阅读全文

posted @ 2011-04-07 14:41 snandy 阅读(65278) 评论(6) 推荐(22) 编辑