Ajax executes multiple xmlhttp__ajax on the same page

Ajax the same page how to execute multiple XMLHTTP, such as blog page, need to use Ajax to read author information, article information, comment information ...

Our first reaction may be to create multiple global XMLHTTP objects, but that's not realistic. In fact, the implementation is very simple, is to onreadystatechange the corresponding callback function plus parameters, the following code is a solution in a function of a piece of code. Xmlhttp.open ("Get", "ajax_process.aspx?a=" + A, true);
Xmlhttp.onreadystatechange = function () {onreadystatechng (XMLHTTP, a);};
Xmlhttp.send (NULL);

Simply overwrite the onReadyStateChange property value so that you can assign arguments to the Onreadystatechng function. If we write Xmlhttp.onreadystatechange = onreadystatechng, then onreadystatechng can not have parameters, also can not obtain is which XMLHTTP response, You cannot obtain which control to set after the response.

We can look at a complete example, the front page is an ordinary Ajax technology HTML page, the background is using the asp.net. aspx file, the reason for using ASP.net, is to demonstrate the delay processing function.

Foreground program <?xml version= "1.0" encoding= "gb2312"?>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>ajax test</title>
<div id= "A2" >2</div>
<div id= "A3" >3</div> <script type= "Text/javascript" language= "JavaScript" >
<!--
function Createhttpobject ()
{
var xmlhttp;

Try
{
XMLHTTP = new ActiveXObject ("Msxml2.xmlhttp");
}
catch (E)
{
Try
{
XMLHTTP = new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (E)
{
XMLHTTP = false;
}
}

if (!xmlhttp && typeof xmlhttprequest!= ' undefined ')
{
Try
{
XMLHTTP = new XMLHttpRequest ();
}
catch (E)
{
Xmlhttp=false;
}
}

if (!xmlhttp && window.createrequest)
{
Try
{
XMLHTTP = Window.createrequest ();
}
catch (E)
{
Xmlhttp=false;
}
}

return XMLHTTP;
}
function onreadystatechng (XMLHTTP, a)
{
if (xmlhttp.readystate = 4)
{
if (Xmlhttp.status = 200)
{
document.getElementById (a). InnerHTML = A;
}
Else
{
Alert ("HTTP Error, Status code:" + xmlhttp.status);
}
}
}
function Submitmsg (a)
{
var xmlhttp = Createhttpobject ();
if (!xmlhttp)
{
Return Unable to create XMLHTTP object
}

Ajax Submission
Xmlhttp.open ("Get", "ajax_process.aspx?a=" + A, true);
Xmlhttp.onreadystatechange = function () {onreadystatechng (XMLHTTP, a);};
Xmlhttp.send (NULL);
} submitmsg ("A1");
Submitmsg ("A2");
Submitmsg ("A3"); -->
</script> </body>

Background program <%@ Page language= "C #"%>
<%response.expires = 0; %> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <script runat=" "Server" >
void Page_Load (object sender, EventArgs e)
{
if (request.querystring["a"] = = "A1")
{
System.Threading.Thread.Sleep (3000); 3 seconds delay.
}
else if (request.querystring["a"] = = "A2")
{
System.Threading.Thread.Sleep (1000); 1 seconds delay.
}
else if (request.querystring["a"] = = "A3")
{
System.Threading.Thread.Sleep (2000); 2 seconds delay.
}
}
</script> <title>ajax test</title>

<body>
<form id= "Form1" runat= "Server" >
<div>

</div>
</form>
</body>

Demo Commentary

The front page issued three asynchronous loopback requests, respectively, for A1, A2, A3 request value, in the background page, through the delay simulation processing A1 need 3 seconds, processing A2 need 1 seconds, processing A3 need 2 seconds. Through the demo found that the first change is A2, then the A3, A1, the order is not chaotic, and there is no display of confusion. Note that the background page needs Response.Expires = 0; This code indicates that the page expires immediately, otherwise the cached page is requested for the refresh, and the demo has no effect.

Other than that

Each XMLHTTP's onreadystatechange corresponding function name can also be different, not limited to parameter differences.

Http://www.cftea.com/c/2007/09/ZO75JIETY8KK76RZ.asp