my blog my blog

Tag: ajax
Wordpress 建站心得
prism.js在ajax载入后失效问题解决方案

奶牛的小博客用了个ajax的主题，但是发现和prism.js有些小冲突，就是在ajax载入文章后，格式化的代码不能正常输出，其实解决方法也很简单，再次调用prism.js格式化一次即可。

Prism.highlightAll();

在ajax的回调函数里面重新highlight所有对象即可。

这个函数要放在ajax的回调函数里面，就是.done或者.success的回调函数里面，ajax升级的奶牛都快不认识了。

奶牛 | 2018年12月26日
Java 建站心得 网络杂记
小结

 

1.button

js监听一个button的click事件，preventDefault()无效，不一定是js没写对，而是button有没有定义type=“button”，在一个form表单中，button如果不定义的话，默认就做submit处理了，所以请求直接就发出去了，监听也没用。

2.hibernate查询分页

最简单的还是hibernate的query直接在querystring中进行限定，限定setFirstResult()和setMaxResults()。比如我们要从第11条记录开始查询，那么我们可以这样子写

  1. String queryString = "select m from Profile as m where m." 
  2.                     + propertyName1 + "= ? and m." + propertyName2 + "= ?"; 
  3.             Query queryObject = getSession().createQuery(queryString) 
  4.                     .setFirstResult(10).setMaxResults(10); 
  5.             queryObject.setParameter(0, value1); 
  6.             queryObject.setParameter(1, value2); 
  7.             List<?> s = (List<?>) queryObject.list(); 
  8.             return s; 

这样子返回一个查询结果的list，然后迭代出来就可以了，当然，这只是查询部分的，如果要写分页的话，还需要count()等来辅助进行。

3.jquery的.on()

如果我们直接用$(document).ready(function(){})来做的话，对于使用ajax调用产生的新的dom元素，用一般的.click()等事件监听是不会起到作用的，在老版本的jQuery中使用.live()可以来进行对未来元素和现有元素的监听工作，但是新版本的建议是使用.on()来进行处理，这样子新生成的元素也就自然而然的可以监听到了。

4.jquery的遍历

遍历的话jquery的方法真的很好用，特别是选择器，很方便，.parent()、.children()、.prev()、.next()用起来非常省事儿。

5.jquery的ajax

  1. var data = {"userid" : $('input[name="userid"]').val(), 
  2. "phonenum" : $('input[name="phonenum"]').val(), 
  3. "email" : $('input[name="email"]').val() 
  4. }; 
  5. $.post('profile-update', data, function(data, textStatus, jqXHR) ｛ 
  6. if (jqXHR.success(function() { 
  7.     alert("success"); 
  8. }) 
  9. ); 

当然，也可以直接连缀上一个.success()来处理，可以看http://api.jquery.com/jQuery.post/

6.hibernate的casecade级联

对于一对多或者多对多的情况，如果删除主表中的记录，那么以主表的主键做外键的其它表就会产生错误，导致删除失败，需要设置hibernate的配置文件casecade为delete，这样子删除的时候就可以自动把这些也删除了，当然还有其它的选项，感兴趣的话可以直接查找casecade的相关内容。

奶牛 | 2013年05月2日
建站心得
关于XMLHttpRequest状态的讨论及处理方法

 

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

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

     
  1. 请求未初始化 
    2.  
  2. 服务器连接已建立 
    3.  
  3. 请求已接收 
    4.  
  4. 请求处理中 
    5.  
  5. 请求已完成，且响应已就绪 
    6.

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

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

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

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

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

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

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

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

     
  1. xhr.onreadystatechange = function() { 
    2.  
  2.      console.log("readyState:"+xhr.readyState+"   status:"+xhr.status); 
    3.  
  3.      if (xhr.readyState == 4 && xhr.status == 200) { 
    4.  
  4.           console.log("Request successful!");}; 
    5.  
  5.      if(xhr.readyState == 4 && xhr.status == 0){ 
    6.  
  6.           console.log("No response from server!"); 
    7.  
  7.      }; 
    8.  
  8. }; 
    9.

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

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

     
  1. xhr.timeout = 3000; 
    2.  
  2. xhr.ontimeout = function(event){ 
    3.  
  3.     　　　　alert('time out !'); 
    4.  
  4.     　　} 
    5.

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

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

当然，在非极端的情况下，也就是说在变化阶段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日