ajax_chat.js

几个JavaScript范例程序.包括搜索,聊天,上传进度等.

			var sendReq = createAjaxObj();
			var receiveReq = createAjaxObj();
			var lastMessage = 0;
			var mTimer;
			var chatId;
			var userId;
			//Function for initializating the page.
			function startChat() {
				//Set the focus to the Message Box.
				document.getElementById('txt_message').focus();
				//Start Recieving Messages.
				initial();
				getChatText();
			}
			function initial()
			{
			  chatId = document.frmmain.cid.value;
			  userId = document.frmmain.uid.value;
			}
			//Gets the browser specific XmlHttpRequest Object			
function createAjaxObj(){
  var httprequest=false
  if (window.XMLHttpRequest)
  { // ???Mozilla, Safari ????
    httprequest=new XMLHttpRequest()
    if (httprequest.overrideMimeType)
      httprequest.overrideMimeType('text/xml')
   }
   else if (window.ActiveXObject)
   { // ???IE
     try {
       httprequest=new ActiveXObject("Msxml2.XMLHTTP");
     }
     catch (e){
       try{
          httprequest=new ActiveXObject("Microsoft.XMLHTTP");
       }
       catch (e){}
     }
   }
   return httprequest
}
			//Gets the current messages from the server
			function getChatText() {
			//判断上次请求的状态是否完成或是还未发送请求
				if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
				    //发送获得消息的服务器地址
				    var submitURL = "getMessage?chatId="+chatId+"&last=" + lastMessage;
					receiveReq.open("GET", submitURL, true);//建立请求
					receiveReq.onreadystatechange = handleReceiveChat; //当请求状态改变时调用handleReceiveChat方法
					receiveReq.send(null);//发送请求
				}			
			}
			//Add a message to the chat server.
			function sendChatText() {
			//如果输入的消息为空，提示用户输入
				if(document.getElementById('txt_message').value == '') {
					alert("You have not entered a message");
					return;
				}
				//判断上次发送消息请求的状态是否完成或是还未发送请求
				if (sendReq.readyState == 4 || sendReq.readyState == 0) {、
				   //保存消息的服务器地址
				    var submitURL = "sendMessage?cid="+chatId+"&uid="+userId+"&msg="+document.getElementById('txt_message').value;
					sendReq.open("POST",  submitURL , true);//建立请求连接
					sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
					sendReq.onreadystatechange = handleSendChat; //当请求状态改变时调用handleSendChat方法
					sendReq.send(null);//发送请求
					document.getElementById('txt_message').value = '';//设置提交消息文本框为空
				}							
			}
			//When our message has been sent, update our page.
			function handleSendChat() {
				//取消间隔获取数据的方法
				clearInterval(mTimer);
				//重新获得调用getChatText()方法
				getChatText();
			}
			//Function for handling the return of chat text
			function handleReceiveChat() {
			
				if (receiveReq.readyState == 4) {//此时请求已经完成
				   //获得显示消息的图曾层元素
					var chat_div = document.getElementById('div_chat');
					//获得返回后的XML文件
					var xmldoc = receiveReq.responseXML;
					//得到所有的新的消息记录
					var message_nodes = xmldoc.getElementsByTagName("message"); 
					var n_messages = message_nodes.length;
					//循环每一条新消息，组织成HTML格式数据
					for (i = 0; i < n_messages; i++) {
						var user_node = message_nodes[i].getElementsByTagName("user");
						var text_node = message_nodes[i].getElementsByTagName("text");
						var time_node = message_nodes[i].getElementsByTagName("time");
						chat_div.innerHTML += '(<font class="chatUser">'+user_node[0].firstChild.nodeValue + '</font>)&nbsp;said at &nbsp;';
						chat_div.innerHTML += '<font class="chatTime">' + time_node[0].firstChild.nodeValue + '</font><br />';
						chat_div.innerHTML += '<span class="title">'+text_node[0].firstChild.nodeValue + '</span><br />';
						chat_div.scrollTop = chat_div.scrollHeight;
						//每循环一条消息，记录到全局变量lastMessage中
						lastMessage = (message_nodes[i].getAttribute('id'));
					}
					//获取数据后,设置2秒钟后再次调用getChatText()方法
					mTimer = setTimeout('getChatText();',2000); //Refresh our chat in 2 seconds
				}
			}
			//This functions handles when the user presses enter.  Instead of submitting the form, we
			//send a new message to the server and return false.
			function blockSubmit() {
				sendChatText();
				return false;
			}