Ajax achieves simultaneous webpage multitasking

 

Today, you need to write a function that automatically starts the server script to check the validity of each data when the user displays the data in the database on the web and presents the result to the user.

 

What I want to consider is to start an Ajax communication process when presenting each piece of data, and return the result to OK.

In terms of details, you need to consider how each process knows the "host" data (which data initiates the task) When performing a callback after completing the task ).

 

Also, because XMLHttpRequest is private for each task, we need multi-task concurrency, so here I use a class to encapsulate the entire task. Each time a class object is started, it is used as a private member of the class.

 

Let's take a look at our client script model.

 

// Check the URL's Ajax process class <br/> function taskajaxprocess () <br/>{< br/> // class member XMLHttpRequest <br/> var http_request_check_url = false; </P> <p> // start the task <br/> This. start_task = function ($ OBJ) <br/>{< br/> var checkurl = $ obj. ALT; <br/> /// // create an HTTP request // <br/> http_request_check_url = false; </P> <p> // start to initialize the XMLHTTPRequest object. <br/> If (window. XMLHttpRequest) // Mozilla Browser <br/>{< br/> http_request_check_u RL = new XMLHttpRequest (); <br/> If (http_request_check_url.overridemimetype) <br/> {// set the mime Category <br/> http_request_check_url.overridemimetype ("text/XML "); <br/>}< br/> else if (window. activexobject) // IE browser <br/>{< br/> try <br/>{< br/> http_request_check_url = new activexobject ("msxml2.xmlhttp "); <br/>}< br/> catch (e) <br/>{< br/> try <br/>{< br/> http_request_check_url = new activexobject ("Microsoft. xmlhtt P "); <br/>}< br/> catch (e) {}< br/>}< br/> // exception, an error occurred while creating the object instance <br/> If (! Http_request_check_url) <br/>{< br/> document. getelementbyid ("searchresult"). innerhtml = "<font color = Red> fault error: An error occurred while creating the XMLHTTP object! </Font> "; <br/> return false; <br/>}</P> <p> // Add a random number to the URL to prevent the browser from caching the page. <br/> // set the initiator (Task host) ID is also uploaded to the PHP script <br/> var post_url = "checkurl. PHP? Url = "+ checkurl +" & id = "+ $ obj. ID + "& random =" + math. random () * (10000); </P> <p> http_request_check_url.onreadystatechange = This. showcheckurlresult; // callback function after registration <br/> http_request_check_url.open ("get", post_url, true); <br/> http_request_check_url.send (null ); <br/>}</P> <p> // completed callback function <br/> This. showcheckurlresult = function () <br/>{< br/> If (http_request_check_url.readystate = 4) <br/>{< br/> If (http_request_check_url.status = 200) // message returned successfully <br/>{< br/> var response = eval ("(" + http_request_check_url.responsetext + ")"); <br/> // process the result here <br/> // return the ID, it is the task host class <br/>}< br/>}// function <br/>}</P> <p> // start the task, HTML object <br/> function start_task ($ OBJ) <br/>{< br/> // start the task <br/> var S = new taskajaxprocess (); <br/> S. start_task ($ OBJ); <br/>}</P> <p>

 

The server-side script is omitted, which is roughly the same as the ID of the task initiator after processing.

You can start multiple tasks at the same time and perform callback operations on the interface.