2010-12-17

JApplet realize webcam

public class VC extends JApplet implements ActionListener {
public Player player = null;
public Image image = null;
/** * 保存按钮 */
private JButton save = null;
//用于applet 调用js的类jdk自带的plugin包
private JSObject jso = null;
//初始化
public void init() {
save = new JButton(" 拍 照 ");
save.addActionListener(this);
CaptureDeviceManager.getDevice("vfw:Microsoft WDM Image Capture (Win32):0");
MediaLocator ml = new MediaLocator("vfw://0");
try {
player = Manager.createRealizedPlayer(ml);
player.start();
Component comp = null;
if ((comp = player.getVisualComponent()) != null) {
add(comp, BorderLayout.CENTER);
}
this.setSize(260, 300);
} catch (Exception e) {
e.printStackTrace();
}
}
//单击拍照事件
public void actionPerformed(ActionEvent e) {
FrameGrabbingControl fgc = (FrameGrabbingControl)
player.getControl("javax.media.control.FrameGrabbingControl");
Buffer buf = fgc.grabFrame();
BufferToImage btoi = new BufferToImage((VideoFormat) buf.getFormat());
Image img = btoi.createImage(buf);
img.getScaledInstance(240, 320, img.SCALE_DEFAULT);
BufferedImage bi = new BufferedImage(img.getWidth(null),
img.getHeight(null), BufferedImage.TYPE_INT_RGB);
Graphics2D g2 = bi.createGraphics();
g2.drawImage(img, null, null);
//读取页面的url地址和文件名
String connUrl = getParameter("urladdress");
String fName = ""+System.currentTimeMillis();
String pWidth = getParameter("picwidth");
String pHeigh = getParameter("picheigh");

try {
URL url = new URL(connUrl + "?filename=" + fName + "&pwidth=" + pWidth
+ "&pheigh=" + pHeigh);
HttpURLConnection conn = (HttpURLConnection)url.openConnection();
conn.setRequestMethod("POST");
conn.setDefaultUseCaches(false);
conn.setDoOutput(true);
conn.setUseCaches(true);
conn.setRequestProperty("Content-Type", "application/octet-stream");
OutputStream out = conn.getOutputStream();
//执行把图片导成二进制的函数
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);
//获得默认的系统的二进制的图像的形式
JPEGEncodeParam param = encoder.getDefaultJPEGEncodeParam(bi);
//图片的质量
param.setQuality(1.0f, false);
//设置图片的编码器
encoder.setJPEGEncodeParam(param);
//把图片导进编码器里面,让机器编成二进制代码
encoder.encode(bi);
out.close();
//发送数据
conn.getContentType();
conn.getResponseCode();
} catch (Exception ep) {
ep.printStackTrace();
}
//调用js方法
JSObject window = JSObject.getWindow(this); // 获取JavaScript窗口句柄,引用当前文档窗口
// 调用JavaScript的myFunction(message)方法
window.call("myFunction", new Object[]{fName});//参数用数组的形势表示。
}

/**
* 关闭摄像头
*/
@Override
public void stop() {
player.close();
player.deallocate();
}

--
we drink green tea

two way to realize http long connection

Pushlet

In this technique, the server takes advantage of persistent HTTP
connections and leaves the response perpetually "open" (i.e. it never
terminates the response), effectively fooling the browser into
continuing in "loading" mode after the initial page load would
normally be complete. The server then periodically sends snippets of
javascript to update the content of the page, thereby achieving push
capability. By using this technique the client doesn't need Java
applets or other plug-ins to keep an open connection to the server.
The clients will be automatically notified by new events, pushed by
the server [8][9]. One serious drawback to this method, however, is
the lack of control the server has over the browser timing out. A page
refresh is always necessary if a timeout occurs on the browser end.

[edit]Long polling

Long polling is a variation of the traditional polling technique and
allows emulation of an information push from a server to a client.
With long polling, the client requests information from the server in
a similar way to a normal poll. However, if the server does not have
any information available for the client, instead of sending an empty
response, the server holds the request and waits for some information
to be available. Once the information becomes available (or after a
suitable timeout), a complete response is sent to the client. The
client will normally then immediately re-request information from the
server, so that the server will almost always have an available
waiting request that it can use to deliver data in response to an
event. In a web/AJAX context, long polling is also known as Comet
programming.

Long polling is itself not a push technology, but can be used under
circumstances where a real push is not possible.[citation needed]

--
we drink green tea

2010-12-16

Comet技术 tomcat 实现

摘要:Comet技术通过实现服务器推(server push)来解决AJAX需要定时频繁发送请求的问题,从而给Web实时系统带来了全新的交互性。本文分析了Comet技术的两种实现方式:长轮询方式 (long-polling)和流方式(streaming),并通过一个服务器推送随即数的实例,展示了使用Comet技术开发Java Web实时系统的开发方法和步骤。
  关键词:Comet;AJAX;服务器推送;Web实时系统
  
  HTTP协议是互联网上大量信息交换的基础,其特点是,它是基于请求—响应模式的无状态的单向协议,即必须由客户端发起一个请求建立连接,服务器接收请求,把数据返回给客户端,然后释放连接。下一次,再由客户端发起另一次请求,重复上述过程。服务器始终处于"被动"地位。
  HTTP协议这一特点,既成就了它的成功,也导致了它的局限性。服务器处理请求的经典模式是一个线程处理一个连接,结束之后,关闭该连接,释放线程以服务于其他请求。只要响应速度足够快, 那么我们可以以相对较少的服务器为数量庞大的用户提供服务。这非常适合于传统的Web应用,比如:搜索引擎、内容管理系统和电子商务网站等。然而,这种方式并不能满足有实时性要求的应用的需求,很多应用都需要服务器能实时地将更新的信息传送到客户端,而无须客户端发出请求。例如,新闻标题、证券报价和拍卖行情等。
  在Web的早期,人们通过在HTML头部加入META元信息来实现HTML自动刷新。该标记指示浏览器每隔一定的时间间隔刷新一次页面。这不仅带来糟糕的用户体验,而且是一种低效的做事方式。因为如果没有新的数据,该页面就没必要刷新;如果页面只存在小范围内的变化,该页面就没有必要全部刷新。
  AJAX(Asynchronous JavaScript and XML,异步JavaScript和XML)的出现改变了上述情况。Ajax的工作原理相当于在客户和服务器之间加了—个中间层,使客户请求与服务器响应异步化。并不是所有的请求都提交给服务器,像—些数据验证和数据处理等都交给AJAX引擎自己来做,只有确定需要从服务器读取新数据时再由AJAX引擎代为向服务器提交请求。使用Ajax的最大优点就是能在不刷新整个页面的前提下维护数据,使得Web应用程序更为迅捷地响应用户交互,并避免了在网络上发送那些没有改变的信息。然而,AJAX仍然受限于Web请求/响应模式的弱点,使得服务器不能推送实时动态的Web数据。
  
  1 Comet技术实现方式[1]
  Comet技术被称为反AJAX(Reverse AJAX)技术,它通过实现服务器推(server push)来解决AJAX需要定时频繁发送请求的问题。通过Comet,客户端所需要的响应信息不再需要主动地去索取,而是在服务器端以事件 (Event)的形式推至客户端。
  Comet技术的实现方式有两种:长轮询方式(long-polling)和流方式(streaming)。
  长轮询:HTTP的连接保持,服务器端会阻塞请求,直到服务器端有一个事件触发或者到达超时。客户端在收到响应后再次发出请求,重新建立连接。通过这种方式,服务器可以在数据可用的任何时候将数据"推"到客户端。因为这种方案基于AJAX,请求异步发出,无须安装插件,IE、Mozilla FireFox都支持。
  流方式:在流方式中,服务器推数据返回客户端,但不关闭连接,连接始终保持,直到超时,超时后通知客户端重新建立连接,并关闭原来的连接。
  在长轮询方式下,客户端是在XMLHttpRequest的readystate为4(即数据传输结束)时调用回调函数,进行信息处理。当 readystate为4时,数据传输结束,连接已经关闭。Mozilla Firefox提供了对流方式的支持,即readystate为3时(数据仍在传输中),客户端可以读取数据,从而无须关闭连接,就能读取处理服务器端返回的信息。IE在readystate为3时,不能读取服务器返回的数据,目前IE不支持流方式。
  不管是长轮询还是流,请求都需要在服务器上存在一段较长时间,因此Comet被称为"基于HTTP长连接的服务器推技术"。这打破了每个请求一个线程的模型。这个模型显然对Comet不适用。 Java对此提出了非阻塞IO(non-blocking IO)解决方案,Java通过它的NIO库提供非阻塞IO处理Comet。
  传统的阻塞式IO,每个连接必须要开一个线程来处理,您始终从一个线程中读取流直到整个流完成,然后关闭连接。因此阻塞式IO对大量并发的短生命周期连接不会造成问题。而非阻塞IO处理连接是异步的。当某个连接发送请求到服务器,服务器把这个连接请求当作一个请求"事件",并把这个"事件"分配给相应的函数处理。我们把这个处理函数放到线程中去执行,执行完就把线程归还。这样一个线程就可以异步地处理多个事件。
  为了获得事件通知,我们需要一个机制,它只在需要读时才读,需要写时才写,但又保持连接打开以迅速响应发生的事件。为了方便这个过程,就要用到NIO,它已是1.4版本以后的Java语言的一部分。
  
  2 使用Java开发Comet风格的Web应用
  支持Comet的Java Web开源服务器有Tomcat 6.0.14和Jetty 6.1.14,它们的实现方法各不相同。下面我们以Tomcat为例来说明开发Comet风格的Web应用的步骤[2]。
  本例以流方式实现了一个Comet应用。服务器每隔一定的时间间隔产生一个0~9之间的随机数,将数据推送到客户端。客户端接收并显示。
  第一,要下载和安装Tomcat6.X(本文截稿时,Tomcat最新版本是6.0.24)。
  第二,为了使用Comet,要求服务器支持NIO,所以要修改Tomcat配置文件conf/server.xml, 即启用异步版本的IO连接器,这个非常关键。如下所示:
  
  第三,该项目需要Comet的API支持,Tomcat6自带的Comet API包为catalina.jar,在Tomcat安装目录下的lib目录中。
  第四,编写Servlet。通过servlet实现CometProcessor接口。这个接口要求实现event()方法,在配置的 Http11NioProtocol调用event()方法来处理请求,而不是doGet或doPost。最基本的支持Comet的servlet实现如程序清单1所示。
  
  在event()方法中,分别处理连接开始(BEGIN)、新数据可用(READ),连接结束(END),或出错等事件。Comet允许针对不同的事件指定不同的连接超时。这意味着可以给常规的请求设置很短的生命周期,但是对于响应长连接请求的机制,可以将这个生命周期延长至几分钟。
论文出处(作者):

TestComet Servlet中,在连接开始时首先设置连接超时为60秒,接着启动一个推送数据的线程。该线程的实现类为RandomSender,如程序清单2所示。请注意,这个类含有一个 ServletResponse对象。回头看看清单1中的event()方法,当事件为BEGIN时,response对象被传入到 RandomSender中。RandomSender的run()使用ServletResponse将数据发送回客户机。因为要实现流风格的 Comet,所以不能关闭连接。而要使连接保持开启。如果要实现长轮询,则一旦发送完所有消息后,就要关闭连接。
  
  第五,编写客户端。在客户端,发出AJAX请求。请求和常规请求差不多。程序清单3测试了最基本的AJAX请求,它基于XMLHttpRequest, 能够很好地响应来自Comet服务器的事件。客户端在readystate为3时(数据仍在传输中)读取数据,从而无须关闭连接,就能读取处理服务器端返回的数据,将它显示在浏览器上。
  
  第六,运行程序。首先进行部署,为了使程序正常运行,先要删除本应用的lib目录下的catalina.jar,如果不这么做,会出现异常:java.lang.ClassCastException: org.apache.catalina.util.DefaultAnnotationProcessor cannot be cast to org.apache.AnnotationProcessor。
  最后,重启Tomcat6,用FireFox浏览器调用主页面index.jsp,就可以看到随机数不断地涌现。
  
  3 结束语
  采用Comet技术实现的Java Web实时系统带来了全新的交互性,目前Java Web服务器正在为实现Comet提供成熟、稳定的技术,不久的将来,Comet将成为Servlet 3.0和JavaEE6的标准的一部分。


--
we drink green tea

where need HTTP server push

Other uses are push enabled web applications including market data distribution (stock tickers), online chat/messaging systems (webchat), auctions, online betting and gaming, sport results, monitoring consoles andsensor network monitoring.

--
we drink green tea

2010-12-14

jQuery AJAX Requests

jQuery AJAX Requests

Request Description
$(selector).load(url,data,callback) Load remote data into selected elements
   
$.ajax(options) Load remote data into an XMLHttpRequest object
$.get(url,data,callback,type) Load remote data using HTTP GET
$.post(url,data,callback,type) Load remote data using HTTP POST
$.getJSON(url,data,callback) Load remote JSON data using HTTP GET
$.getScript(url,callback) Load and execute a remote JavaScript file


(url) The URL (address) of data to be loaded

(data) Key/value pairs of data to send to the server

(callback) Function to be executed when data is loaded

(type) Type of data to be returned (html,xml,json,jasonp,script,text)

(options) All key/value pairs of options for a complete AJAX request


--
we drink green tea

jquery ajax

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    htmlobj=$.ajax({url:"test1.txt",async:false});
    $("div").html(htmlobj.responseText);
  });
});
</script>
</head>
<body>

<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>
</body>
</html>

--
we drink green tea

Fwd: jquery load txt file



---------- Forwarded message ----------
From: green tea china <bbzhouxinxin@gmail.com>
Date: Wed, Dec 15, 2010 at 2:40 PM
Subject: jquery load txtfile
To: bbzhouxinxin <bbzhouxinxin@gmail.com>
Cc: "bbzhouxinxin.zhou" <bbzhouxinxin.zhou@blogger.com>


<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").load('test1.txt');
  });
});
</script>
</head>
<body>

<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>

</body>
</html>

--
we drink green tea



--
we drink green tea

jquery load txtfile

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").load('test1.txt');
  });
});
</script>
</head>
<body>

<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>

</body>
</html>

--
we drink green tea

Changing HTML Content useing jquery


$(selector).html(content)

The html() method changes the contents (innerHTML) of matching HTML elements.

Example

$("p").html("W3Schools");

Try it yourself »


Adding HTML content

$(selector).append(content)

The append() function appends content to the inside of matching HTML elements.

$(selector).prepend(content)

The prepend() function "prepends" content to the inside of  matching HTML elements.

Example

$("p").append(" W3Schools");

Try it yourself »

$(selector).after(content)

The after() function inserts HTML content after all matching elements.

$(selector).before(content)

The before() function inserts HTML content before all matching elements.

Example

$("p").after(" W3Schools.");

Try it yourself »


jQuery HTML Manipulation - From This Page

Function Description
$(selector).html(content) Changes the (inner) HTML of selected elements
$(selector).append(content) Appends content to the (inner) HTML of selected elements
$(selector).prepend(content) "Prepends" content to the (inner) HTML of selected elements
$(selector).after(content) Adds HTML after selected elements
$(selector).before(content) Adds HTML before selected elements

--
we drink green tea

jQuery Hide and Show tutorial

jQuery Hide and Show

With jQuery, you can hide and show HTML elements with the hide() and show() methods:

Example

$("#hide").click(function(){
  $("p").hide();
});
$("#show").click(function(){
  $("p").show();
});

Try it yourself »

Both hide() and show() can take the two optional parameters: speed and callback.

Syntax:

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

The speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", "normal", or milliseconds:

Example

$("button").click(function(){
  $("p").hide(1000);
});

Try it yourself »

The callback parameter is the name of a function to be executed after the hide (or show) function completes. You will learn more about the callback parameter in the next chapter of this tutorial.


jQuery Toggle

The jQuery toggle() method toggles the visibility of HTML elements using the show() or hide() methods.

Shown elements are hidden and hidden elements are shown.

Syntax:

$(selector).toggle(speed,callback)

The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.

Example

$("button").click(function(){
  $("p").toggle();
});

Try it yourself »

The callback parameter is the name of a function to be executed after the hide (or show) method completes.


jQuery Slide - slideDown, slideUp, slideToggle

The jQuery slide methods gradually change the height for selected elements.

jQuery has the following slide methods:

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.

The callback parameter is the name of a function to be executed after the function completes.

slideDown() Example

$(".flip").click(function(){
  $(".panel").slideDown();
});

Try it yourself »

slideUp() Example

$(".flip").click(function(){
  $(".panel").slideUp()
})

Try it yourself »

slideToggle() Example

$(".flip").click(function(){
  $(".panel").slideToggle();
});

Try it yourself »


jQuery Fade - fadeIn, fadeOut, fadeTo

The jQuery fade methods gradually change the opacity for selected elements.

jQuery has the following fade methods:

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.

The opacity parameter in the fadeTo() method allows fading to a given opacity.

The callback parameter is the name of a function to be executed after the function completes.

fadeTo() Example

$("button").click(function(){
  $("div").fadeTo("slow",0.25);
});

Try it yourself »

fadeOut() Example

$("button").click(function(){
  $("div").fadeOut(4000);
});

Try it yourself »


jQuery Custom Animations

The syntax of jQuery's method for making custom animations is:

$(selector).animate({params},[duration],[easing],[callback])

The key parameter is params. It defines the CSS properties that will be animated. Many properties can be animated at the same time:

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

The second parameter is duration. It defines the time used to apply the animation. I takes the values "fast", "slow", "normal", or milliseconds.

Example 1

<script type="text/javascript"> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({height:300},"slow");
    $("div").animate({width:300},"slow");
    $("div").animate({height:100},"slow");
    $("div").animate({width:100},"slow");
  });
});
</script> 

Try it yourself »

Example 2

<script type="text/javascript"> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:"100px"},"slow");
    $("div").animate({fontSize:"3em"},"slow");
  });
});
</script> 

Try it yourself »

lamp HTML elements are positioned static by default and cannot be moved.
To make elements moveable, set the CSS position property to fixed, relative or absolute.


jQuery Effects

Here are some examples of effect functions in jQuery: 

Function Description
$(selector).hide() Hide selected elements
$(selector).show() Show selected elements
$(selector).toggle() Toggle (between hide and show) selected elements
$(selector).slideDown() Slide-down (show) selected elements
$(selector).slideUp() Slide-up (hide) selected elements
$(selector).slideToggle() Toggle slide-up and slide-down of selected elements
$(selector).fadeIn() Fade in selected elements
$(selector).fadeOut() Fade out selected elements
$(selector).fadeTo() Fade out selected elements to a given opacity
$(selector).animate() Run a custom animation on selected elements

--
we drink green tea