BlogJava-log4deng-文章分类-WEBhttp://www.blogjava.net/qiyadeng/category/3464.htmlif(log.itWillForget()){ <br>&nbsp;&nbsp; log.blog("log4deng!"); <br> }<br> else if(log.isYourExperience){ <br>&nbsp;&nbsp; log.blog("log4deng!"); <br> }<br> ......zh-cnWed, 28 Feb 2007 05:24:49 GMTWed, 28 Feb 2007 05:24:49 GMT60Ajax简单实例应用http://www.blogjava.net/qiyadeng/articles/19706.htmlqiyadengqiyadengMon, 14 Nov 2005 08:04:00 GMThttp://www.blogjava.net/qiyadeng/articles/19706.htmlhttp://www.blogjava.net/qiyadeng/comments/19706.htmlhttp://www.blogjava.net/qiyadeng/articles/19706.html#Feedback15http://www.blogjava.net/qiyadeng/comments/commentRss/19706.htmlhttp://www.blogjava.net/qiyadeng/services/trackbacks/19706.htmlAjax就是最近被谈论的比较多的东西。其实，在很久以前我在一个项目中就简单地使用过这种技术，最近在很多地方被提起所以我也全面的学习了这方面的东西。
   很多概念网上都有，我会在下面的资料中列出Ajax相关的资源。下面我们就通过实例来说明Ajax给我们带来的方便。
我们的例子是通过输入一个城市的区号，页面不刷新就能知道该城市名称。zip.bmp
Demo
第一步：完成本例用到的xml文件zip.xml.

<?xml version="1.0" encoding="UTF-8"?>
<root>
 <item id="001">
  <zip>021</zip>
  <city>上海</city>
 </item>


 <item id="002">
  <zip>010</zip>
  <city>北京</city>
 </item>
 
 <item id="003">
  <zip>020</zip>
  <city>天津</city>
 </item>
  
</root>

这个例子中我只列出了三个城市，有兴趣的朋友可以添加更多。
接下来我们需要完成zip.html文件：
首先我们需要有XMLHttpRequest对象，下面这段代码就是通用的，每次我们为了得到XMLHttpRequest对象都要这么做，而且一般不需要改变！

 function getHTTPObject(){
  var xmlhttp = false;
  if(window.XMLHttpRequest){
   xmlhttp = new XMLHttpRequest();
   if(xmlhttp.overrideMimeType){
    xmlhttp.overrideMimeType('text/xml');
   }
  }
  else{
   try{
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   }catch(e){
    try{
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }catch(E){
     xmlhttp = false;
    }
   }
  }
  return xmlhttp;
 }
上面的代码看上去比较复杂，其实就只是创建XMLHttpRequest对象而已，大部分代码是为了考虑浏览器的兼容性而写的，看不懂也没有关系。

然后通过JavaScript的事件触发了XMLHttpRequest对象去和服务器端进行交互。

 function updateCity(){
  //var zipValue = document.getElementById("zip").value;
  http.open("GET",url,true);
  http.onreadystatechange = handleHttpResponse;
  http.send(null);
 }
上面这段也可以说是通用的过程，因为需要先Open一个请求，然后看它的状态来决定接下来该怎么做。可以看出我们接下来要看 handleHttpResponse。

 function handleHttpResponse(){
  if(http.readyState == 4){
   if(http.status == 200){
    var xmlDocument = http.responseXML;
    var city = "未知城市";
    var zipval = document.getElementById("zip").value;
    var items = xmlDocument.getElementsByTagName('item');
    for(var i = 0;i < items.length;i++){
     var item = items[i];
     if(item.getElementsByTagName('zip')[0].firstChild.data == zipval){
      city = item.getElementsByTagName('city')[0].firstChild.data;
      document.getElementById('city').value=city;
      return;
     }
    }
    document.getElementById('city').value=city;
   }
   else{
    alert("你所请求的页面发生异常，可能会影响你浏览该页的信息！");
   }
  }
 }
这段就是我们通过取得的区号代码去遍历XML文件直到找到和我们给出的区号代码相符的，显示出其城市名。关于xml的遍历资料中会提到。

资料：
1.http://www.blogjava.net/eamoi/category/4158.html
2.http://developer.mozilla.org/en/docs/AJAX
附带zip.xml的完整代码：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Zip.html</title>


<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<SCRIPT language="JavaScript" type="text/javaScript">
 var url = "zip.xml";
 
 function handleHttpResponse(){
  if(http.readyState == 4){
   if(http.status == 200){
    var xmlDocument = http.responseXML;
    var city = "未知城市";
    var zipval = document.getElementById("zip").value;
    var items = xmlDocument.getElementsByTagName('item');
    for(var i = 0;i < items.length;i++){
     var item = items[i];
     if(item.getElementsByTagName('zip')[0].firstChild.data == zipval){
      city = item.getElementsByTagName('city')[0].firstChild.data;
      document.getElementById('city').value=city;
      return;
     }
    }
    document.getElementById('city').value=city;
   }
   else{
    alert("你所请求的页面发生异常，可能会影响你浏览该页的信息！");
   }
  }
 }
 function updateCity(){
  var zipValue = document.getElementById("zip").value;
  http.open("GET",url,true);
  http.onreadystatechange = handleHttpResponse;
  http.send(null);
 }
 
 //该函数可以创建我们需要的XMLHttpRequest对象
 function getHTTPObject(){
  var xmlhttp = false;
  if(window.XMLHttpRequest){
   xmlhttp = new XMLHttpRequest();
   if(xmlhttp.overrideMimeType){
    xmlhttp.overrideMimeType('text/xml');
   }
  }
  else{
   try{
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   }catch(e){
    try{
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }catch(E){
     xmlhttp = false;
    }
   }
  }
  return xmlhttp;
 }
 var http = getHTTPObject();
</SCRIPT>
</head>


<body>
<form action="post">
 <p>
 区号:
 <input type="text" size="6" name="zip" id="zip" onblur="updateCity();"/>
 </p>
 城市: 
 <input type="text" name="city" id="city" />
</form>


</body>
</html>


qiyadeng 2005-11-14 16:04 发表评论
]]>DWR Samplehttp://www.blogjava.net/qiyadeng/articles/16469.htmlqiyadengqiyadengSun, 23 Oct 2005 03:52:00 GMThttp://www.blogjava.net/qiyadeng/articles/16469.htmlhttp://www.blogjava.net/qiyadeng/comments/16469.htmlhttp://www.blogjava.net/qiyadeng/articles/16469.html#Feedback0http://www.blogjava.net/qiyadeng/comments/commentRss/16469.htmlhttp://www.blogjava.net/qiyadeng/services/trackbacks/16469.html一个Ajax Projecthttp://getahead.ltd.uk/dwr/,DWR，就是有点像远程方法调用，但是它的文档里强调过，这个远程方法的调用是安全的，所有安全问题应该不需要担心。

下面测试个简单的例子，算是开始。这个例子是来自它的文档的一篇文章，主要是实现一个类似聊天室的东西，有个输入文本框，还要个显示部分。用户输入的信息点击发送就可以把消息显示到显示区域，当然是不需要刷新的^_^。
1、先到DWR网站去下载个jar包dwr.jar，地址是：http://getahead.ltd.uk/dwr/download，并把该包放到自己的webproject的WEB-INF/lib目录下。
2、然后修改配置文件web.xml把加入如下信息：


 <servlet>
  <display-name>DWR Servlet</display-name>
  <servlet-name>dwr-invoker</servlet-name>
  <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
  <init-param>
   <param-name>debug</param-name>
   <param-value>true</param-value>
  </init-param>
 </servlet>
 
 <servlet-mapping>
  <servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
 </servlet-mapping>

这个应该和我们其他的app配置没什么两样的。
3、配置DWR专门的配置文件dwr.xml(放到和web.xml一个目录下)，这个文件就是部署你可以被调用的远程的方法和类。

<dwr>
  <allow>
    <create creator="new" javascript="Chat">
     <param name="class" value="com.motel168.chat.Chat"></param>
    </create>
    <convert converter="bean" match="com.motel168.chat.Message"/>
  </allow>
</dwr>


这个文件描述的服务器端的类Chat和JavaBean,Message。

4、对应的服务器类文件：
Chat.java
package com.motel168.chat;


import java.util.LinkedList;
import java.util.List;


public class Chat {
 static LinkedList messages = new LinkedList();
 public List addMessage(String text){
  if(text != null && text.trim().length()>0){
   messages.addFirst(new Message(text));
   while(messages.size() > 10){
    messages.removeLast();
   }
  }
  return messages;
 }
 public List getMessages(){
  return messages;
 }

}
Message.java
package com.motel168.chat;


public class Message {
 long id = System.currentTimeMillis();
 String text;
 
 public Message(String newtext){
  text = newtext;
  if(text.length()>256){
   text = text.substring(0,256);
  }
  text = text.replace('<','[');
  text = text.replace('&','_');
 }
 public long getId(){
  return id;
 }
 public String getText(){
  return text;
 }
}
5、在前端页面调用：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<script type='text/javascript' src='/DWR/dwr/interface/Chat.js'></script>
<script type='text/javascript' src='/DWR/dwr/engine.js'></script>
<script type='text/javascript' src='/DWR/dwr/util.js'></script>


  <head>
    <title>chat.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
 <P>聊天记录：</P>
 <DIV id="chatlog"></DIV>
 <p>
 请输入信息：<INPUT id="text"/>
 <INPUT type="button" value="发言" onclick="sendMessage()"/>
  </body>
</html>
<script language="javascript">
 function sendMessage(){
  var text = DWRUtil.getValue("text");
  DWRUtil.setValue("text","");
  Chat.addMessage(gotMessages,text);
 }
 function gotMessages(messages)
 {
     var chatlog = "";
     for (var data in messages)
     {
         chatlog = "<div>" + messages[data].text +
             "</div>" + chatlog;
     }
     DWRUtil.setValue("chatlog", chatlog);
 }
</script>

<script type='text/javascript' src='/DWR/dwr/interface/Chat.js'></script> 是动态产生的js文件，另外两个util.js,engine.js是两个javascript库文件。

后面有个DWRUtil类可以参考对应的文档。
最后应该是类似下面这个效果：
dwrsample.bmp



qiyadeng 2005-10-23 11:52 发表评论
]]>some AJAX Projecthttp://www.blogjava.net/qiyadeng/articles/16449.htmlqiyadengqiyadengSat, 22 Oct 2005 14:32:00 GMThttp://www.blogjava.net/qiyadeng/articles/16449.htmlhttp://www.blogjava.net/qiyadeng/comments/16449.htmlhttp://www.blogjava.net/qiyadeng/articles/16449.html#Feedback0http://www.blogjava.net/qiyadeng/comments/commentRss/16449.htmlhttp://www.blogjava.net/qiyadeng/services/trackbacks/16449.html
http://trimpath.com/project/wiki/JavaScriptTemplates

Ajax pages：
http://ajax-pages.sourceforge.net/

Mochikit：
http://mochikit.com/

DWR
http://getahead.ltd.uk/dwr/

Ajaxanywhere
http://ajaxanywhere.sourceforge.net


qiyadeng 2005-10-22 22:32 发表评论
]]>javascript自动关闭浏览器http://www.blogjava.net/qiyadeng/articles/14142.htmlqiyadengqiyadengMon, 26 Sep 2005 12:57:00 GMThttp://www.blogjava.net/qiyadeng/articles/14142.htmlhttp://www.blogjava.net/qiyadeng/comments/14142.htmlhttp://www.blogjava.net/qiyadeng/articles/14142.html#Feedback0http://www.blogjava.net/qiyadeng/comments/commentRss/14142.htmlhttp://www.blogjava.net/qiyadeng/services/trackbacks/14142.html

今天碰到个简单问题，但是找了半天资料才算解决，自动关闭浏览器一直有对话框弹出。看了网上也有不少人有这个困惑，所以整理一下：

<script language="javascript">
function countdown()
{
 window.opener=null;//没有对话框，这句不可缺少
 window.close();
 }
setTimeout("countdown()",3000);
</script>

程序很简单，就是3秒钟自动关闭浏览器，不用解释^_^！



qiyadeng 2005-09-26 20:57 发表评论
]]>