BlogJava-摆渡人，外婆桥！-随笔分类-WEB2.0

页面中DOCTYPE的作用。

swingboat — Tue, 11 Apr 2006 03:37:00 GMT

前几天，在做一个页面时，引入了样式文件，但是不起作用。后来跟踪发现竟然是DOCTYPE的设置问题。例如下面的HTML：

test

Table Content

在testDiv中设置了字体的样式，但是浏览时（IE6和FireFox1.5)，发现test文本已经显示了testDiv中规定的样式，但Table Content却没有。去掉页面中的"http://www.w3.org/TR/html4/loose.dtd"设置后，两文本都按testDiv的样式显示了。下面引入一篇对DOCTYPE详细解释的文章。

原文作者：周靖译

虽然大多数Web文档的顶部都有doctype声明，但很多人都没有注意它。它是在你新建一个文档时，由Web创作软件草率处理的众多细节之一。

虽然doctype被许多人忽视，但在遵循标准的任何Web文档中，它都是一项必需的元素。doctype会影响代码验证，并决定了浏览器最终如何显示你的Web文档。

doctype的作用
doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是W3C所发布的一个文档类型定义（DTD）中包含的规则。

每个DTD都包括一系列标记、attributes和properties，它们用于标记Web文档的内容；此外还包括一些规则，它们规定了哪些标记能出现在其他哪些标记中。每个Web建议标准（比如HTML 4 Frameset和XHTML 1.0 Transitional）都有自己的DTD。

假如文档中的标记不遵循doctype声明所指定的DTD，这个文档除了不能通过代码校验之外，还有可能无法在浏览器中正确显示。对于标记不一致的问题，浏览器相较于校验器来说更宽容。但是，不正确的doctype声明经常导致网页不正确显示，或者导致它们根本不能显示。

选择正确的doctype
为了获得正确的doctype声明，关键就是让DTD与文档所遵循的标准对应。例如，假定文档遵循的是XHTML 1.0 Strict标准，文档的doctype声明就应该引用相应的DTD。另一方面，如果doctype声明指定的是XHTML DTD，但文档包含的是旧式风格的HTML标记，就是不恰当的；类似地，如果doctype声明指定的是HTML DTD，但文档包含的是XHTML 1.0 Strict标记，同样是不恰当的。

有的时候，也可以根本不使用一个doctype声明。如果没有指定有效的doctype声明，大多数浏览器都会使用一个内建的默认DTD。在这种情况下，浏览器会用内建的DTD来试着显示你所指定的标记。对于一些临时性的、匆忙拼凑的文档（这种文档有许多），你确实可以考虑省略doctype声明，并接受浏览器的默认显示。

完全可以从头编写一个doctype声明，并让它指向自己选择的一个DTD。然而，由于大多数Web文档都需要遵循由W3C发布的某个国际公认的Web标准，所以那些文档通常都要包含以下标准doctype声明之一：

HTML 2：

HTML 3.2：

HTML 4.01 Strict：

"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional：

"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset：

"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict：

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional：

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset：

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1：

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML 1.1 plus MathML plus SVG：

"-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
"http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

除了上面列出的doctype声明，具有特殊要求的一些文档还使用了其他几种声明。

doctype声明通常是文档的第一行，要在标记以及其他文档内容之前。注意，在XHTML文档中，doctype的前面偶尔会出现一条XML处理指令（也称为XML prolog）：

为了确保网页正确显示和顺利通过验证，使用正确的doctype是关键。与内容相反的、不正确的或者形式错误的doctype是大量问题的罪魁祸首。在未来的专栏文章中，我还会具体解释如何诊断及纠正这些问题。

用DW设计网页时，新建一个文件，看代码最前面总要出现一个下面的东东，
"http://www.w3.org/TR/html4/loose.dtd">
这个是DW自动在网页文件页增加了DTD信息.可以删.
删除后，浏览器会使用的默认DTD.

swingboat 2006-04-11 11:37 发表评论

Web2.0:AJAX的使用(XMLHttpRequest简介)

swingboat — Fri, 30 Dec 2005 03:43:00 GMT

一、XMLHttpRequest对象的历史
XMLHttpRequest类首先由Internet Explorer以ActiveX对象引入，被称为XMLHTTP。后来Mozilla、Netscape、Safari和其他浏览器也提供了
XMLHttpRequest类，不过它们创建XMLHttpRequest类的方法不同。IE的版本不同，创建XMLHttpRequest也不同。

二、XMLHttpRequest对象创建方法
IE:
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
Other:
xmlhttp_request = new XMLHttpRequest();

如果服务器的响应没有XML mime-type header，某些Mozilla浏览器可能无法正常工作。为了解决这个问题，如果服务器响应的header不是
text/xml，可以调用其它方法修改该header。

xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType('text/xml');
三、XMLHttpRequest对象的处理过程。
1.发送远程请求
　　　
xmlhttp_request.open('GET', URL, true);
xmlhttp_request.send(null);

open()：
第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。按照HTTP规范，该参数要大写；否则，某些浏览器(如Firefox)可能无法处理请求。
第二个参数是请求页面的URL。
第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"(异步)。

2.响应结束后，处理函数设置

xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript创建的函数名，注意不要写成FunctionName()，当然我们也可以直接将JavaScript代码创建在onreadystatechange之后，例如：
xmlhttp_request.onreadystatechange = function(){
// JavaScript代码段
};

3.响应后状态
只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。
readyState的取值如下：
　　0 (未初始化)
　　1 (正在装载)
　　2 (装载完毕)
　　3 (交互中)
　　4 (完成)
所以只有当readyState=4时，一个完整的服务器响应已经收到了，函数才可以处理该响应。

if (http_request.readyState == 4) {
// 收到完整的服务器响应
} else {
// 没有收到完整的服务器响应
}

4.响应后返回值
有两种方式可以得到这些数据：
(1) 以文本字符串的方式返回服务器的响应
(2) 以XMLDocument对象方式返回响应
eg:
var response = xmlhttp_request.responseXML.documentElement;
var result = response.getElementsByTagName('result')[0].firstChild.data;//返回result节点数据
if(result ==-2){
document.getElementById('message').innerHTML = "用户名"+document.getElementById('163id').value+"尚未注册";
}
else if(result ==-1){
document.getElementById('message').innerHTML = "对不起,用户名"+document.getElementById('163id').value+"已经注册";
}

四、XMLHttpRequest对象属性
onreadystatechange 状态改变的事件触发器
readyState 对象状态(integer):
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成
responseText 服务器进程返回数据的文本版本
responseXML 服务器进程返回数据的兼容DOM的XML文档对象
status 服务器返回的状态码, 如：404 = "文件末找到" 、200 ="成功"
statusText 服务器返回的状态文本信息

五、XMLHttpRequest对象方法
abort() 停止当前请求
getAllResponseHeaders() 作为字符串返问完整的headers
getResponseHeader("headerLabel") 作为字符串返问单个的header标签
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 设置未决的请求的目标 URL, 方法, 和其他参数
send(content) 发送请求
setRequestHeader("label", "value") 设置header并和请求一起发送

六、附录
HTTP 1.1支持的状态代码
100 Continue 初始的请求已经接受，客户应当继续发送请求的其余部分
101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议
200 OK 一切正常，对GET和POST请求的应答文档跟在后面。
201 Created 服务器已经创建了文档，Location头给出了它的URL。
202 Accepted 已经接受请求，但处理尚未完成。
203 Non-Authoritative Information 文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝
204 No Content 没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的
205 Reset Content 没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容
206 Partial Content 客户发送了一个带有Range头的GET请求，服务器完成了它
300 Multiple Choices 客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。
301 Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。
302 Found 类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。
303 See Other 类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取
304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取
307 Temporary Redirect 和302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是POST，即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因，HTTP 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只能跟随对GET请求的重定向。
400 Bad Request 请求出现语法错误。
401 Unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。
403 Forbidden 资源不可用。
404 Not Found 无法找到指定位置的资源
405 Method Not Allowed 请求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）对指定的资源不适用。
406 Not Acceptable 指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容
407 Proxy Authentication Required 类似于401，表示客户必须先经过代理服务器的授权。
408 Request Timeout 在服务器许可的等待时间内，客户一直没有发出任何请求。客户可以在以后重复同一请求。
409 Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。
410 Gone 所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。它和404的不同在于，返回407表示文档永久地离开了指定的位置，而404表示由于未知的原因文档不可用。
411 Length Required 服务器不能处理请求，除非客户发送一个Content-Length头。
412 Precondition Failed 请求头中指定的一些前提条件失败
413 Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头
414 Request URI Too Long URI太长
416 Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头
500 Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求
501 Not Implemented 服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求
502 Bad Gateway 服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答
503 Service Unavailable 服务器由于维护或者负载过重未能应答。例如，Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头
504 Gateway Timeout 由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答
505 HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本

swingboat 2005-12-30 11:43 发表评论

Web2.0:AJAX的使用(DWR Framework 二)：制作简单的Apartment管理

swingboat — Wed, 28 Dec 2005 09:08:00 GMT

一、DWR环境配置以及数据库设置
二、Apartment的VO设置
三、DAO层对数据的操作
四、dwr.xml配置
五、javascript函数编写
六、总结

swingboat 2005-12-28 17:08 发表评论

Web2.0:AJAX的使用(DWR Framework 一)：制作Web进度条

swingboat — Wed, 28 Dec 2005 08:35:00 GMT

一、Ajax简介
Adaptive Path公司的Jesse James Garrett这样定义Ajax：
Ajax不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含：
      1.基于CSS标准的表示；
      2.使用Document Object Model进行动态显示和交互；
      3.使用XMLHttpRequest与服务器进行异步通信；
      4.使用JavaScript绑定一切。
Ajax= Asynchronous JavaScript + XML

二、常用的几种Ajax框架
   1.DWR        　---- http://getahead.ltd.uk/dwr/
   2.JSon-Rpc      ---- http://oss.metaparadigm.com/jsonrpc/
   3.echo2            ---- http://www.nextapp.com/platform/echo2/echo/
   4.backbase       ---- http://www.backbase.com
   右边网址有具体的说明：http://www.51cto.com/html/2005/1222/15373.htm

三、DWR使用说明。
示例：在页面中做个进度条，点击“install”按钮，进度条开始递增。进度数据是从后台获取。

1.配置DWR环境。
在Eclipse中新建一个Web Project（MyEclipse\J2ee Projects\Web Project),引入dwr-0.9.2b.jar包，修改WEB-INF\web.xml文件，
配置dwr-invoker servlet。如下：

dwr-invoker

DWR Servlet

Direct Web Remoter Servlet

uk.ltd.getahead.dwr.DWRServlet

debug

true

dwr-invoker

/dwr/*

2.编写递增类Progress。此类只有一个方法getProgress，获取递增的数据。如下：
   package dwr.sample;

   import java.io.BufferedReader;
   import java.io.FileReader;
   public class Progress {
     public int getProgress(int nowProgress){
      int nowValue=nowProgress+1;
      return nowValue;
     }
   }

3.配置dwr.xml文件。此文件和web.xml位于同一目录下。
       "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
    "http://www.getahead.ltd.uk/dwr/dwr10.dtd">









4.编写index.htm文件。
a、引入js文件。首先引入dwr自己的两个js文件：


在dwr.xml中我们配置了一个名为"ProgressBar"的create 。dwr会在dwr/interface下产生一个ProgressBar.js文件。
在ProgressBar.js文件中，有一个javascript对象：ProgressBar，ProgressBar对象完成了和后台javabean：dwr
.sample.Progress的匹配。引入ProgressBar.js文件：
　　　

b. 编写显示进度的HTML文本:

    　

c. 编写doProgress函数
　function doProgress(){
　   //获取当前进度条的值，按百分比计算　　　
　var width=$("ProgressBar").style.width;
　　//去掉进度条值后面的"%"
　var scaleWidth=width.substring(0,width.length-1);
       //当进度条值为100的时候，停止跑动
    　if(scaleWidth!=100){
　　    //调用ProgressBar.js中的ProgressBar.getProgress函数
    　　ProgressBar.getProgress(scaleWidth,updateProgress);
//说明：javabean:Progress方法getProgress，其实它只有一个输入参数，一个返回参数。而javascript的ProgressBar.getProgress方法有两个参数。dwr在mapping方法的时候，对于返回值，它采用的是回调函数的方式。所以对于ProgressBar.getProgress方法的第二个参数是一个函数指针。这里是updateProgress函数。　
    　}
　}
　function updateProgress(progress){
　    //设置进度条的值
　 $("ProgressBar").style.width=progress+"%";
　　 //进度条继续跑动
　 doProgress();
     }

swingboat 2005-12-28 16:35 发表评论