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

本文介绍了一种在用户查看数据库记录时,利用Ajax技术自动验证数据有效性的方法。通过为每条数据启动独立的Ajax请求,实现了并发检测并正确关联回调结果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天需要写一个功能,对于数据库中的数据,在用户通过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也传回来。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值