ajax实现WEB页面上多任务同时作业

 

今天需要写一个功能，对于数据库中的数据，在用户通过WEB显示出来的时候，自动启动服务器端脚本对每个数据的有效性进行检测，并将结果呈现给用户。

 

我考虑的就是，呈现每条数据的时候，启动一个ajax通信进程，将结果反馈回来就OK了。

细节方面需要考虑的是，每个进程完成任务后在回调的时候如何知道它的“宿主”数据是哪一个（哪条数据发起的任务）。

 

还有由于XMLHttpRequest对于每个任务都是私有的，我们需要多任务并发，所以这里我使用一个类封装整个任务。每次启动一个类对象，将其作为类的私有成员。

 

下面看看我们的客户端脚本模型

 

//检测URL的ajax进程类
function TaskAjaxProcess()
{
	//类成员XMLHttpRequest
	var http_request_check_url = false;
	
	//启动任务
	this.start_task = function( $obj )
	{
		var checkurl = $obj.alt;
		////////////创建http request//////////////////
		http_request_check_url=false;
		
		//开始初始化XMLHttpRequest对象
		if(window.XMLHttpRequest)//Mozilla浏览器
		{
			http_request_check_url=new XMLHttpRequest();
			if(http_request_check_url.overrideMimeType)
			{//设置MIME类别
				http_request_check_url.overrideMimeType("text/xml");
			}
		}
		else if(window.ActiveXObject)//IE浏览器
		{
			try
			{
				http_request_check_url=new ActiveXObject("Msxml2.XMLHttp");
			}
			catch(e)
			{
				try
				{
					http_request_check_url=new ActiveXobject("Microsoft.XMLHttp");
				}
				catch(e){}
			}
		}
		//异常，创建对象实例失败
		if(!http_request_check_url)
		{	
			document.getElementById("searchresult").innerHTML="<font color=red>Fault error:创建XMLHttp对象失败！</font>";
			return false;
		}
		
		//在URL添加随机数防止浏览器cache页面
		//将发起者（任务宿主）ID也传进PHP脚本
		var post_url= "checkURL.php?url=" + checkurl + "&id=" + $obj.id + "&random=" + Math.random()*(10000);
	
		http_request_check_url.onreadystatechange=this.showCheckURLResult;//注册完成的回调函数
		http_request_check_url.open("GET",post_url,true);
		http_request_check_url.send(null);	
	}	
	
	//完成的回调函数
	this.showCheckURLResult = function()
	{
		if(http_request_check_url.readyState==4)
		{
			if(http_request_check_url.status==200)//信息返回成功
			{
				var response = eval( "(" + http_request_check_url.responseText + ")" );
				//在这里处理结果
				//将ID回传过来，则是任务宿主类
			}
		}
	}//function
}

//启动任务，传进来HTML对象
function start_task($obj)
{
	//启动任务
	var s = new TaskAjaxProcess();
	s.start_task( $obj );
}

 

 

服务端脚本略，大致为处理后附带的将任务发起者的ID也传回来。

就可以实现同时启动多任务并且回调后在界面上处理了。