对web应用效率提升的一些经验及疑问

1. 对dom节点的使用:

    尽量避免使用dom对象,大家都知道对dom树的遍历非常耗费资源,因此如果需要重复使用时,将dom对象存在一个js的变量中,然后对这个变量进行使用,避免每次使用dom节点时对dom树的遍历,切记,在使用完对dom对象引用的变量后要将其置为null,否则你会发现内存的占用率有增无减,直到你关闭了浏览器为止。

2. 对eval函数的使用:

     在使用eval函数时,会增加了对eval函数中代码解析的过程,而这个解析的过程是非常耗费资源的,因此,尽量避免使用eval函数,如果非用不可,也要尽可能的减少eval解析的代码量,将需要执行的代码提取到一个方法内,eval只解析这个函数名来提高eval的效率,可以通过以下的示例进行比较:

    方法一:

eval("for(var i = 0; i < 10000000; i ++) { var str = 'test' + i }");

      方法二:

var test = function() { 
    for(var i = 0; i < 10000000; i ++) {
        var str = 'test' + i; 
    } 
} 
var testFun = eval('test'); 
testFun(); 

3. try-catch的使用:

    尽量把try-catch语句放在循环外边。

4. 全局变量的使用:

     全局变量的生命周期贯穿整个脚本的生命周期,而本地变量的存在范围随着本地命名空间的销毁而消失。当在函数或其它地方引用一个全局变量时,脚本引擎需要搜索整个全局命名空间。

5. 压缩合并js和css文件:

     这方面的优化估计很多人都做过,现在有好多JS和CSS压缩和混淆的工具,如yahoo的yui-compressor.jar,在页面完全使用Ext等js框架开发时压缩和混淆JS对效率提升尤其明显。

6. 异步请求中GET与POST的选择:

     大家都知道用GET方式来发送HTTP请求效率要远远高于POST请求,但是出于安全的考虑,这里需要慎重选择请求方式,可以参考我的另外一篇文章。

 

——————————————————————————————– 

 

另外,还有一些开发过程中的细节也会对效率提升起到一定得作用:

1. 不要使用with语句

2. str += “aaa”; str += “bbb”; 效率大于 str = “aaa” + “bbb”;

3. 原生的态的写法效率大于函数,如:

    a > b   a : b; 效率大于 Math.max(a, b);

    array[array.length] = obj; 效率大于 array.push(obj);

4. 对数组进行遍历时,先把数组的长度保存在变量中

for(var i = 0, len = array.length; i < len; i ++) { 
    // 遍历数组 
}

5. innerHTML方法效率大于createElement()/appendChild()方法

6. 尽量减少图片链接个数,减少对带宽的耗费

 

——————————————————————————————–

 

目前还在对以下几方面的优化进行分析和研究,都是本机测试,基本可以忽略网络问题,希望高人可以进行指点:

1. ajax以POST方式发送异步请求时的性能优化

    现状:用HTTPWATCH检测时,SEND时间过长,有时竟然会超过0.8秒,传输量并不大,   

    请求信息:

    Content-Type : application/x-www-form-urlencoded;charset=UTF-8

    Content-Length : 133 (10个字符串参数)

2. 在接收response的content时的性能优化

    现状:用HTTPWATCH监测时,RECEIVE时间过长

    response信息:

    HTTP/1.1 200 OK

    Server : Apache-Coyote/1.1

    Content-Type : text/plain;charset=UTF-8

    Content-Length : 4147

3. 在多个请求之间会有延时,如第一个请求完成之后会有零点几秒的延时才会进行下一个请求,那么这个延时的时间可以进行优化吗?这个延时的时间到底是在做什么呢?执行javascript代码?还是请求的等待队列?

希望高人可以指点,先行谢过!

 

HTML-加速、再加速

作者:听风    文章来源:eNet技术学院

web开发人员是否必须掌握复杂的组件技术才能加快html页面的访问速度?答案是:不一定!实际上,有许多关于HTML与DHTML方面的技巧,它们原理简单而且上手容易。无论是技术高超的老手,还是初涉编程的菜鸟,领会这些都十分必要。

明显HTML,暗渡“公用脚本”

减少web页面下载时间的关键就是设法减小文件大小。当多个页面共用一些成分内容时,就可以考虑将这些公用部分单独分离出来。比如:我们可以将多个HTML页面都用到的脚本程序编写成独立存在的.js文件,然后再在页面中按如下方式调用它:

<script src=”myfile.js”></script>

这样,公用文件只需要下载一次,然后就进入缓冲区。等下次再次调用包含公用文件的html页面时,下载时间明显减少。

让样式表内容进入地下工作

CSS是HTML装扮器,一个漂亮的Web页面不可能没有它。HTML页面中有多种引用CSS的方法,不同的方法导致的效率也不一样。通常,我们可以将定义于<style></style>间的样式控制代码提取出来,保存到单独的.css文件中,然后在HTML页面中以<LINK>标记或者@import标记的方式进行引用:

<style>
@import url(“mysheet1.css”);
</style>
<link rel=Stylesheet href=”mysheet2.css”>

请注意2点:1、.css文件中无需包括<style>标记;2、@import和LINK标记要定义在HTML页面的HEAD部分。

宝贵内存节省两法

尽量减少HTML页面占用的内存空间是加快页面下载速度的一个有效方法。在这方面,有2个需要注意的问题:

1、使用同一种脚本语言

HTML页面离不开脚本程序的支持,我们经常会在页面中嵌入多种脚本语言,比如javascript与VBScript。但是,不知你发觉没有:这样的混合使用减慢了页面的访问速度。原因在于:要解释并运行多种脚本代码,就必须在内存中装载多种脚本引擎。所以,请尽量在页面中使用同一种脚本语言编写代码。

2、巧用IFrame

你使用过<IFRAME>标记吗?它可是一个非常美妙的功能。如果要在一个HTML文档中包含第2个页面的内容,通常的方法是使用<FRAMESET>标记。但是有了<IFRAME>,一切变得简单了。比如,开发一个文档预览页面,可以在左边放置一系列主题,在右边放置一个IFRAME,其中包含要预览的文档;当鼠标掠过左边的每一个主题链接时,就在右边建立一个新的IFRAME以预览文档。这样做,代码效率无疑是高效的,但同时导致了繁重的处理过程,最终是缓慢的速度。

没关系,我们有办法:只使用单一的IFRAME。当鼠标指向一个新主题时,只需要修改IFRAME元素的SRC属性即可。这样,任何时间内只会有一个预览文档保留在内存。

择优选用动画定位属性

每天上网浏览页面,你一定会看到许多动画效果。比如,一个可爱的小兔子在页面上来回地走动 … 实现这个效果的核心技术就是CCS定位。通常,我们是使用element.style.left和element.style.top2个属性来达到图形定位的目的。但是,这样做会产生一些问题:left属性返回一个字符串,并且其中包含了度量单位(比如100px)。因此,要设定新的位置坐标,就必须首先对这个字符串返回值进行处理,然后才能赋值,象下面一样:

dim stringLeft, intLeft

stringLeft = element.style.left

intLeft = parseInt(stringLeft)

intLeft = intLeft + 10

element.style.left = intLeft;

你一定会感觉做这么点事情竟要编写这么复杂的代码,是否有更简洁的方法?当然有!请看这4个属性:posLeft、posTop、posWidth

和 posHeight,它们对应于相应字符串返回值的点数数值。好了,使用这些属性重新编写代码实现上面代码实现的功能:

element.style.posLeft += 10

代码短小、速度却更快!

循环控制多个动画

说到制作动画效果,当然离不开定时器的运用。通常的方法就是使用window.setTimeout来不断地定位页面上的元素。但是,如果页面上有多个动画要显示,是不是就要设定多个定时器呢?答案是No!原因很简单:定时器功能将消耗掉大量宝贵的系统资源。可是我们仍能在页面上控制多个动画,技巧就是使用一个循环。在循环中根据不同的变量值控制相应动画的位置,整个循环中只使用一个window.setTimeout()函数调用。

Visibility快于Display

让图画时隐时现会创造很有趣的效果,有2种方法可以实现这个目的:使用CSS的visibility属性或者display属性。对于绝对位置元素,diaplay和visibility具有同样的效果。两者的区别在于:设置为display:none的元素将不再占用文档流的空间,而设置为visibility:hidden的元素仍然保留原位置。

但是如果要处理绝对位置的元素,使用visibility会更快。

从小处着手

编写DHTML网页的一个重要提示是:从小处着手。初次编写DHTML页面时,一定不要试图在页面中使用你了解到的全部DHTML功能。每次可以只使用一个单一的新特征,并且仔细地观察由此产生的变化。如果发现性能有所下降,就可以快速地找到为什么。

脚本的DEFER化

DEFER是脚本程序强大功能中的一个“无名英雄”。你可能从没有使用过它,但是看完这里的介绍后,相信你就离不开它。它告诉浏览器Script段包含了无需立即执行的代码,并且,与SRC属性联合使用,它还可以使这些脚本在后台被下载,前台的内容则正常显示给用户。

<SCRIPT DEFER>
function UsedLater()
{
// 用户与页面交互操作时才使用到的函数
}
</SCRIPT>

<SCRIPT>
// 立即要执行的脚本程序
document.write(“<H1>Immediate Gratification</H1>”);
</SCRIPT>

最后请注意两点:

1、不要在defer型的脚本程序段中调用document.write命令,因为document.write将产生直接输出效果。

2、而且,不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

保持同一URL的大小写一致性

我们都知道UNIX服务器是大小写敏感的,但是你知道吗:Internet Explorer的缓冲区也是区别对待大小写字符串的。因此,作为web开发者,一定要记住保持相同链接的URL字符串在不同位置的大小写的一致性。否则,就会在浏览器的缓冲区中存放同一位置的不同文件备份,也增加了下载同一位置内容的请求次数。这些都无疑降低了web访问效率。所以请谨记:同一位置的URL,在不同页面中请保持URL字符串的大小写一致性。

让标记有始有终

自己编写或者查看他人的HTML代码时,我们一定都遇到过标记有头无尾的情况。比如:

<P>有头无尾标记举例
<UL>
<LI>第一个
<LI>第二个
<LI>第三个
</UL>

很明显,上面的代码中缺少三个</LI>结束标记。但是这并不妨碍它的正确执行。在HTML中,这样的标记还有一些,例如FRAME、IMG和P。

可是请不要偷懒,请将结束标记写完整,这样做不仅使HTML代码格式规范,更可以加速页面的显示速度。因为Internet Explorer将不会花费时间判断和计算段落或者列表项目在哪里结束。

<P>有头有尾标记举例</P>
<UL>
<LI>第一个</LI>
<LI>第二个</LI>
<LI>第三个</LI>
</UL>

OK,以上列举了有关加速HTML页面的10个处理技巧,描述这些很简单,但是只有真正领会并掌握其中的本质,并且举一反三,才会编写出更快、更好的程序。

基于Nginx下的Joomla伪静态Rewrite配置[原创]

配置文件具体如下,此配置文件已在某行业网站生产环境中实验成功。

 

user  www webuser;

worker_processes 1;

error_log  /web/logs/nginx_error.log  crit;

pid        /usr/local/nginx/logs/nginx.pid;

#Specifies the value for maximum file descriptors that can be opened by this process.
worker_rlimit_nofile 65535;

events
{
  use epoll;
  worker_connections 65535;
}

http
{
  include       mime.types;
  default_type  application/octet-stream;

  #charse  gb2312;

  server_names_hash_bucket_size 128;
  client_header_buffer_size 32k;
  large_client_header_buffers 1 128k;
  client_max_body_size 8m;

  sendfile on;
  tcp_nopush     on;

  keepalive_timeout 60;

  tcp_nodelay on;

  fastcgi_connect_timeout 300;
  fastcgi_send_timeout 300;
  fastcgi_read_timeout 300;
  fastcgi_buffer_size 128k;
  fastcgi_buffers 8 128k;
  fastcgi_busy_buffers_size 256k;
  fastcgi_temp_file_write_size 256k;
  fastcgi_intercept_errors on;

  gzip on;
  gzip_min_length  1k;
  gzip_buffers     1 64k;
  gzip_http_version 1.0;
  gzip_comp_level 2;
  gzip_types       text/plain application/x-javascript text/css application/xml;
  gzip_vary on;

  server
  {
    listen       203.130.37.35:80;
    server_name www.luxee.com luxee.com;
    index index.php index.html index.htm;
    root  /web/luxee/domains/new.luxee.com/public_html/;

    location / {
      if ( $args ~ “mosConfig_[a-zA-Z_]{1,21}(=|\%3d)” ) {
      set $args “”;
        rewrite ^.*$ http://$host/index.php last;
      return 403;}

      if ( $args ~ “base64_encode.*\(.*\)”) {
      set $args “”;
        rewrite ^.*$ http://$host/index.php last;
      return 403;}

      if ( $args ~ “(\<|%3C).*script.*(\>|%3E)”) {
      set $args “”;
        rewrite ^.*$ http://$host/index.php last;
      return 403;}

      if ( $args ~ “GLOBALS(=|\[|\%[0-9A-Z]{0,2})”) {
      set $args “”;
        rewrite ^.*$ http://$host/index.php last;
      return 403;}

      if ( $args ~ “_REQUEST(=|\[|\%[0-9A-Z]{0,2})”) {
      set $args “”;
        rewrite ^.*$ http://$host/index.php last;
      return 403;}

      if (!-e $request_filename) {
        rewrite (/|\.php|\.html|\.htm|\.feed|\.pdf|\.raw|/[^.]*)$ /index.php last;
      break;
      }   
    }
   
    location ~ .*\.(php|php5) $
    {
      fastcgi_pass  unix:/tmp/php-cgi.sock;
      #fastcgi_pass  127.0.0.1:9000;
      fastcgi_index index.php;
      include fcgi.conf;
    }

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
      expires      30d;
    }

    location ~ .*\.(js|css) $
    {
      expires      12h;
    }

    access_log  /web/logs/luxee.com-access.log;
  }

}

本文来自:韦少乾博客(mven.cn)
详细出处:http://mven.cn/post/53.html

优秀前端设计网站推荐

蜗爱CSS http://www.woaicss.com/

CSS-JS.COM WEB前端开发论坛 http://www.css-js.com/index.php

CssRain-前端技术 http://www.cssrain.cn/

Rainweb前端技术博客 http://www.rainweb.cn/

CSS9.NET http://css9.net/

WEB前端开发 http://www.css88.com/

WEB开发笔记 http://www.chhua.com/

重构论坛 http://bbs.chonggou.net/

WEB前端寒风 http://www.webbise.com/

网页之家 http://www.51css.net/

水寒冰居 http://87cool.com/default.aspx

蓝色理想 http://www.blueidea.com/

我爱CSS http://www.52css.com/

Web前端 – 博客园 http://www.cnblogs.com/cate1/108703/

jquery教程网 http://jqueryajax.com

HTML , CSS & JavaScript – 博客大巴 http://monw3c.blogbus.com/c2005651/

所有Web前端列表 – JavaEye新闻频道分类浏览 http://www.iteye.com/news/category/web

Flash资源网 http://www.zhaofla.com/

奥酷FLASH http://www.okuoo.cn/

flash片头之家 http://www.sinker.cn/

模板王 http://www.mobanwang.com/

webservice+jsp实现天气预报功能

今天下午,着手制作了一个天气预报调用模块,采用SOAP + WEBSERVICE + JAVA + JSP实现,具体如下:

/**
 * 
 */
package com.hnwater.business.weather;

import java.io.InputStream;
import java.io.OutputStream;
import java.io.OutputStreamWriter;
import java.net.URL;
import java.net.URLConnection;
import java.util.ArrayList;
import java.util.Hashtable;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import org.w3c.dom.Document;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;

/**
 * @author hxb
 *
 */
public class WeatherUtil {

	private String encoding = "GBK";
	private String webServiceUrl = "http://www.webxml.com.cn/WebServices/WeatherWebService.asmx";
	
	
	/**
	 * @return get instance of WeatherUtil
	 */
	public static WeatherUtil getInstance(){
		return new WeatherUtil();
	}
	
	/**   
     * 获取SOAP的请求头,并替换其中的标志符号为用户输入的城市   
     * @param city用户输入的城市名称   
     * @return 客户将要发送给服务器的SOAP请求   
     */   
    private String getSoapRequest(String city) {    
        StringBuilder sb = new StringBuilder();    
        sb.append("< xml version=\"1.0\" encoding=\"" + encoding + "\" >");
        sb.append("<soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" ");
        sb.append("xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" ");
        sb.append("xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">");
        sb.append("<soap:Body>");
        sb.append("<getWeatherbyCityName xmlns=\"http://WebXml.com.cn/\">");
        sb.append("<theCityName>");
        sb.append(city);
        sb.append("</theCityName>");
        sb.append("</getWeatherbyCityName>");
        sb.append("</soap:Body>");
        sb.append("</soap:Envelope>");    
        return sb.toString();    
    }   
    /**   
     * 用户把SOAP请求发送给服务器端,并返回服务器点返回的输入流   
     * @param city用户输入的城市名称   
     * @return 服务器端返回的输入流,供客户端读取   
     * @throws Exception   
     */   
    private InputStream getSoapInputStream(String city) throws Exception {    
        try {    
            String soap = getSoapRequest(city);    
            if (soap == null) {    
                return null;    
            }    
            URL url = new URL(webServiceUrl);    
            URLConnection conn = url.openConnection();    
            conn.setUseCaches(false);    
            conn.setDoInput(true);    
            conn.setDoOutput(true);    
   
            conn.setRequestProperty("Content-Length", Integer.toString(soap    
                    .length()));    
            conn.setRequestProperty("Content-Type", "text/xml; charset=" + encoding);    
            conn.setRequestProperty("SOAPAction",    
                    "http://WebXml.com.cn/getWeatherbyCityName");    
   
            OutputStream os = conn.getOutputStream();    
            OutputStreamWriter osw = new OutputStreamWriter(os, encoding);    
            osw.write(soap);    
            osw.flush();    
            osw.close();    
   
            InputStream is = conn.getInputStream();    
            return is;    
        } catch (Exception e) {    
            e.printStackTrace();    
            return null;    
        }    
    }   
    /**   
     * 对服务器端返回的XML进行解析   
     * @param city 用户输入的城市名称   
     * @return 字符串 用,分割   
     */   
    public Hashtable<String,Object> getWeather(String city) {
    	Hashtable<String,Object> weathers = new Hashtable<String,Object>(0);
        try {    
            Document doc = null;    
            DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();    
            dbf.setNamespaceAware(true);    
            DocumentBuilder db = dbf.newDocumentBuilder();    
            InputStream is = getSoapInputStream(city);    
            doc = db.parse(is);    
            NodeList nl = doc.getElementsByTagName("string");    
            for (int count = 0; count < nl.getLength(); count++) {    
                Node n = nl.item(count);
                String nv = n.getFirstChild().getNodeValue();//当前节点信息
                nv = (nv == null   "" : nv);
                if(nv.equals("查询结果为空!")) {
                    return null;    
                }    
                if(count != 11){
                	weathers.put(WeatherObj.input.get(count), nv);
                	continue;
                }
                if(count == 11){
                	this.analyzedZhiShu(weathers, 11,nv);
                }
            }    
            is.close();    
            
            return weathers;
            
        } catch (Exception e) {    
            e.printStackTrace();    
            return null;    
        }    
    }
    /**
     * @param weathers
     * @param indexId
     * 解析各个指数信息
     */
    private boolean analyzedZhiShu(Hashtable<String,Object> weathers,int indexId,String zhiShuMess){
    	if(weathers == null || zhiShuMess == null || zhiShuMess.equals("")){
    		return false;
    	}
    	ArrayList<WeatherObj> objs = new ArrayList<WeatherObj>(0);
    	
		String s1Content = "";
		String s2Content = "";
		String s3Content = "";
		String s4Content = "";
		String s5Content = "";
		String s6Content = "";
		String s7Content = "";
		String s8Content = "";
		//这里开始进行具体详细测试
		String str = zhiShuMess;
		//穿衣指数
		s1Content = str.substring(str.indexOf(WeatherObj.CHUANYIZHISHU) + WeatherObj.CHUANYIZHISHU.length(), str.indexOf(WeatherObj.GANMAOZHISHU));
		WeatherObj obj1 = new WeatherObj();
		obj1.setName(WeatherObj.CHUANYIZHISHU);
		obj1.setMessage(s1Content);
		objs.add(obj1);
		//感冒指数
		s2Content = str.substring(str.indexOf(WeatherObj.GANMAOZHISHU) + WeatherObj.GANMAOZHISHU.length(), str.indexOf(WeatherObj.CHENLIANZHISHU));
		WeatherObj obj2 = new WeatherObj();
		obj2.setName(WeatherObj.GANMAOZHISHU);
		obj2.setMessage(s2Content);
		objs.add(obj2);
		//晨练指数
		s3Content = str.substring(str.indexOf(WeatherObj.CHENLIANZHISHU) + WeatherObj.CHENLIANZHISHU.length(), str.indexOf(WeatherObj.JIAOTONGZHISHU));
		WeatherObj obj3 = new WeatherObj();
		obj3.setName(WeatherObj.CHENLIANZHISHU);
		obj3.setMessage(s3Content);
		objs.add(obj3);
		//交通指数
		s4Content = str.substring(str.indexOf(WeatherObj.JIAOTONGZHISHU) + WeatherObj.JIAOTONGZHISHU.length(), str.indexOf(WeatherObj.LIANGSHAIZHISHU));
		WeatherObj obj4 = new WeatherObj();
		obj4.setName(WeatherObj.JIAOTONGZHISHU);
		obj4.setMessage(s4Content);
		objs.add(obj4);
		//晾晒指数
		s5Content = str.substring(str.indexOf(WeatherObj.LIANGSHAIZHISHU) + WeatherObj.LIANGSHAIZHISHU.length(), str.indexOf(WeatherObj.LVYOUZHISHU));
		WeatherObj obj5 = new WeatherObj();
		obj5.setName(WeatherObj.LIANGSHAIZHISHU);
		obj5.setMessage(s5Content);
		objs.add(obj5);
		//旅游指数
		s6Content = str.substring(str.indexOf(WeatherObj.LVYOUZHISHU) + WeatherObj.LVYOUZHISHU.length(), str.indexOf(WeatherObj.LUKUANGZHISHU));
		WeatherObj obj6 = new WeatherObj();
		obj6.setName(WeatherObj.LVYOUZHISHU);
		obj6.setMessage(s6Content);
		objs.add(obj6);
		//路况指数
		s7Content = str.substring(str.indexOf(WeatherObj.LUKUANGZHISHU) + WeatherObj.LUKUANGZHISHU.length(),str.indexOf(WeatherObj.SHUSHIDUZHISHU));
		WeatherObj obj7 = new WeatherObj();
		obj7.setName(WeatherObj.LUKUANGZHISHU);
		obj7.setMessage(s7Content);
		objs.add(obj7);
		//舒适度指数
		s8Content = str.substring(str.indexOf(WeatherObj.SHUSHIDUZHISHU) + WeatherObj.SHUSHIDUZHISHU.length());
		WeatherObj obj8 = new WeatherObj();
		obj8.setName(WeatherObj.SHUSHIDUZHISHU);
		obj8.setMessage(s8Content);
		objs.add(obj8);
    	
    	weathers.put(WeatherObj.ZHISHU, objs);
    	
    	return true;
    } 
    
    public static void main(String[] args0){
    	WeatherUtil wu = WeatherUtil.getInstance();
    	wu.getWeather("靖宇");
    }
}
/**
 * 
 */
package com.hnwater.business.weather;

import java.util.Hashtable;

/**
 * @author hxb
 *
 */
public class WeatherObj {

	public static final String REGIONFIRST = "_regionFirst";//上级行政区
	public static final String REGIONSECOND = "_regionSecond";//本级行政区
	public static final String REGIONID = "_regionId";//行政区id
	public static final String REGIONPIC = "_regionPic";//行政区图片
	public static final String REPORTTIME = "_reportTime";//最新上报时间
	public static final String TODAYTEMPERATURE = "_todayTemperature";//今天温度
	public static final String TODAYDATE = "_todayDate";//今天日期
	public static final String TODAYWIND = "_todayWind";//今天风况
	public static final String TODAYPIC_1 = "_todayPic_1";//今天天气图片1
	public static final String TODAYPIC_2 = "_todayPic_2";//今天天气图片2
	public static final String TODAYDETAIL = "_todayDetail";//今天天气实况
	public static final String ZHISHU = "_zhiShu";//各个指数
	public static final String CHUANYIZHISHU = "穿衣指数:";
	public static final String GANMAOZHISHU = "感冒指数:";
	public static final String CHENLIANZHISHU = "晨练指数:";
	public static final String JIAOTONGZHISHU = "交通指数:";
	public static final String LIANGSHAIZHISHU = "晾晒指数:";
	public static final String LVYOUZHISHU = "旅游指数:";
	public static final String LUKUANGZHISHU = "路况指数:";
	public static final String SHUSHIDUZHISHU = "舒适度指数:";
	public static final String TOMORROWTEMPERATURE = "_tomorrowTemperature";//明天温度
	public static final String TOMORROWDATE = "_tomorrowDate";//明天日期
	public static final String TOMORROWWIND = "_tomorrowWind";//明天风况
	public static final String TOMORROWPIC_1 = "_tomorrowPic_1";//明天天气图片1
	public static final String TOMORROWPIC_2 = "_tomorrowPic_2";//明天天气图片2
	public static final String AFTERTOMORROWTEMPERATURE = "_affterTomorrowTemperature";//后天温度
	public static final String AFTERTOMORROWDATE = "_affterTomorrowDate";//后天日期
	public static final String AFTERTOMORROWWIND = "_affterTomorrowWind";//后天风况
	public static final String AFTERTOMORROWPIC_1 = "_affterTomorrowPic_1";//后天天气图片1
	public static final String AFTERTOMORROWPIC_2 = "_affterTomorrowPic_2";//后天天气图片2
	public static final String DESCRIPT = "_descript";//本地介绍
	
	public static final Hashtable<Integer,String> input = new Hashtable<Integer,String>(0);//常量与数量对应
	
	static{
		input.put(0, REGIONFIRST);
		input.put(1, REGIONSECOND);
		input.put(2, REGIONID);
		input.put(3, REGIONPIC);
		input.put(4, REPORTTIME);
		
		input.put(5, TODAYTEMPERATURE);
		input.put(6, TODAYDATE);
		input.put(7, TODAYWIND);
		input.put(8, TODAYPIC_1);
		input.put(9, TODAYPIC_2);
		input.put(10, TODAYDETAIL);
		
		input.put(11, ZHISHU);
		
		input.put(12, TOMORROWTEMPERATURE);
		input.put(13, TOMORROWDATE);
		input.put(14, TOMORROWWIND);
		input.put(15, TOMORROWPIC_1);
		input.put(16, TOMORROWPIC_2);
		
		input.put(17, AFTERTOMORROWTEMPERATURE);
		input.put(18, AFTERTOMORROWDATE);
		input.put(19, AFTERTOMORROWWIND);
		input.put(20, AFTERTOMORROWPIC_1);
		input.put(21, AFTERTOMORROWPIC_2);
		
		input.put(22, DESCRIPT);
	}
	
	private String name;
	
	private String message;

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}
	
	
	
}

 

<%@ page language="java" pageEncoding="GBK"%>
<%@ page import="java.util.ArrayList,java.util.Hashtable"%>
<jsp:directive.page import="com.hnwater.business.weather.WeatherObj;"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>城市天气信息</title>
<%--		
	<link rel="stylesheet" type="text/css" href="../css/webstyle.css">
--%>
	</head>
<style>
body{
	font-size:12px;
}
table{
	border-collapse:sparate;
	border-spacing:0px;
}
td{
	padding:0px;
    border:0px solid #000;
    text-align:center;
    font-size:12px;
	color:#2A5CAA;
	border-color:#2A5CAA;
}
.noMess{
	text-align: center;
	text-valign: center;
}

</style>	
	<body>
<%
	String city = "白山";
	Hashtable<String,Object> weathers = com.hnwater.business.weather.WeatherUtil
		.getInstance().getWeather(city);
	if(weathers == null){					
%>
	<span class="noMess">
		暂不支持该<%=city%>地区天气预报!!!
	</span>	
<%}else{ %>
	<table border="0" cellpadding="0" cellspacing="0" width="380">
		<tr>
			<td><%=weathers.get(WeatherObj.REGIONFIRST) + " " + weathers.get(WeatherObj.REGIONSECOND)%> 72小时天气预报</td>
			<td>最新上报时间:<%=weathers.get(WeatherObj.REPORTTIME)%></td>
		</tr>
		<tr>
			<td colspan="2">
				<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td><%=weathers.get(WeatherObj.TODAYDATE) + " " + weathers.get(WeatherObj.TODAYTEMPERATURE)%></td>
				</tr>
				<tr>
					<td><%=weathers.get(WeatherObj.TODAYWIND)%></td>
				</tr>
				<tr>
					<td>
						<img src="../images/weather/<%=weathers.get(WeatherObj.TODAYPIC_1)%>">
						&nbsp;
						<img src="../images/weather/<%=weathers.get(WeatherObj.TODAYPIC_2)%>">
					</td>
				</tr>
				<tr>
					<td><%=weathers.get(WeatherObj.TODAYDETAIL)%></td>
				</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td><%=weathers.get(WeatherObj.TOMORROWDATE) + " " + weathers.get(WeatherObj.TOMORROWTEMPERATURE)%></td>
				</tr>
				<tr>
					<td><%=weathers.get(WeatherObj.TOMORROWWIND)%></td>
				</tr>
				<tr>
					<td>
						<img src="../images/weather/<%=weathers.get(WeatherObj.TOMORROWPIC_1)%>">
						&nbsp;
						<img src="../images/weather/<%=weathers.get(WeatherObj.TOMORROWPIC_2)%>">
					</td>
				</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td><%=weathers.get(WeatherObj.TOMORROWDATE) + " " + weathers.get(WeatherObj.TOMORROWTEMPERATURE)%></td>
				</tr>
				<tr>
					<td><%=weathers.get(WeatherObj.TOMORROWWIND)%></td>
				</tr>
				<tr>
					<td>
						<img src="../images/weather/<%=weathers.get(WeatherObj.TOMORROWPIC_1)%>">
						&nbsp;
						<img src="../images/weather/<%=weathers.get(WeatherObj.TOMORROWPIC_2)%>">
					</td>
				</tr>
				</table>
			</td>
		</tr>
		<%
			ArrayList<WeatherObj> objs = (ArrayList<WeatherObj>)weathers.get(WeatherObj.ZHISHU);
			for(int i = 0;objs != null && i < objs.size();i++){
				WeatherObj obj = objs.get(i);
		 %>
		<tr>
			<td><%=obj.getName()%></td>
			<td><%=obj.getMessage()%></td>
		</tr>
		<%} %>
	</table>
	
	
	
	
<%} %>		
	</body>
</html>

  附件为气象信息所需图标。

JSP、Servlet中的相对路径和绝对路径(包括路径问题)

JSP 和 Servlet 中的绝对路径和相对路径问题困扰了我好几天,经过努力之后将其部分心得和大家共享。

       前提:假设你的 Http 地址为 http://192.168.0.1/ 你的 web 应用为 webapp ,那么你的 web 应用 URL 为 http://192.168.0.1/webapp/

       web 应用的目录结构:

       webapp/

              web-inf/

                 classes/

                     lib/

                     web.xml

                              <servlet-mapping>

                               <servlet-name>handleservlet</servlet-name>

                               <url-pattern>/handleservlet</url-pattern> 此映射是相对于当前 web 应用的

                             </servlet-mapping>

              user/

a.jsp

b.jsp

              images/

              css/

              js/

             

       所有相对路径都是由“ / ”开头的。如: /image/a.gif , /user/main.jsp ,大家知道在 html 中的相对路径是这样的:

       有个 html 文件: a.html ,其中有 <link href=”one.css” rel=”stylesheet” type=”text/css”> ,其中 href 属性表示引用的 css 文件的路径。

one.css :表示 one.css 和 a.hmtl 处于同一个目录

user/one.css :表示 one.css 处于 a.html 所在目录的子目录 user 中。

../one.css :表示 one.css 位于 a.hmtl 上一级目录下,

../../one.css :表示 one.css 位于 a.hmtl 上一级目录的上一级目录下,

./ :表示和 a.hmtl 同一目录

我们称上述相对路径为 html 相对路径

1、 服务器端的地址

服务器端的相对地址指的是相对于你的 web 应用的地址,这个地址是在服务器端解析的(不同于 html 和 javascript 中的相对地址,他们是由客户端浏览器解析的)也就是说这时候在 jsp 和 servlet 中的相对地址应该是相对于你的 web 应用,即相对于 http://192.168.0.1/webapp/ 的。

其用到的地方有:

forwarder : servlet 中的 request.getRequestDispatcher(address); 这个 address 是在服务器端解析的,所以,你要 forwarder 到 a.jsp 应该这么写: request.getRequestDispatcher(“/user/a.jsp”) 这个 / 相对于当前的 web 应用 webapp ,其绝对地址就是: http://192.168.0.1/webapp/user/a.jsp 。

sendRedirect :在 jsp 中 <%response.sendRedirect(“/rtccp/user/a.jsp”);%>

2、 客户端的地址

所有的 html 中的相对地址都是相对于 http://192.168.0.1/ 的,而不是 http://192.168.0.1/webapp/ 的。

Html 中的 form 表单的 action 属性的地址应该是相对于 http://192.168.0.1/ 的,所以,如果提交到 a.jsp 为: action = ”/webapp/user/a.jsp” ;提交到 servlet 为 action = ”/webapp/handleservlet”

Javascript 也是在客户端解析的,所以其相对路径和 form 表单一样。

3、 站点根目录和 css 路径问题

我们称类似这样的相对路径 /webapp/…. 为相对于站点根目录的相对路径。

当在 jsp 中引入 css 时,如果其相对路径相对于当前 jsp 文件的,而在一个和这个 jsp 的路径不一样的 servlet 中 forwarder 这个 jsp 时,就会发现这个 css 样式根本没有起作用。这是因为在 servlet 中转发时 css 的路径就是相对于这个 servlet 的相对路径而非 jsp 的路径了。所以这时候不能在 jsp 中用这样的路径: <link href=”one.css” rel=”stylesheet” type=”text/css”> 或者 <link href=”../../one.css” rel=”stylesheet” type=”text/css”> 类似 href=”one.css” 和 ../../one.css 的 html 相对路径是相对于引用这个 css 的文件的相对路径。而在 servlet 中转发时就是相对于这个 servlet 的相对路径了,因为 jsp 路径和 servlet 路径是不一样的,所以这样的引用肯定是出错的。

所以这个时候,要用站点根目录,就是相对于 http://192.168.0.1/ 的目录,以“ / ”开头。

因此上述错误应更正为 href=”/webapp/one.css” 类似的站点根目录的相对目录。这样在 servlet 转发后和 jsp 中都是相对于站点根目录的相对路径,就能正确使用所定义的 css 样式了。

===================================================================

在jsp中经常会遇到路径的问题,出现404的错误或者是图片无法显示.

这个问题可以从以下几个方面来解决:

    1 链接或表单提交的路径

    2 重定向和转发的路径

    3 在MyEclipse有jsp的两种模板advanced 和 base Templates的路径问题

以下为解决之道

1 表单提交和链接都是从客户端请求请求而来

  /指的Tomcat的根目录,写绝对路径应该写成”/当前Web程序根名称/资源名” 如”/WebModule1/jsp1.jsp”,”/bbs/servlet/MyServlet”

2 重定向和转发的路径问题

  写相对路径重定向和转发没有区别

 

  重定向response.sendRedirect(“”)是服务器向客户端发送一个请求头信息,由客户端再请求一次服务器.因此情况同上述1的一样,

  转发是在服务器内部进行的,写绝对路径/开头指的是当前的Web应用程序.绝对路径写法就是”/jsp1.jsp”或”/servlet/MyServlet”

  总结:以上两点要注意是区分是从服务器外的请求,还在是内部转发,从服务器外的请求,从Tomcat根写起(就是要包括当前Web的根),是服务器内部的转发,很简单了,因为在当前服务器内,/写起指的就是当前Web的根.

3 在MyEclispe中的JSP的两种模板,一种是Advanced,一种是Basic

  两者的区别也会涉及到路径问题,如图片的路径,链接的路径

 

  Advanced Template中页面的代码多了以下代码:

  <%

      String path = request.getContextPath();

      String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;

  %>

   <base href=”<%=basePath%>”>

其中<base href=”<%=basePath%>”>必须放在<head></head>中

这段代码的作用是设置基础路径的,basepath为变量.<base href=””>标签的用处是解决编程时候的相对路径问题.

设置了<base href=”<%=basePath%>”>

页面上图片,链接的路径指的都是当前应用程序的根路径下.

当然,这个base还有一个用法,如在head部分加上这么一行: <base href=”_blank”> ,就是默认所有链接在新窗口打开。

何为w3c

W3C:W3C释义 W3C是英文 World Wide Web Consortium 的缩写,中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee。 W3C组织是对网络标准制定的一个非赢利组织,像HT…

W3C组织:W3C组织是对网络标准制定的一个非赢利组织,W3C是World Wide Web Consortium(万维网联盟)的缩写,像HTML、XHTML、CSS、XML的标准就是由W3C来定制。 W3C的官方网站网址为 http://www.W3C.org 根据W3C官方网站的介绍,W3C会员包括生产技…

org.W3C.dom:软件包 org.W3C.dom 的描述 为文档对象模型 (DOM) 提供接口,该模型是 Java API for XML Processing 的组件 API。该 Document Object Model Level 2 Core API 允许程序动态访问和更新文档的内容和结构。有关更多信息,请参阅 规范。 从…

org.W3C.dom.bootstrap:软件包 org.W3C.dom.bootstrap 类摘要 DOMImplementationRegistry 启用应用程序来获得 DOMImplementation 实例的工厂。…

org.W3C.dom.events:软件包 org.W3C.dom.events 接口摘要 DocumentEvent DocumentEvent 接口提供一种机制,通过该机制用户可以创建实现支持的 Event 类型。 Event Event 接口用于为处理事件的处理程序提供关于事件的上下文信息。 EventListener EventListen…

org.W3C.dom.ls:软件包 org.W3C.dom.ls 接口摘要 DOMImplementationLS DOMImplementationLS 包括创建 Load 和 Save 对象的工厂方法。 LSInput 此接口表示数据的输入源。 LSLoadEvent 此接口表示通知文档加载完成的加载事件对象。 LSOutput 此接口表示…

WEB标准:对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manu…

html:0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时 HTML 3.2——1996年1月14日,W3C推荐标准 HTML 4.0——1997年12月18日,W3C推荐标准 HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准 ISO/IEC 1544…

xml:XML同时也推出一种新型文档类型,使得开发者也可以不必定义文档类型。 因为XML是W3C制定的,XML的标准化工作由W3C的XML工作组负责,该小组成员由来自各个地方和行业的专家组成,他们通过email交流对XML标准的意见,并提出自己的看法 (www.w3…

XHTML:所以,本质上说,XHTML是一个过渡技术,结合了部分XML的强大功能及大多数HTML的简单特性。 2000年底,国际W3C组织(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言,目的

Web开发的角色划分

Web开发经常把角色划分为界面开发人员(Designer)和程序设计人员(Developer)。我倒觉得两种角色由同一人担当开发效率更高。

1.        
DesignerDeveloper的交流成本太高。页面代码中充斥着静态HTML和服务器脚本,服务器脚本让HTML难以理解,经常让Designer很头疼,不得不反复与Developer交流。

2.        
Designer善于撰写HTML,但是不善于Clean CodeRefactoring。这就导致了最后形成的View层的HTML代码重复冗长,难以维护。现实是,Web开发的大部分工作量在表示层,难以理解,让人恶心的HTML大大增加了Web开发的成本。HTML代码也是代码,垃圾代码永远是项目的绊脚石。

3.        
一些HTML可以用DSL代替,DSL的撰写更应当由Developer来承担。XML格式的标签语言创建的初衷就是给机器读的,不是给人读的。称XML更容易让人理解的人绝对有病,每次我看见嵌套的XML标签时都想吐。自HTML创生以来,各大IDE厂商都试图减轻XML格式对人的负担,可惜都失败了,甚至会生成更加垃圾的HTML。易读易改的代码才是王道。于是一些HTMLDSL比如HAMLActiveForm诞生了。这些DSL的设计目的就是撰写表示层代码更加容易,无论对Developer还是Designer

并非Designer完全没有用武之地,Designer只要负责绘制效果图和一些Logo图片,也许还要有修改CSS的能力,然后由Developer实现HTML。只要严格按照Web标准开发,表示层可以清晰的划分为:StructureHTML),PresentationCSS),BehaviorJavaScript)。大部分的显示效果完全可以由CSS来实现,根本不用动HTML

问题是这种Developer需要比较全面地精通Web开发,难以聘用到。话又说回来,招不到精英就不要开公司,回家种田算了。If
you hire a sucker, you are a sucker.

overflow解决float浮动后高度自适应问题

也许你在做网页的时候发现,发一个区块内的元素被应用了float之后,那么整个box的高度对就不以被浮动对象的高度为标准了。

如图中的城市导航内的城市列表中采用了float之后,那个外框的高度并不是内容元素的高度:

怎么解决这个问题呢?经发现可以采用overflow来解决!方法是在父元素加上

以下是代码片段:

overflow:auto; zoom:1;

即可

overflow:auto;是让高度自适应, zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

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

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>float浮动之后的问题</title>

<style>

* { padding:0; margin:0;}

body { font-size:12px; line-height:150%;}

ul { list-style:none;}

.container { width:700px; margin:0 auto;}

.header, .footer { height:60px; background:#99CC66; margin-bottom:6px; font-size:18px; font

-weight:bold;}

.main {}

.left { float:left; width:200px;}

.sidepanel { border:1px solid #CC6600; margin-bottom:8px;}

.sidepanel h2 { font-size:12px; background:#CC6600; height:24px; line-height:24px; text-

indent:20px; color:#fff;}

.city { padding:6px 0px; overflow:auto; zoom:1;}

.city li { float:left; width:35px; text-align:center;}

.right { margin-left:200px; background:#CCCC66; height:240px;}

.hotinfo {padding:6px;}

.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}

</style>

</head>

<body>

<div class=”container”>

<div class=”header”>header</div>

<div class=”main”>

    <div class=”left”>

      <div class=”sidepanel”>

        <h2>城市导航</h2>

        <ul class=”city”>

          <li>北京</li>

          <li>上海</li>

          <li>天津</li>

          <li>南京</li>

          <li>广州</li>

          <li>重庆</li>

          <li>济南</li>

          <li>杭州</li>

          <li>郑州</li>

          <li>北京</li>

          <li>上海</li>

          <li>天津</li>

          <li>南京</li>

          <li>广州</li>

          <li>重庆</li>

          <li>济南</li>

          <li>杭州</li>

          <li>郑州</li>

        </ul>

      </div>

      <div class=”sidepanel”>

        <h2>热门文章</h2>

        <ul class=”hotinfo”>

          <li>本月20日起入境日本须留指纹</li>

          <li>本月20日起入境日本须留指纹</li>

          <li>本月20日起入境日本须留<font color=”#43FF73″>指纹</font></li>

          <li>本月20日起入境日本须留指纹</li>

          <li>本月20日起入境日本须留指纹</li>

          <li>本月20日起入境日本须留指纹</li>

          <li>本月20日起入境日本须留指纹</li>

          <li>本月20日起入境日本须留指纹</li>

          <li>本月20日起入境日本须留指纹</li>

        </ul>

      </div>

    </div>

    <div class=”right”>右侧内容</div>

</div>

<br class=”clearfloat” /><!– 用于清除浮动的元素 –>

<div class=”footer”>footer</div>

</div>

</body>

</html>

   

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

本文来自:赛酷网(www.syku.net) 原文链接:http://www.syku.net/web/pagemake/css/200711/11414.shtml

界面设计师,我们需要你

界面设计,一个在软件行业非常尴尬地位的东西,但是绝对离不开的东西,不过在软件行业的技术发展一直是为程序员们提供更佳的方式,而在界面设计方面则是在近些年来才逐渐的重视,但这并不意味着在界面设计上一直就做的很好,反倒在界面设计方面一直就是软件设计中最薄弱的环节,如果从软件设计的层面去看界面设计,N多的设计师都会看到其中犯的N多设计错误的基本常识,可以去想想为什么每次系统改界面总会是件那么痛苦的事,很多时候都是因为在项目/产品中缺乏专业的界面设计师而造成的。
在你的项目/产品中,是否有专业的界面设计师呢?
想想在我们的项目中,每次在改界面或者增加新的功能的时候,是否经常要从其他页面copy出N多相同的东西,从设计角度我们可以发现,这是一个对于软件设计而言最难以忍受的部分,而这么多年来我们却一直在忍受着,为什么呢?就是因为在我们的软件设计过程中缺乏专业的界面设计的过程,这需要专业的界面设计师来设计。
何谓界面设计师,这里不是说美工,而是指根据项目的业务需求分析形成的界面元素的设计方案,需要具备能够根据需求形成界面,这个界面可以是个原始的界面原型,但需要具备足够的元素,同时,界面设计师还有一个比较重要的工作是能完成界面交互的设计,当然,如果能有专业的交互设计师那么就更好了,界面设计师除了需要具备这些能力之外,还有一个非常重要的,那就是对界面元素的共性的抽象能力,最好当然是能够做到任何的页面中不出现重复的东西,这点非常重要,如果我们的软件具备了这样的设计,那么界面的修改也许不会成为一件什么痛苦的事,界面设计师需要具备的抽象能力的知识和软件设计师的抽象能力的知识体系是不同的,所以界面设计师这样的角色是在日益重视界面和交互的时代中特别需要的。
当然,现在软件业也越来越重视这方面的工作了,象UI组件库等等方式,都是对于界面设计的逐步重视,但显然在目前来看这些还是不够的,还需要不断的努力呀……
界面设计师,现在好象还真不多,不过现在的软件公司也没多少会专门设置这样的职位,希望能随着软件业的不断发展,能对这方面越来越重视,也希望社会上出现更多的这方面的专业人才,界面设计师,我们需要你….