AJAX实现的多人协同设计
Download board.zip - 39.6 KB - Old Version
Download board_2008.zip - 55.03 KB - Latest VS 2008 Version
Introduction
This is an AJAX based WhiteBoard application. Typically unlike their desktop based counterparts, web applications need to be designed to use optimal server resources. This is one of the reasons for AJAX being popular. Here I demonstrate a powerful use of AJAX to make communication possible between two or more clients.
So, What can this do?
As I said, this is a WhiteBoard Application. Users are provided with certain drawing tools, color selections, etc. The basic idea is to share the user drawings among all the clients. All the users viewing the main page can participate in the drawing and share it with all other users. Clearing local canvas, server data, etc is also possible.
Background
A couple of years ago I was assigned the task of researching the capabilities of AJAX. Being a tech freak I was hell bent on convincing the client to use the then NEW AND HOT technology. I wasted a few days thinking on my right approach to the design and GUI. I wanted the application to look something like a desktop application and yet be executed in a browser. My aim was to avoid postbacks completely.(To impress the client). I was scampering through every result on google, reading every article on AJAX so as to get the perfect Application as a demo.
I happened to see a javascript (wz_jsgraphics.js) by Walter Zorn Link . It was then that the idea of building a web based WhiteBoard struck me. I give full credit to Walter for his excellent javascript. Once I learned using his script, it was just a matter of days before my own Web based Whiteboard was up and running.
The Basics...
As in all AJAX based applications, I have a main page that is displayed to the user. A page on the server handles all the requests and responses to this page. All the drawing part is done using Walters javascript. I designed a messaging mechanism to iden
相关文档：
function Ajax(url)
{
var m_xmlReq=null;
if(window.ActiveXObject)
{
try
{
m_xmlReq = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(e)
{
try{m_xmlReq = new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}
}
}
else if(window.XMLHttpRequest ......
1：Ajax可以通过JavaScript的XMLHttpRequest对象与服务器进行通信，通过XMLHttpRequest，JavaScript可以在不重载页面的情况下与服务器进行通信。
2：XMLHttpRequest 浏览器支持
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
xmlHtt ......
$.ajax({
type: "post",
url: loginUrl,
data: "username=" +uname + "&password=" +pwd,
async: ......
Ajax技术已经得到很广泛的应用，在Web开发中其核心就在于异步通信和局部刷新，极大地改善了用户体验，尤其适合于高频度、低数据量的场景。在不使用Ajax的Web应用中，一个页面处理中只有一次请求，客户端处理完后一次性提交，这种一次请求和一次提交的处理可能比较耗时，从而造成客户等待，使用Ajax把这一次请求和一次提交分 ......
