奶牛博客-关注Linux、服务器运维、云服务和互联网的IT技术博客

关于XMLHttpRequest状态的讨论及处理方法

这两天把html5的Drag 、File API 和XMLHttpRequest Level 2的一些东西看了下，写了几个小demo，可以实现文件拖放进入浏览器，文件预览以及文件上传，打算过几天好好整理下，然后推到github上做个开源小项目。

今天主要是讨论下XMLHttpRequest的响应状态问题。我们知道，XMLHttpRequest的响应阶段有5个，分别是：

 请求未初始化 
 服务器连接已建立 
 请求已接收 
 请求处理中 
 请求已完成，且响应已就绪

我们是通过onreadystatechange来进行判断的，我们可以得到的状态只有4个。就是从服务器链接已建立到请求完成。昨天也搜索了下网络，对这个状态的分析并不是很多，奶牛自己测试了下，分享下。

首先，正常情况下，我们可以得到4个阶段的情况，一个成功的请求并得到响应的readyState及status如下：

 readyState:1   status:0 
 readyState:2   status:200 
 readyState:3   status:200 
 readyState:4   status:200

也就是说，当请求到达“请求已接收”阶段的时候就已经反馈回来了http status，就是我们看到的200，这个是正常的状态。

我们来设想这样一种情景：我们请求交互的服务器与我们的网络并不连通，或者说目标服务器已经下线、服务器无响应，会是种什么状态呢？应该如何处理呢？这是不是响应超时呢？我们来测试下：

 readyState:1   status:0 
 POST http://127.0.0.1/upload 
 readyState:2   status:0 
 readyState:4   status:0

通过结果我们可以看出，我们的请求已经发出，但是由于服务器对接收到的请求并没有应答，因此我们并没有得到服务器的响应状态，并且服务器的处理状态我们也不得而知，也就是为什么没有readyState3的原因，而在readyState4的阶段，我们得到的status是0，这也就是我们需要来处理的状态，即readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)，这个状态我们应该归结为error、abort、timeout还是其它呢？

奶牛把它分类到其它里面，处理方法在onreadystatechange里面处理。

 xhr.onreadystatechange = function() { 
      console.log("readyState:"+xhr.readyState+"   status:"+xhr.status); 
      if (xhr.readyState == 4 && xhr.status == 200) { 
           console.log("Request successful!");}; 
      if(xhr.readyState == 4 && xhr.status == 0){ 
           console.log("No response from server!"); 
      }; 
 };

对于服务器无应答无响应或者错误状态的处理方法都应放在onreadystatechange，http status有很多，可参考http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

在XMLHttpRequest Level 2里面有新增加一个timeout的设置及处理方法，超时是指request请求并没有在规定的时间内完成的一种情况，设置方法如下：

 xhr.timeout = 3000; 
 xhr.ontimeout = function(event){ 
     　　　　alert('time out !'); 
     　　}

这样子，如果在3秒内交互未完成，则提示超时并终止，我们假设一种极端的情况，既在1ms内服务器未能完成请求，这种状态很容易得到，我们来看下反馈信息：

 readyState:1   status:0 
 POST http://127.0.0.1/upload 
 readyState:4   status:0

当然，在非极端的情况下，也就是说在变化阶段2、3的时候如果超时，则readyState == 4的时候也有 status ==0 ，所以，我们可以把超时归结到readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)的状态，但是并不能把readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)的状态说是超时，因为超时是在服务器有反馈的时候才有效的，即在readyState ==2 时候status有具体响应值的时候，所以readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)的状态是包含超时状态的。

而对于readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)的状态可以用上文中的方法进行处理。

奶牛 | 2013年04月15日 0

github使用的基本方法

好吧，只说最基本的。

1.安装git环境

2.建立repo，从github的个人页面建立

3.初始化

mkdir nenew 
cd nenew 
touch README.md 
vim README.md 
git init 
git add README.md 
git commit -m "set up git repo by nenew" 
git remote add origin https://github.com/xxxx/nenew.git 
git push -u origin master

这时候你的第一条readme就已经更新到了你的repo。

4.之后的使用

touch a,b,c,d 
git add ./ 
git commit -a -m "a b c d files added" 
git push origin master

这是最基本的使用方法，当然，git提供了众多功能，可以参考：https://gitcafe.com/GitCafe/Help

奶牛 | 2013年04月12日 0

建站心得

JavaScript forEach方法

最近看了一些html5和js方面的书，受益匪浅，因为看的东西比较多，却都没有怎么静心来做整理，慢慢来吧，可能最近自己有点儿小紧张。今天跟大家分享下JavaScript的forEach方法（其实是从《HTML5程序设计》这本书里看到的一种方法）。

首先说下JavaScript的forEach的标准格式。

为数组中的每个元素执行指定操作。

array1.forEach(callbackfn[, thisArg])

参数	定义
array1	必需。一个数组对象。
callbackfn	必需。一个接受最多三个参数的函数。对于数组中的每个元素，forEach 都会调用 callbackfn 函数一次。
thisArg	可选。可在 callbackfn 函数中为其引用 this 关键字的对象。如果省略 thisArg，则 undefined 将用作 this 值。

如果 callbackfn 参数不是函数对象，则将引发 TypeError 异常。

对于数组中的每个元素，forEach 方法都会调用 callbackfn 函数一次（采用升序索引顺序）。不为数组中缺少的元素调用该回调函数。

除了数组对象之外，forEach 方法可由具有 length 属性且具有已按数字编制索引的属性名的任何对象使用。

回调函数语法

回调函数的语法如下所示：

function callbackfn(value, index, array1)

可使用最多三个参数来声明回调函数。

回调函数的参数如下所示。

回调参数	定义
value	数组元素的值。
index	数组元素的数字索引。
array1	包含该元素的数组对象。

修改数组对象

forEach 方法不直接修改原始数组，但回调函数可能会修改它。

好吧，上面是从微软的http://technet.microsoft.com/zh-cn/ff679980%28v=vs.85%29页面copy过来的，有兴趣的直接去那里看就好了。也就是说一般方法的格式是：

arrayx.forEach(function(value,index,arrayy){…})

但对于NodeList要用下面的写法。

[].forEach.call(lists,function(valule.index.arrayy){…})

Why can’t I use forEach or map on a NodeList?

NodeList are used very much like arrays and it would be tempting to use Array.prototype methods on them. This is, however, impossible.

JavaScript has an inheritance mechanism based on prototypes. Array instances inherit array methods (such as forEach or map) because their prototype chain looks like the following:

myArray --> Array.prototype --> Object.prototype --> null (the prototype chain of an object can be obtained by calling several times Object.getPrototypeOf)

forEach, map and the likes are own properties of the Array.prototype object.

Unlike arrays, NodeList prototype chain looks like the following:

myNodeList --> NodeList.prototype --> Object.prototype --> null

NodeList.prototype contains the item method, but none of the Array.prototype methods, so they cannot be used on NodeLists.

实例

[].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) { 
  localStorage['bucket' + i] = elem.getAttribute('data-bucket'); 
});

奶牛 | 2013年04月12日 1

Java

hibernate真心挺折腾的

还是比较习惯mysql直接用sql语句来查询，HQL还需要习惯习惯再习惯哇。

这两天折腾Hibernate真的挺纠结的，可能我对于对象这东西的理解太水了，先ermaster做了数据库，然后用hibernate的逆向工程生成了hibernate的对象类，然后就sb了。

映射那里仔细看下，才知道，表b外键关联表a主键的时候，并木有在表b的对象类中直接生成表a主键，而是直接把表a的对象给引入进去了。呃，解释有点儿混乱。这样子，就说设计的两个表吧，主表是main，有主键id，生成的对象类是Main，然后副表是profile，有主键profileid和外键id，生成的副表对象类是Profile。

Profile p = new Profile(); 
Main m = new Main(); 
p.setMain (m); 
session.saveOrUpdate(p)

这样子就把一个新的profile对象存上了，但是p并没有外键属性id，因此无法用HQL的from Profile where id = x来查询，但是其实p是有p.main的，所以要查询的时候使用from Profile where main.id = x来获得已添加的p对象。挺绕的。可能map映射改下就不用那么麻烦了。可能数据库的结构还要变，把isxxx的判断都放到main表中，明天再思考这个问题。

还有那个from xxx.class 1这个东东，明天再查查。

奶牛 | 2013年04月9日 3

Java Linux Windows

设计数据库ER模型图利器ERMaster

ERMaster是eclipse的一个插件，用于设计ER模型图。提供的功能包括：从数据库导入关系生成ER图，导出设计图，导出DDL数据定义语句等。目前完整支持的数据库包括 MySQL、PostgreSQL 和Oracle (developing) DB2 (developing) HSQLDB (developing) SQLITE (developing) SQLServer (developing)。

安装方法很简单，只要在eclipse的插件里面添加地址就可以安装了

http://ermaster.sourceforge.net/update-site/

使用也很方便，table直接拖出来，然后1toN NtoN之类的关系都可以直接搞定，并且可以导出ddl，在mysql下直接source下就生成数据表了，ermaster还可以生成测试数据，但是需要自己配置下，比如enum跟boolean的值会有问题。

总之还是很好用的，推荐下。

奶牛 | 2013年04月6日 0

建站心得

bootstrap的tooltip需要手动激活才会生效

我说怎么按照官方的代码写都不出效果呢，你妹，原来tooltip要手动激活的好不好，还有那个popover，需要tooltip跟手动激活。

下面来说说那个tooltip的使用，先引用下官方的原话：

For performance reasons,  
the tooltip and popover data-apis are opt in,  
meaning you must initialize them yourself.

翻译过来就是：出于性能原因的考虑，tooltip和popover的data-apis是可选的，这就意味着你必须手动初始化它们。好吧，手动就手动吧，让人好伤感的手动，而且也没有预留的可选api，就自己写了一个最简单的，js新手，能用就好了。

打开bootstrap.js，搜索tooltip，然后在tooltip的最后添加如下代码：

/* TOOLTIP API 
 * =================== */  
$('a[data-toggle=tooltip]').mouseover(function() { 
 $(this).tooltip('show'); 
  })

然后使用方法是：

<a href="#" data-toggle="tooltip" title="http://www.nenew.net">奶牛博客</a>

在a标签中增加data-toggle=“tooltip”，title为描述，然后就可以看到tooltip的效果了。

PS：JQuery确实好用很多，比如依据tag的选择，而且代码更加简练，好吧，希望有时间可以细致的学习下，最近看了好多东西，脑子有点儿乱，实现一样是一样吧。

奶牛 | 2013年04月1日 8

Linux Ubuntu

Gnome3.8已经发布

Gnome3.8已经发布，详细的发布记录可以看：https://help.gnome.org/misc/release-notes/3.8/

GNOME 3.8 的主要更新改进包括：集成应用搜索，隐私和分享设置，提醒过滤，新的经典模式，OwnCloud 集成，输入法整合，时钟、记事本、照片和其他应用的预览等等。

奶牛 | 2013年03月28日 2

网络杂记

Bootstrap离线帮助文档下载

前几天大双评论说bootstrap很好用，看了两天，试了下twitter的这个web前端框架，果然灰常强大，很多东西直接套用代码就可以了，前端直接可以不用浪费太多时间去搭配css什么的了，当然，有能力的自己修改、配色什么的也当然是没问题的咯，反正css就放在那里，想怎么处置就怎么处置咯，还有一些js也包含在里面了，直接用就可以，省去我等js小白的麻烦。

今天发上来官方的帮助文档的离线文档，以后写东西就可以直接看离线文档了，不用开网页找了，页面跟bootstrap的页面完全一样的，因为是git clone回来的，嘎嘎~~~

打个小包发上来：

在线版本：http://twitter.github.com/bootstrap/

离线版本：点此下载

奶牛 | 2013年03月17日 2

Java 网络杂记

Java调用Apache commons codec实现md5加密

org.apache.commons.codec.digest
Class DigestUtils

java.lang.Object
  org.apache.commons.codec.digest.DigestUtils

static String md5Hex(String data)
Calculates the MD5 digest and returns the value as a 32 character hex string.

apache commons codec下载：http://commons.apache.org/proper/commons-codec/download_codec.cgi

实现方法：

import org.apache.commons.codec.digest.*; 
 
public class md5another { 
    public void md5create(String input) { 
        System.out.print("32bit result:" + DigestUtils.md5Hex(input) + "\n"); 
        System.out.print("16bit result:" 
                + DigestUtils.md5Hex(input).substring(8, 24) + "\n"); 
    } 
 
    public static void main(String[] args) { 
 
        md5another a = new md5another(); 
        a.md5create("nenew"); 
    } 
}

奶牛 | 2013年03月15日 2

关于XMLHttpRequest状态的讨论及处理方法

github使用的基本方法

JavaScript forEach方法

回调函数语法

修改数组对象

Why can’t I use forEach or map on a NodeList?

实例

hibernate真心挺折腾的

设计数据库ER模型图利器ERMaster

bootstrap的tooltip需要手动激活才会生效

Gnome3.8已经发布

最近做的一些事儿

Bootstrap离线帮助文档下载

Java调用Apache commons codec实现md5加密

org.apache.commons.codec.digest
Class DigestUtils

分类

文章归档

回调函数语法

修改数组对象

Why can’t I use forEach or map on a NodeList?

实例

org.apache.commons.codec.digest Class DigestUtils

分类

文章归档

org.apache.commons.codec.digest
Class DigestUtils