读书人

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

发布时间: 2012-10-30 16:13:36 作者: rapoo

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

?

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

?

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

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

?

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

?

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

?

//检测URL的ajax进程类function TaskAjaxProcess(){//类成员XMLHttpRequestvar 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也传回来。

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

读书人网 >Web前端

热点推荐