微软的网盘终于又能用了,5G空间呢,微软就是有钱啊.

http://cid-519b3f7aa2172030.skydrive.live.com/self.aspx/Public/AJAX/extdwrgrid.zip 1.13 MB 导入MyEclipse即可,也可用其它开发工具.

如果无法下载，请到 FTP 的 /AJAX 目录下载 extdwrgrid.zip 文件，文件已经是最新版。

运行截图:

这次是真的了, 和数据库同步操作,不过,有安全性问题,建议加密码,一共有20个字段.后台数据库:

Ext + DWR + Mysql 简单例子

包括5个例子:
EXT 2 和 DWR 1 表格编辑控件示例(无数据库版本)
EXT 2 表格编辑控件示例(静态页面，Java和DWR无关版本)
Netbeans 6 开放文档团队在线通讯录(Ext + DWR + MySQL)
DWR 检查注册用户名是否存在
模拟DWR 引擎通过反射调用类中方法并获取返回值

要运行此例子,请先
1. 运行 table.sql 在 Mysql 中建表;
2. 修改 src/dao/UserManagerNB.java 的
    public static Connection getConnection() 方法, 来连接到
    正确的数据库地址.
3. 发布项目并键入地址 http://localhost:8080/extdwrgrid/ 访问;
4. 要修改例子, 注意绝大多数页面都是 UTF-8 编码的, 例如 .js 文件.

附件:
DWR通过AJAX后台POST调用参数,然后使用反射技术调用类的方法并获得结果.

后台发送的AJAX请求:
POST dwr/exec/JUserManager.checkUserExits.dwr HTTP/1.1
Accept: */*
Accept-Language: zh-cn
Referer: http://192.168.1.200:8000/ajaxreview/ajax_reg_dwr.html
Content-Type: text/plain
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Host: 192.168.1.200:8000
Content-Length: 146
Connection: Keep-Alive
Cache-Control: no-cache
Cookie: JSESSIONID=F0D84EF983957A66162555D3AB966A29

callCount=1
c0-scriptName=JUserManager // 类
c0-methodName=checkUserExits// 方法名
c0-id=358_1212542593797
c0-param0=string:%E6%B8%A9%E5%AE%B6%E5%AE%9D // 编码过的参数值
xml=true

后台返回的值:
头部
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Content-Type: text/plain;charset=ISO-8859-1
Transfer-Encoding: chunked
Date: Wed, 04 Jun 2008 01:23:14 GMT

正文(responseText)是方法的执行结果
var s0="\u5BF9\u4E0D\u8D77, \u6B64\u7528\u6237\u540D\u4E0D\u5141\u8BB8\u6CE8\u518C";
DWREngine._handleResponse('358_1212542593797', s0);

BeanSoft@126.com (刘长炯)
http://beansoft.blogjava.net/

ExtJS2.0实用简明教程

使用树控件TreePanel
TreePanel基本使用
TreeNode
TreeLoader
自定义TreeLoader

使用表单Forms
FormPanel基本应用
FieldSet
基本Field
ComboBox
DateField
TimeField
HtmlEditor
拖放(DD)
拖放的基本应用
DD
DDTarget
实用工具(Util)
Ext类
Ext.Ajax类
Ext.util.Format类
Date扩展
String扩展
Function扩展
其它

友情提示 : 下载微软网盘文件时关闭下载工具 ,  否则你将得到错误的文件 , 双击 EXE 会出来 DOS 窗口 . 正确操作是点击文件名后能看到显示下载链接和文件大小等信息 .

http://cid-519b3f7aa2172030.skydrive.live.com/self.aspx/Public/ibatis/ibatis.zip  IMB 这是个我写的iBATIS的入门单表映射例子，MySQL开发，注释完整，表还是我常用的那个 Student.

示例文件：

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE sqlMap     
    PUBLIC "-//ibatis.apache.org//DTD SQL Map 2.0//EN"     
    "http://ibatis.apache.org/dtd/sql-map-2.dtd">

<!-- 此命名空间在配置文件较多时可以起到包的作用，参考 useStatementNamespaces 相关资料 -->
<sqlMap namespace="Student">

  <!-- 使用类型的别名可以避免在下面的 SQL 映射语句中每次都得使用完整类名称 -->
  <typeAlias alias="Student" type="entity.Student"/>

  <!-- 结果集映射描述了从查询结果的列映射到类属性的方式. 当然这个结果映射配置不是必须的，
  如果列名(或者查询结果的列别名）和属性相匹配的话，会进行自动转换.
  <resultMap id="StudentResult" class="Student">
    <result property="id" column="USER_ID"/>
    <result property="username" column="USER_NAME"/>
    <result property="password" column="USER_PASSWORD"/>
    <result property="age" column="USER_AGE"/>
  </resultMap>
  -->

  <!-- 不带参数选中数据并将结果映射到 Student（对应类 entity.Student）. -->
  <select id="selectAllStudent" resultClass="Student">
    select * from Student
  </select>

  <!-- 根据ID选择数据并映射到类，带有一个属性名为 id 的参数 -->
  <select id="selectStudentById" parameterClass="int" resultClass="Student">
    select
      *
    from Student
    where ID = #id#
  </select>
  <!-- 插入数据示例，使用了 Student 类作为参数 -->
  <insert id="insertStudent" parameterClass="Student">
    insert into Student (
      username,
      password,
      age )
    values (
      #username#, #password#, #age#
    )
  </insert>

  <!-- 更新数据示例, 使用了 Student 类作为参数 -->
  <update id="updateStudent" parameterClass="Student">
    update Student set
      username = #username#,
      password = #password#,
      age = #age#
    where
      ID = #id#
  </update>

  <!-- 删除示例, 使用整数作为参数 -->
  <delete id="deleteStudentById" parameterClass="int">
    delete from Student where ID = #id#
  </delete>

</sqlMap>

另外，做开发时经常有人希望能在浏览器中一次选中多个文件然后上传（注意是在文件打开框里选中多个，不是一次选一个那种），还带上传队列和进度条。不过这个使用HTML自带的File组件是办不到的，可以使用Applet，或者SWF，或者IE插件来实现。有个开源的是FancyUpload，用SWF实现的。大家可以自己去看例子http://digitarald.de/playground/uplooad.html 官方站点 http://digitarald.de/project/fancyupload/

JavaEye上有人把完整代码做了个例子提供下载，并写了个说明，参考：http://www.javaeye.com/topic/144518 Ajax+Flash多文件上传之FancyUpload的应用，尊重作者，这第二个代码是原作者写的，我只是转载，欢迎阅读原文获得信息。

http://cid-519b3f7aa2172030.skydrive.live.com/self.aspx/Public/AJAX/fancyupload.rar 21KB

运行效果示例：

附送美女一张（好像是大旗网的）：

http://image1.daqi.com/pic_search/original/26956/5927cb911989eaf46bd378c75f6b46e7.jpg 点击看大图

在线阅读(完整内容含 Flash 动画): http://beansoft.java-cn.org/myeclipse_doc_cn/ajaxtutorial/

下载: http://cid-519b3f7aa2172030.skydrive.live.com/self.aspx/Public/MyEclipse中文文档/ajaxtutorial.zip 1.53 MB 

友情提示: 下载微软网盘文件时关闭下载工具,  否则你将得到错误的文件, 双击 EXE 会出来 DOS 窗口. 正确操作是点击文件名后能看到显示下载链接和文件大小等信息.

翻译: 刘长炯 BeanSoft@126.com
Blog: http://www.blogjava.net/beansoft/
日期: 2007-11-22
声明: 中文文字版权归 刘长炯 所有, 原文及相关的图片等资源的版权归原作者 Genuitec L.L.C 公司所有.

目录

1. 简介
2. 建议的听众
3. 系统需求
4. AJAX Debugging
5. 小结
6. 常见问题 FAQ
7. 资源
8. 反馈

本人原创 MyEclipse 6 帮助文档中文版集中下载

http://cid-519b3f7aa2172030.skydrive.live.com/browse.aspx/Public/MyEclipse中文文档

陆续上传中, 请关注:

http://cid-519b3f7aa2172030.skydrive.live.com/browse.aspx/Public/AJAX

ftp://beansoftdown:1234@219.141.70.147/AJAX

显示效果:

其实有人做的有更好的版本, 参考这里(也是仅支持IE的):
Web的桌面提醒（Popup） 效果演示: http://webuc.net/MyProject/Popup/popup.htm
下载: http://webuc.net/MyProject/Popup/popup.rar

最后来一个支持页面内的跨浏览器的:

完美仿MSN右下角弹出广告代码并可自动消失,附带关闭按钮.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>先飞电脑技术网</title>
</head>
<Script language="JavaScript">
<!--
window.onload = getMsg;
window.onresize = resizeDiv;
window.onerror = function(){}
//短信提示使用(asilas添加)
var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0;
function getMsg()
{
    try{
    divTop = parseInt(document.getElementById("eMeng").style.top,10)
    divLeft = parseInt(document.getElementById("eMeng").style.left,10)
    divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
    divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
    docWidth = document.body.clientWidth;
    docHeight = document.body.clientHeight;
    document.getElementById("eMeng").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;//  divHeight
    document.getElementById("eMeng").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth
    document.getElementById("eMeng").style.visibility="visible"
    objTimer = window.setInterval("moveDiv()",10)
    }
    catch(e){}
}

function resizeDiv()
{
    i+=1
    if(i>300) closeDiv()    //客户想不用自动消失由用户来自己关闭所以屏蔽这句
    try{
    divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
    divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
    docWidth = document.body.clientWidth;
    docHeight = document.body.clientHeight;
    document.getElementById("eMeng").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10)
    document.getElementById("eMeng").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10)
    }
    catch(e){}
}

function moveDiv()
{
    try
    {
    if(parseInt(document.getElementById("eMeng").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
    {
    window.clearInterval(objTimer)
    objTimer = window.setInterval("resizeDiv()",1)
    }
    divTop = parseInt(document.getElementById("eMeng").style.top,10)
    document.getElementById("eMeng").style.top = divTop - 1
    }
    catch(e){}
}
function closeDiv()
{
    document.getElementById('eMeng').style.visibility='hidden';
    if(objTimer) window.clearInterval(objTimer)
}
-->
</Script>

<!--温馨提示代码开始-->

<DIV id=eMeng style="BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX:99999; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 180px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 116px; BACKGROUND-COLOR: #c9d3f3">
    <TABLE style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" cellSpacing=0 cellPadding=0 width="100%" bgColor=#AFDCF3 border=0>
    <TBODY>
        <TR bgColor=#6699cc>
            <TD style="font-size: 12px; background-image: url('msgTopBg.gif'); color: #0f2c8c" width=30 height=24></TD>
            <TD style="font-weight: normal; font-size: 12px; background-image: url('msgTopBg.gif'); color: #ffffff; padding-left: 4px; padding-top: 4px" vAlign=center width="100%"> 网站温馨提示：</TD>
            <TD style="background-image: url('msgTopBg.gif'); padding-right: 2px; padding-top: 2px" vAlign=center align=right width=19><span title=关闭 style="CURSOR: hand;color:white;font-size:12px;font-weight:bold;margin-right:4px;" onclick=closeDiv() >×</span><!--<IMG title=关闭 style="CURSOR: hand" onclick=closeDiv() hspace=3 src="msgClose.jpg">--></TD>
        </TR>
        <TR>
            <TD style="background-image: url('http://pic.tianyaclub.com/images/windty_bg.jpg'); padding-right: 1px; padding-bottom: 1px" colSpan=3 height=90>
                <DIV style="BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 12px; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%">先飞电脑技术网全新改版，免费精品网络资源，你用了吗？<BR>
                <DIV align=center style="word-break:break-all"><!--<a href="http://pic.tianyaclub.com/default.asp?idWriter=0&Key=0" target="_blank">--><a href="http://www.xfbbs.com" target="_blank">
                <font color=#FF0000>进入网站浏览</font></a></DIV>

                </DIV>
            </TD>
        </TR>
    </TBODY>
    </TABLE>
</DIV>
<!--温馨提示代码结束-->
</html>

<input type="button" onclick="ajaxTest()" value="AJAX测试">

<input type="button" onclick=" document.getElementById('weather').innerHTML='' " value="隐藏">

<script>
// 1. 初始化 请求 对象
// Mozilla/Firefox 下的
var xmlhttp = new XMLHttpRequest();
// IE 下的
//var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
//alert(xmlhttp);

function ajaxTest() {
    // 指定要打开的页面
    xmlhttp.open("GET", "staticpage.html", true);// HTTP 请求的方式, URL, 是否异步
    // 指定页面打开完之后要进行的操作.
    xmlhttp.onreadystatechange = mychange;
    // 开始发起浏览请求, Mozilla 必须加 null
    xmlhttp.send(null);
}

// 这个函数就是每次状态改变要调用的函数
function mychange() {
    // 请求已完成
    if(xmlhttp.readyState == 4) {
        //alert(xmlhttp.readyState);
        alert(xmlhttp.responseText);
        // 更新对应的 HTML 元素里面显示的内容
    // 根据 ID 引用页面里面的元素 document.getElementById(元素名)
    document.getElementById('weather').innerHTML = xmlhttp.responseText;
    }
}
</script>

<div id="weather"></div>

Instant Source - the first real-time HTML source viewer and editor.
测试过的浏览器: IE 5,6,7
这是一个IE浏览器插件，主要功能是实时的查看和修改 HTML 网页上的源代码，当鼠标指向或选择网页的某一部分，即可在下方的窗口中快速看到网页的源代码，这对网页设计相关人员还是相当有用的。而且可以列出当前页面的所有源码(包括引用到的 JS, CSS 文件等)推荐使用！ 例如大家看到 Google 网页的时候, 想拿到他们的所有代码, 或者想看看某个控件的源码, 这时候就非常方便了, 第一个可以通过 "Display Entire Page(current State)"来看到, 第二个可以通过"Display Element Under Cursor"来看到. 同样, 也可以方便的来检测自己写的页面是否达到了预期的目的.
阅读全文

操作讲解视频:

http://download.gro.clinux.org/beansoft/InstantSource.swf  1.45 MB

1. Home
2. Technologies

JSEclipse

Update: JSEclipse prerelease 2 released on April 2, 2007. Get it now.

JSEclipse is a new plugin for the Eclipse environment that helps developers code JavaScript faster and with no errors. With JSEclipse, you can complete a variety of tasks, from editing small sections of code to working with the next big AJAX library or developing plug-ins for a product that embeds JavaScript snippets.

Download and install JSEclipse and improve your JavaScript coding experience with:

• Contextual code completion & shortcuts.
• Project outline and quick navigation through function declarations.
• Syntax highlighting.
• Error reporting.
• Customizable code templates to get you started.
• Support for popular JavaScript libraries (Dojo, Prototype, Spry, YUI, Qooxdoo).
• Support for JavaDoc documentation and multi-line comments.
• Adobe Flex Builder 2 compatibility.

Download and Discuss

• Get the JSEclipse prerelease now
• Discuss JSEclipse in the Labs forums

For visual examples of how code completion, code templates, and JavaScript libraries (Ajax) features in JSEclipse behave, watch the streaming demonstration videos hosted on Labs.

• Getting Started
• Community
• Product Details

Follow these steps to get started with the JSEclipse prerelease.

Prerequisites

In order to install and use JSEclipse, you need the following:

• Hardware requirements: same as for Eclipse SDK.
• The Eclipse SDK version 3.1 or higher
• The Java Runtime Environment version 1.4 or higher
• Approximately 2 MB of available disk space.

Installation

1. Download JSEclipse
2. Read the installation notes
3. Watch the demonstration videos for a tour of the features in JSEclipse.
4. Check out the JSEclipse online documentation for a detailed description of the features and installation process.

5. Join the discussion on the JSEclipse forum, where you can ask questions, discuss your experience, and give us your feedback.

   Please note that your submission of comments, ideas, feature requests and techniques on this and other Adobe maintained forums, as well as Adobe's right to use such materials, is governed by the Terms of Use.

多看看别人的观点和思路...

推荐书籍: AJAX 快车道(Google搜索可得)

AJAX培训第一讲：AJAX基础

     摘要: 经过了5个小时的准备，10多个小时的录制和剪辑，我终于将第一次AJAX培训的内容做完了。录一次讲座真的是一件费神费时的事情，我也深切感受到了天轰穿兄录了数十次讲座有多么不容易。这是我第一次录制讲座，所以经验有些不足，而且对着屏幕一个人傻傻地说话总是不如对着观众说话，在语气上也略显单调。虽然我已经极力yy正在为数十人作讲座的情形，但是似乎效果不甚理想。另外不知道是什么原因，录下来的声音总是不像我的原声，听上去也有些沉闷，请大家多多包涵了。如果大家对于讲座的方式上有什么意见或者建议的话，请回复在这里，您的支持能够让我们的工作越做越好。如果大家对于讲座的内容有任何疑问，请在Q & A专用文章里进行提问，当然如果您有其它任何疑问的话，也能在那里提出，我会尽快为您解答。  阅读全文

AJAX培训第二讲：使用AJAX框架（下）

     摘要: “AJAX培训第二讲：使用AJAX框架”现在拆成了两部分，现在发布是第一部分，探讨了AJAX框架相关内容，并给出了一些最简单的例子。  阅读全文

posted @ 2006-11-27 02:51 Jeffrey Zhao 阅读(3305) | 评论 (35) 编辑 |

AJAX培训第二讲：使用AJAX框架（上）

     摘要: “AJAX培训第二讲：使用AJAX框架”现在拆成了两部分，现在发布是第一部分，探讨了ASP.NET 2.0中的AJAX能力。而第二部分我还在重新修补和录制，大概会在周一发布。  阅读全文

(2007-05-09 09:44:36) αβγ(****)

ajax 中：

var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

var xmlHttp = new XMLHttpRequest();

产生xmlhttp对象的区别是？

(2007-05-09 09:45:46) ziggy_zaggy_(****)

不同的浏览器支持的

(2007-05-09 09:46:00) αβγ(****)

var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

(2007-05-09 09:46:21) ziggy_zaggy_(****)

IE的

(2007-05-09 09:46:39) 穷(****)

这个是针对不同版本的IE

(2007-05-09 09:46:44) αβγ(****)

同是IE 为何两种？

(2007-05-09 09:47:07) ziggy_zaggy_(****)

IE4以前的 ，和IE5

(2007-05-09 09:47:13) 穷(****)

因为这个IE6和IE4,5支持的XMLHTTP不一样

(2007-05-09 09:47:24) ziggy_zaggy_(****)

不同版本

(2007-05-09 09:47:47) αβγ(****)

Microsoft.XMLHTTP 是ie5？

(2007-05-09 09:48:28) 穷(****)

呀，你管他什么版本干什么

(2007-05-09 09:48:32) ziggy_zaggy_(****)

忘了，记不住了，你Google吧

(2007-05-09 09:48:47) 穷(****)

什么版本不都是一样的吗

(2007-05-09 09:49:12) 穷(****)

吧创建封装成函数要的时候调用不就好了吗

(2007-05-09 09:49:16) 穷(****)

写一个工厂

(2007-05-09 09:49:44) αβγ(****)

穷(****) 09:48:47

什么版本不都是一样的吗

(2007-05-09 09:49:46) αβγ(****)

是这样？

(2007-05-09 09:50:10) 穷(****)

汗，你没听懂我的话

(2007-05-09 09:52:07) αβγ(****)

我的意思是 ie 5是否调用这个

(2007-05-09 09:52:17) 穷(****)

忘记了

(2007-05-09 09:52:21) αβγ(****)

穷(****) 09:48:28

呀，你管他什么版本干什么

(2007-05-09 09:52:25) 穷(****)

我就记得有4个的啊

(2007-05-09 10:20:28) αβγ(****)

xmlHttp.status == 200

是什么含义？

(2007-05-09 10:20:50) TiGERTiAN(****)

浏览器正确返回

(2007-05-09 10:21:00) TiGERTiAN(****)

请求正确返回

(2007-05-09 10:23:25) 穷(****)

是啊

(2007-05-09 10:23:26) BeanSoft(****)

http://beansoft.java-cn.org/attach/WebAJAX/AJAX+Follow+Me%282%29.html

(2007-05-09 10:23:33) BeanSoft(****)

好多人还不知道 HTTP 是怎么回事呢

(2007-05-09 10:23:42) BeanSoft(****)

这个文档还是我上学时候整理的

(2007-05-09 10:25:04) 穷(****)

αβγ，加我啊

(2007-05-09 10:25:09) 穷(****)

给你点东西看看

(2007-05-09 12:13:35) αβγ(****)

prototype.js

里面封装成这样：

var Ajax = {

getTransport: function() {

return Try.these(

function() {return new XMLHttpRequest()},

function() {return new ActiveXObject('Msxml2.XMLHTTP')},

function() {return new ActiveXObject('Microsoft.XMLHTTP')}

) || false;

},

activeRequestCount: 0

}

(2007-05-09 12:13:57) αβγ(****)

感觉如果自己用的确减少了许多代码量

(2007-05-09 12:15:11) 穷(****)

太好了

(2007-05-09 14:45:32) 穷(****)

1.) String s = String.valueOf(i);

2.) String s = Integer.toString(i);

3.) String s = "" + i;

(2007-05-09 14:45:35) 穷(****)

有区别么

(2007-05-09 14:49:43) hit/kf:
(23296996)

i 是什么?

(2007-05-09 14:51:36) 穷(****)

I就是int变量

(2007-05-09 14:55:39) αβγ(****)

<script>

function getHTML()

{

var url = 'server.html';

var pars = 'someParameter=ABC';

var myAjax = new Ajax.Updater('placeholder', url, {method: 'get', parameters: pars});

}

</script>

<input type=button value=GetHtml onclick="getHTML()">

<div id="placeholder"></div>

(2007-05-09 14:55:58) αβγ(****)

这种写法，实际上和原 get请求方式一样吧

(2007-05-09 14:56:26) αβγ(****)

那我服务器端如何根据请求发送数据呢？

(2007-05-09 14:58:49) TiGERTiAN(****)

参考下文档，有个方法可以获得数据

(2007-05-09 14:59:34) αβγ(****)

也就是说服务端实际上也就是url，对应的页面也要用ajax？

(2007-05-09 15:00:04) TiGERTiAN(****)

对应的页面？

(2007-05-09 15:00:27) αβγ(****)

？

(2007-05-09 15:00:29) TiGERTiAN(****)

服务器端的页面值需要将数据显示出来即可，

(2007-05-09 15:00:37) TiGERTiAN(****)

有客户端去获取显示出来的出去

(2007-05-09 15:00:40) BeanSoft(****)

后台的页面返回的只是HTML而已

(2007-05-09 15:00:44) TiGERTiAN(****)

文本就获得文本

(2007-05-09 15:00:45) TiGERTiAN(****)

恩。。

(2007-05-09 15:00:47) BeanSoft(****)

和原来的写法一致

不需要改动后台

(2007-05-09 15:01:31) αβγ(****)

如果原来是RUQUEST。GET……

都不用改啊

(2007-05-09 15:01:45) BeanSoft(****)

对,传输的过程和原来一样的

(2007-05-09 15:01:49) BeanSoft(****)

都是走HTTP协议

(2007-05-09 15:02:20) αβγ(****)

越来越明白了。。。

(2007-05-09 15:02:26) αβγ(****)

好的。我测试

(2007-05-09 15:02:48) BeanSoft(****)

嗯, AJAX 就是浏览器在后台主动触发一次 HTTP 通信过程

(2007-05-09 15:03:06) BeanSoft(****)

而不是显示白屏然后再发送请求

(2007-05-09 15:03:28) BeanSoft(****)

例如说浏览器有个方法叫 doHttp()

(2007-05-09 15:03:43) αβγ(****)

GOOD 说得太好了。

(2007-05-09 15:04:01) BeanSoft(****)

以前是通过用户点链接触发,同时等待 doHttp() 返回 HTTP 文本

(2007-05-09 15:04:09) BeanSoft(****)

这之前屏幕会死掉

(2007-05-09 15:04:50) BeanSoft(****)

AJAX 呢, 就是不改动前台的显示, 在后台悄悄的调用 doHttp(), 但是回来的文本需要程序员处理了才能显示

(2007-05-09 15:04:54) αβγ(****)

现在返回的东西一般是XML 对吧？

(2007-05-09 15:05:02) BeanSoft(****)

无规定的,都可以

建议吧,还是看看 XmlHttpRequest, 了解了解再用框架, 这样便于理解

(2007-05-09 15:06:34) αβγ(****)

我理解了。简直听君一席话，胜读2天书啊

eval("晓风")(****) 14:37:26
培训机构只是给你个学习的机会，主要还是要靠自己的
圣火(****) 14:37:39
是要看awt和swing的源码吗
BeanSoft(****) 14:38:06
当然不是了...手写几个AWT的例子就行了
偷走的tears(****) 14:38:09
BeanSoft(****) 14:38:20
建议别用界面设计器
圣火(****) 14:38:22
呵呵，那就是自己多看书，多和朋友交流
圣火(****) 14:38:43
恩，那就是直接写啦
BeanSoft(****) 14:38:49
先用JDK练习,能跑了再上开发工具
BeanSoft(****) 14:39:02
要不然做多久也没法理解类路径,类库到底是个什么东西
圣火(****) 14:39:41
那就是先用文本文件写代码了阿
BeanSoft(****) 14:39:54
一本书,一个JDK,够了
咖啡屋的鼠标(****) 14:40:28
Core Java或者 Java编程思想挑一本就好
圣火(****) 14:40:32
呵呵，什么书啊，
咖啡屋的鼠标(****) 14:40:49
CoreJava友称Java核心技术
BeanSoft(****) 14:40:49
这是有时间的情况,如果想急着就业那就赶紧装Eclipse,MyEclipse用IDE再看基本框架入门
BeanSoft(****) 14:41:21
看看网上的 Spring + Hibernate + Struts 简称 SSH 的入门教程, 视频
圣火(****) 14:41:43
是不是也要看java api啊
ziggy_zaggy_(****) 14:41:44
太难，还是先看看简单点的书，在看Core Java
咖啡屋的鼠标(****) 14:41:55
嗯Bean，这些话已经可以编个入门指导了
咖啡屋的鼠标(****) 14:42:32
可以起名叫：“Java入门解决方案”
BeanSoft(****) 14:42:38
直接看框架的后果就是有人让你用代码发个邮件你会看半天,或者用代码读写一个配置文件的时候
BeanSoft(****) 14:42:51
因为你漏了J2SE的基础类库的部分
BeanSoft(****) 14:43:55
框架基本上用IDE就能用,至于平时写的最多的,就是这些基础的业务逻辑代码
ziggy_zaggy_(****) 14:44:07
要是你急得话，还是早点上手学框架
BeanSoft(****) 14:44:30
恩,分情况了.就跟java培训,又就业班和长期培训班
咖啡屋的鼠标(****) 14:44:49
长期那些没看出有啥效果
圣火(****) 14:45:18
我不急啊，呵呵，我现在想好好学习java可是不知道怎么入手
咖啡屋的鼠标(****) 14:45:23
认识了几个人，感觉很糟糕，他们太按部就班了，没有自己的计划
圣火(****) 14:45:40
呵呵，要有什么计划阿
BeanSoft(****) 14:45:42
学JDK+AWT吧
咖啡屋的鼠标(****) 14:45:47
狗熊掰棒子，一边学一边忘
圣火(****) 14:46:25
我看api的时候，边看就把那么多的方法给忘了
BeanSoft(****) 14:46:41
自己多做练习,给自己出点实际的考题
圣火(****) 14:46:44
到时候也不知道用什么方法和类
咖啡屋的鼠标(****) 14:46:49
第一个计划是做一个东西用，不管多简单
BeanSoft(****) 14:46:54
像我当时就是做了个记事本
BeanSoft(****) 14:47:05
AWT+IO操作,就熟悉了
咖啡屋的鼠标(****) 14:47:10
然后加功能
BeanSoft(****) 14:47:16
一定要自己亲自写
BeanSoft(****) 14:47:26
不要下个demo改改,那样没用
咖啡屋的鼠标(****) 14:47:33
接着可以考虑学设计模式和更多的api了
偷走的tears(****) 14:47:47
Bean怎么写，我还没动手过
偷走的tears(****) 14:47:57
包括VB的和C的我都没写过
BeanSoft(****) 14:48:08
?写啥?记事本啊?
偷走的tears(****) 14:48:13
ys
偷走的tears(****) 14:48:19
demo
BeanSoft(****) 14:48:18
我貌似看个语言都要学写记事本
BeanSoft(****) 14:48:29
当时还用 C++ Builder 写了个
偷走的tears(****) 14:48:35
我就写的Hello Work
BeanSoft(****) 14:48:42
这样很快就能明白很多东西
BeanSoft(****) 14:48:54
那个没用
圣火(****) 14:48:58
呵呵，大学四年了，我马上毕业了，可是什么实际经验都没有啊，哎，以前真是荒废了
咖啡屋的鼠标(****) 14:49:04
先画
BeanSoft(****) 14:49:24
恩,用界面设计器画
BeanSoft(****) 14:49:48
http://www.blogjava.net/beansoft/archive/2007/03/29/107298.html
BeanSoft(****) 14:49:52
J2SE 基础学习: 都该学习哪些包?
BeanSoft(****) 14:50:15
学文件读写的时候可以做个练习输入记录,保存到文件,然后再读出来
BeanSoft(****) 14:50:19
可以用命令行方式
偷走的tears(****) 14:51:08
咖啡屋的鼠标(****) 14:51:23
又一个符合我昨天提出的悲剧模型的出现了
BeanSoft(****) 14:51:32
???啥悲剧模型?
圣火(****) 14:51:38
用界面设计器画什么阿
咖啡屋的鼠标(****) 14:51:41
按部就班那个
BeanSoft(****) 14:51:57
不肯挑战自我,当然提高不乐了
BeanSoft(****) 14:52:15
举个最简单的例子,别人能用java做的,咱也要尽量找点简单的实现一下
BeanSoft(****) 14:52:49
光吃猪肉不等于知道怎么杀猪
圣火(****) 14:53:41
呵呵，是没吃过肥猪肉还没见过肥猪走
BeanSoft(****) 14:54:11
综合一点的基础例子(可以不用AWT)貌似也很多了

BeanSoft(****) 14:54:30
例如:通过命令行在局域网聊天的小例子
圣火(****) 14:55:16
是不是程序基本上就分成了命令行和AWT两种阿
ziggy_zaggy_(****) 14:55:17
我的看法，先简单的学学Java基础，有面向对象的基础，然后学作Web，html,JavaScript,手写一些，大概用3周主要是MVC，框架选SSH，或者别的，能做登录，注册一类的模块，有分层的概念，熟悉IoC ,ＤＩ，主要是学习集成Ｓｔｒｕｔｓ，和Ｈｉｂｅｒｎａｔｅ，学会写ＤＡＯ接口，继承ＨｉｂｅｒｎａｔｅＤＡＯＳｕｐｐｏｒｔ，到此在深入理解Ｊａｖａ，理解设计模式，理解ＳＳＨ，学学着写业务逻辑　，当然也要有一定的ＪＤＢＣ基础，
当然，学习什么框架还有待商榷

最简单的表单验证框架 EasyValidation

下载代码和示例

主要特征

• 简洁的验证语法
• 快速
• 无需编写验证提示信息
• 支持组合验证
• Ajax支持
• 基于prototype.js
• 无侵入性
• 支持国际化
• 易于扩展
• 基于标准的Html属性(class)添加验证,易于其它标准的jsp taglib集成

支持浏览器

• IE 5.x 以上
• Mozilla 1.4 以上
• FireFox 0.9 以上
• Opera 8.5 测试通过

helloworld示例

<script src="prototype.js" type="text/javascript"></script>
<script src="validation_cn.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style_min.css"/>

• prototype.js是所有的基础
• validation_cn.js真正的验证框架文件
• 可以添加style_min.css中的样式声明,也可以把style_min.css中的样式声明引入到你的框架js文件中去.

表单验证

<!-- 为form增加required-validate class,标识需要验证form -->
<form id='helloworld' action="#" class='required-validate'>
	helloworld:</br>
	<!--通过class添加验证: required表示不能为空,min-length-15表示最小长度为15 -->
	<textarea name='content' class='required min-length-15'></textarea></br>
	<input type='submit' value='Submit'/> 
	<input type='reset' value='Reset'/>
</form>

• 要是某个form中的元素被验证可以这样给声明的form中加一个class='required-validate'的属性,框架会在load是自动绑定所有要验证的域.
• 在要检查的域中通过class属性来声明被检查域的限制条件,例如上面的class='required min-length-15'表示这是一个非空,并且最小长度是15的域,在编辑域失去焦点时,会自动检查,如果输入不满足上述条件,则产生错误提示.

验证效果

检查规则

验证表达式	描述	示例
required	非空域,全部空格也算空
validate-number	一个有效数
validate-digits	只能包含0-9任意个数字
validate-alpha	只能是字母a-z, A-Z
validate-alphanum	只能是字母和数字的组合
validate-email	只能是有效的email
validate-url	只能是有效的url地址
validate-one-required	至少有一个被选中,例如一组checkbox, radiobutton,它们最好包含在一个div和span中
validate-integer	只能是整数,可以有正负号
validate-ip	有效的IP地址
min-length-$number	最小长度是$number (此处$some表示一个特定的值)	最小长度为8: min-length-8
max-length-$number	最大长度是$number	最大长度为8: max-length-8
max-value-$number	输入域的最大值是$number	最大值为8.1: max-value-8.1
min-value-$number	输入域的最小值是$number	最大值为-8.1: max-value--8.1
equals-$otherInputId	必须和某个input field相等,用于密码两次输入验证	equals-password
less-than-$otherInputId	小于某个input field less-than-otherInputId,多用于结束日期不能小于开始日期的需求
great-than-$otherInputId	大于某个input field less-than-otherInputId
validate-date-$dateFormat	只能是日期,$dateFormat为日期格式,$dateFormat的可选,默认格式为yyyy-MM-DD	validate-date-yyyy年MM月dd日
validate-file-$type1-$type2-$typeX	验证文件输入域选择的文件类型只能为声明的$type1 – $typeX中的一种	validate-file-png-jpeg
float-range-$minValue-$maxValue	必须是$minValue到$maxValue的一个浮点数	1至20: float-range-1-20
int-range-$minValue-$maxValue	必须是$minValue到$maxValue的一个整数
length-range-$minLength-$maxLength	输入字符串的长度必须在$minLength到$maxLength之间
validate-pattern-$RegExp	通过自定义正则表达式$RegExp来验证输入域的正确性	vaidate-pattern-/a/gi
validate-ajax-$url	通过ajax来验证输入域,$url为ajax验证提交的地址,错误提示信息将由服务器端返回. 数据示例 <input name="username" value="badqiu"/>, 提交数据为:username=badqiu&what=username&value=badqiu what为input的name,value为input的value	validate-ajax-http://localhost/valiate-email.jsp
validate-chinese	只能是中文(以下为中国的相关验证)
validate-phone	有效的电话
validate-mobile-phone	有效的手机号
validate-id-number	验证是否有效的身份证号码
validate-zip	验证邮政编码
validate-qq	验证QQ号码

数据示例

<input name="username" value="badqiu"/>,提交数据为:username=badqiu&what=username&value=badqiu
what为input的name,value为input的valuevalidate-ajax-http://localhost/valiate-email.jsp

编程式为表单增加验证(Validation选项)

• 可以手工指定要验证那个form,在指定是可以给定一些选项

<script type="text/javascript">
	var valid = new Validation('form-id', {onSubmit:false});
         // do something ...
         var result = valid.validate();
</script>

• onSubmit – 是否绑定onSubmit函数, default - true
• stopOnFirst – 是否在检查到第一个错误时就停止检查 default- false
• immediate – 是否在被检测域失去焦点时就检查被检查域 default - false
• focusOnError – 是否把焦点移动到发生错误的域上 default - true
• useTitles – 是否使用提示 default - false
• onFormValidate:当form被检测和的回调函数,有两个输入参数 arg[0]-检测form的结果true or false, arg[1]-form本身的id
• onElementValidate:当没个element被检查后的回调函数,有两个输入参数 arg[0]-检测form的结果true or false, arg[1]-element本身的id

添加自己的Validator测试函数

/*参数说明
 * v: 为需要测试的值
 * elm: 为html input
 * args: 为有参数的验证表达式传递的参数,如min-length-10,则args[0]为10
 * metadata: 为Validator本身
*/
Validation.add(['max-value',function(v,elm,args,metadata) {
		return parseFloat(v) <= parseFloat(args[0]);
	},{depends : ['validate-number']} ],
});
/*
 * 增加验证出错的提示信息
 */
Validator.messagesSourceCn = [
['max-value' , '最大值为%s'],
]

Validator的选项:

depends – 为validator的之间的内部依赖
ignoreEmptyValue – 表明validator是否忽略空值不进行测试

FAQs

1. 我的网站现在使用的是UTF-8编码,怎么使用validation_cn.js显示中文会乱码?
   

1. 国际化怎么办?
   

1. 日期之间的比较怎么办,如结束日期要大于开始日期
   

1. select的验证
   

<select id="test" name="test" class="required">
	<option value=" ">Please Select..</option>
	<option value="val1">Value 1</option>
	<option value="val2">Value 2</option>
</select>

1. 在IE中提示"Unterminated string constant"或是"末结束的字符串常量"错误
   

引用

Authors

附件:

EasyValidation3.0.zip		52861字节
validation_helloworld.jpg		14379字节