﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-hoojo-随笔分类-Ajax【富客户端技术】</title><link>http://www.blogjava.net/hoojo/category/49160.html</link><description>学习在于积累：滴水可以石穿！学而不思则罔，思而不学则殆！ </description><language>zh-cn</language><lastBuildDate>Mon, 13 Aug 2012 09:34:26 GMT</lastBuildDate><pubDate>Mon, 13 Aug 2012 09:34:26 GMT</pubDate><ttl>60</ttl><item><title>JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序</title><link>http://www.blogjava.net/hoojo/archive/2012/08/13/385360.html</link><dc:creator>hoojo</dc:creator><author>hoojo</author><pubDate>Mon, 13 Aug 2012 01:39:00 GMT</pubDate><guid>http://www.blogjava.net/hoojo/archive/2012/08/13/385360.html</guid><wfw:comment>http://www.blogjava.net/hoojo/comments/385360.html</wfw:comment><comments>http://www.blogjava.net/hoojo/archive/2012/08/13/385360.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/hoojo/comments/commentRss/385360.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/hoojo/services/trackbacks/385360.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 这篇文章主要介绍用JavaScript和jQuery、HTML、CSS以及用第三方聊天JavaScript（jsjac）框架构建一个BS Web的聊天应用程序。此程序可以和所有连接到Openfire服务器的应用进行通信、发送消息。如果要运行本程序还需要一个聊天服务器Openfire， 以及需要用到Http方式和Openfire通信的第三方库（JabberHTTPBind）。 JabberHTTPB...&nbsp;&nbsp;<a href='http://www.blogjava.net/hoojo/archive/2012/08/13/385360.html'>阅读全文</a><img src ="http://www.blogjava.net/hoojo/aggbug/385360.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/hoojo/" target="_blank">hoojo</a> 2012-08-13 09:39 <a href="http://www.blogjava.net/hoojo/archive/2012/08/13/385360.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>JavaScript/jQuery WebIM 及时聊天通信工具 本地客户端</title><link>http://www.blogjava.net/hoojo/archive/2012/06/18/381032.html</link><dc:creator>hoojo</dc:creator><author>hoojo</author><pubDate>Mon, 18 Jun 2012 11:04:00 GMT</pubDate><guid>http://www.blogjava.net/hoojo/archive/2012/06/18/381032.html</guid><wfw:comment>http://www.blogjava.net/hoojo/comments/381032.html</wfw:comment><comments>http://www.blogjava.net/hoojo/archive/2012/06/18/381032.html#Feedback</comments><slash:comments>1</slash:comments><wfw:commentRss>http://www.blogjava.net/hoojo/comments/commentRss/381032.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/hoojo/services/trackbacks/381032.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: WebIM本地客户端，可以发送表情、调整字体、字体大小、字体颜色、加粗、下划线、斜体等；还支持收缩split条，详情等； 上UI界面，界面还不够专业，需要美工支持，下一期在做优化！   收缩详情   &nbsp; chat.html 代码  &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&g...&nbsp;&nbsp;<a href='http://www.blogjava.net/hoojo/archive/2012/06/18/381032.html'>阅读全文</a><img src ="http://www.blogjava.net/hoojo/aggbug/381032.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/hoojo/" target="_blank">hoojo</a> 2012-06-18 19:04 <a href="http://www.blogjava.net/hoojo/archive/2012/06/18/381032.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Java 利用SWFUpload多文件上传 session 为空失效，不能验证的问题</title><link>http://www.blogjava.net/hoojo/archive/2012/05/11/377897.html</link><dc:creator>hoojo</dc:creator><author>hoojo</author><pubDate>Fri, 11 May 2012 06:14:00 GMT</pubDate><guid>http://www.blogjava.net/hoojo/archive/2012/05/11/377897.html</guid><wfw:comment>http://www.blogjava.net/hoojo/comments/377897.html</wfw:comment><comments>http://www.blogjava.net/hoojo/archive/2012/05/11/377897.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/hoojo/comments/commentRss/377897.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/hoojo/services/trackbacks/377897.html</trackback:ping><description><![CDATA[<p>&nbsp;&nbsp;&nbsp;&nbsp; 我们都知道普通的文件上传是通过表单进行文件上传的，还不能达到异步上传的目的。通过使用某些技术手段，比如jquery form.js可以达到异步上传的目的，但最重要的问题在于，它不能够进行多个文件的上传。如果你要上传多个文件，必须一个一个地上传，同时还要在界面上处理当上传完一个文件之后，下一个文件上传框的问题。<br>&nbsp;&nbsp;&nbsp; 现在我们有了一个更多的运行，即使用swfupload进行多文件异步上传。顾名思义，它是一个flash的上传工具，但在界面上的表现形式使它和普通的html元素一样，没有复杂的展现，就一个普通的上传框，即可达到想要目的。  <p>&nbsp;&nbsp;&nbsp; 关于swfupload的使用这里自不必多，这里主要介绍的是解决在java web开发过程中经常碰到的验证失败的问题。这是因为flash在上传的时候使用的是和浏览器不同的会话，flash的SWFUpload上传利用socket套接字进行通信，所以导致session和原来上一次的会话不同，导致session丢失。这样就导致服务器在验证时自然被认为是新会话，从而验证不能通过，导致上传不能成功了。<br>&nbsp;&nbsp;&nbsp; 解决问题的方法，就是让flash在上传文件的时候带上同在一个界面的session标识，这通常是修改其中的upload_url来达到我们的目的，修改如下所示：  <div id="codeSnippetWrapper"> <div id="codeSnippet" style="padding-right: 0px; padding-left: 0px; font-size: 10pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; text-align: left; border-bottom-style: none"><pre style="padding-right: 0px; padding-left: 0px; font-size: 10pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; text-align: left; border-bottom-style: none">upload_url: <span style="color: #006080">"/admin/infobuild/image/upload.action;jsessionid=${pageContext.session.id }"</span></pre><!--CRLF--></div></div>
<p></p>上面这句话，必须放到jsp界面上，因为里面使用到了JavaWeb的语法，当然这可以修改，通过将&lt;%=session.getId()%&gt; 或 ${pageContext.session.id } 放到特殊的js变量中，可以达到隐藏变量的目的。比如如下的代码： 
<div id="codeSnippetWrapper">
<div id="codeSnippet" style="padding-right: 0px; padding-left: 0px; font-size: 10pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; text-align: left; border-bottom-style: none"><pre style="padding-right: 0px; padding-left: 0px; font-size: 10pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; text-align: left; border-bottom-style: none">&lt;!-- 这句要房子jsp页面中的script脚本中，或是放在servlet的response.getWriter()流中的script脚本中；总之要在swfupload 的js引入之前执行 --&gt;</pre><!--CRLF--><pre style="padding-right: 0px; padding-left: 0px; font-size: 10pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; text-align: left; border-bottom-style: none">window[<span style="color: #006080">"sessionId"</span>]=<span style="color: #006080">"${pageContext.session.id}"</span>; </pre><!--CRLF--><pre style="padding-right: 0px; padding-left: 0px; font-size: 10pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; text-align: left; border-bottom-style: none">&lt;!-- 这句话就可以在引入的js中使用 --&gt;</pre><!--CRLF--><pre style="padding-right: 0px; padding-left: 0px; font-size: 10pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; text-align: left; border-bottom-style: none">upload_url: Gtip.util.addContextPath(<span style="color: #006080">"/admin/infobuild/image/upload.action;jsessionId"</span>  + <span style="color: #006080">"="</span> + window[<span style="color: #006080">"sessionId"</span>]),</pre><!--CRLF--></div></div>
<p>以上方案是解决在jsp页面中解决的取值java的变量值；</p>
<p>如上代码的第一句放到jsp文件中，如jsp的公共include文件中。下面一句就放到js文件中，如引入的upload.js文件当中。<br>&nbsp;&nbsp;&nbsp; 但以上代码还存在一个问题，就是默认的sessionName问题。在tomcat或者其它j2ee容器，默认的sessionName也是 jsessionId。如果我们修改了sessionName如通过tomcat的server.xml修改session_cookie_name，这样默认的sessionName就是我们修改之后的了。解决此问题，需要再加一个参数设置才可，如下所示： 
<p>&nbsp;</p>
<div id="codeSnippetWrapper">
<div id="codeSnippet" style="padding-right: 0px; padding-left: 0px; font-size: 10pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; text-align: left; border-bottom-style: none"><pre style="padding-right: 0px; padding-left: 0px; font-size: 10pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; text-align: left; border-bottom-style: none">&lt;!-- 这三行放在include 导入的那个jsp的页面中 --&gt;</pre><!--CRLF--><pre style="padding-right: 0px; padding-left: 0px; font-size: 10pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; text-align: left; border-bottom-style: none">window[<span style="color: #006080">"contextPath"</span>] = <span style="color: #006080">"${pageContext.request.contextPath}"</span>;</pre><!--CRLF--><pre style="padding-right: 0px; padding-left: 0px; font-size: 10pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; text-align: left; border-bottom-style: none">window[<span style="color: #006080">"sessionId"</span>] = <span style="color: #006080">"${pageContext.session.id}"</span>;</pre><!--CRLF--><pre style="padding-right: 0px; padding-left: 0px; font-size: 10pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; text-align: left; border-bottom-style: none">window[<span style="color: #006080">"sessionName"</span>] = <span style="color: #006080">"jsessionId"</span>;</pre><!--CRLF--><pre style="padding-right: 0px; padding-left: 0px; font-size: 10pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; text-align: left; border-bottom-style: none">&nbsp;</pre><!--CRLF--><pre style="padding-right: 0px; padding-left: 0px; font-size: 10pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; text-align: left; border-bottom-style: none"><span style="color: #008000">// js中使用jsp中设置的window的变量值</span></pre><!--CRLF--><pre style="padding-right: 0px; padding-left: 0px; font-size: 10pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; text-align: left; border-bottom-style: none">upload_url: addContextPath(<span style="color: #006080">"/admin/infobuild/image/upload.action;"</span> + window[<span style="color: #006080">"sessionName"</span>] + <span style="color: #006080">"="</span> + window[<span style="color: #006080">"sessionId"</span>])</pre><!--CRLF--></div></div>
<p></p>
<p>以上代码的前三行放到公共的include.jsp中，最后一行放到公共的upload.js中。这样即可满足最终要求了。<br>不过有一点不好的即是，在部署环境中时，如果部署环境修改了sessionName，则必须在此include.jsp中修改一个具体的sessionName才可。 
<p>转载请标明出处:<a href="http://www.iflym.com">i flym</a><br>本文地址:<a href="http://www.iflym.com/index.php/code/201108190001.html">http://www.iflym.com/index.php/code/201108190001.html</a></p><img src ="http://www.blogjava.net/hoojo/aggbug/377897.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/hoojo/" target="_blank">hoojo</a> 2012-05-11 14:14 <a href="http://www.blogjava.net/hoojo/archive/2012/05/11/377897.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Ext [DDTabPanel、FoodImageField、ImageChooser]扩展组件</title><link>http://www.blogjava.net/hoojo/archive/2012/03/17/372077.html</link><dc:creator>hoojo</dc:creator><author>hoojo</author><pubDate>Fri, 16 Mar 2012 19:09:00 GMT</pubDate><guid>http://www.blogjava.net/hoojo/archive/2012/03/17/372077.html</guid><wfw:comment>http://www.blogjava.net/hoojo/comments/372077.html</wfw:comment><comments>http://www.blogjava.net/hoojo/archive/2012/03/17/372077.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/hoojo/comments/commentRss/372077.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/hoojo/services/trackbacks/372077.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 开发环境：  System：Windows  WebBrowser：IE6+、Firefox3+  JavaEE Server：tomcat5.0.2.8、tomcat6  IDE：eclipse、MyEclipse 6.5  开发依赖库：  JavaEE5、ext 2.2.2  Email：hoojo_@126.com  Blog：http://blog.csdn.net/IBM_hoojo  ...&nbsp;&nbsp;<a href='http://www.blogjava.net/hoojo/archive/2012/03/17/372077.html'>阅读全文</a><img src ="http://www.blogjava.net/hoojo/aggbug/372077.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/hoojo/" target="_blank">hoojo</a> 2012-03-17 03:09 <a href="http://www.blogjava.net/hoojo/archive/2012/03/17/372077.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>ExtJS Form扩展组件[ColorFiled, DateTimeFiled, IconCombo, MultiComboBox, DynamicTreeCombox]</title><link>http://www.blogjava.net/hoojo/archive/2012/02/27/370835.html</link><dc:creator>hoojo</dc:creator><author>hoojo</author><pubDate>Mon, 27 Feb 2012 05:56:00 GMT</pubDate><guid>http://www.blogjava.net/hoojo/archive/2012/02/27/370835.html</guid><wfw:comment>http://www.blogjava.net/hoojo/comments/370835.html</wfw:comment><comments>http://www.blogjava.net/hoojo/archive/2012/02/27/370835.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/hoojo/comments/commentRss/370835.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/hoojo/services/trackbacks/370835.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 支持Form颜色选择组件、日期时间选择组件、带图标的下拉列表、多选下来列表、动态下拉列表树等组件 开发环境： System：Windows WebBrowser：IE6+、Firefox3+ JavaEE Server：tomcat5.0.2.8、tomcat6 IDE：eclipse、MyEclipse 8 开发依赖库： JavaEE5、ext 2.2.2 Email：hoojo_@126.co...&nbsp;&nbsp;<a href='http://www.blogjava.net/hoojo/archive/2012/02/27/370835.html'>阅读全文</a><img src ="http://www.blogjava.net/hoojo/aggbug/370835.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/hoojo/" target="_blank">hoojo</a> 2012-02-27 13:56 <a href="http://www.blogjava.net/hoojo/archive/2012/02/27/370835.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>jquery blockUI 扩展插件 Dialog</title><link>http://www.blogjava.net/hoojo/archive/2012/01/09/368134.html</link><dc:creator>hoojo</dc:creator><author>hoojo</author><pubDate>Mon, 09 Jan 2012 06:19:00 GMT</pubDate><guid>http://www.blogjava.net/hoojo/archive/2012/01/09/368134.html</guid><wfw:comment>http://www.blogjava.net/hoojo/comments/368134.html</wfw:comment><comments>http://www.blogjava.net/hoojo/archive/2012/01/09/368134.html#Feedback</comments><slash:comments>3</slash:comments><wfw:commentRss>http://www.blogjava.net/hoojo/comments/commentRss/368134.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/hoojo/services/trackbacks/368134.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: 对jQuery blockUI插件进行了小的封装扩展，支持confirm、alert、dialog弹出窗口提示信息，支持按钮回调事件。可以自定义css样式、覆盖blockUI的样式等 首先要到jquery blockUI 官方网址：http://malsup.com/jquery/block/ 下载jquery.blockUI JS lib：http://malsup.com/jquery/blo...&nbsp;&nbsp;<a href='http://www.blogjava.net/hoojo/archive/2012/01/09/368134.html'>阅读全文</a><img src ="http://www.blogjava.net/hoojo/aggbug/368134.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/hoojo/" target="_blank">hoojo</a> 2012-01-09 14:19 <a href="http://www.blogjava.net/hoojo/archive/2012/01/09/368134.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>