Ff's support for ajax onreadystatechange

Source: Internet
Author: User

I. Problems:

Var xmlHttp;
Function savecarttodata (){
CreateXMLHttpRequest ();
Var rndcode = new Date (). getTime ();
Var CartUrl = "a. asp? Cache = "+ rndcode
XmlHttp. onreadystatechange = function (){
.....

}
XmlHttp. open ("GET", CartUrl,True);
XmlHttp. send (null );
}

The code above, xmlHttp. onreadystatechange = function () {...}; can be executed in FF, but if it is changed

XmlHttp. open ("GET", Url,False); It will not work at the moment. Today, I am confused by this problem.

Cause analysis:

First, xmlHttp. send () cannot be used. The content is required. If there is no content, use NULL.

Second: after testing, we found that onreadystatechange works normally in IE, but in FF3, we can only run the code when readyState is set to 0. You cannot run the Code with readyState = 4. You can find a reason on the network:
In the XMLHttpRequest. differences between the onreadystatechange Method: In FF, when the status is 1 (that is, when XMLHttpRequest has called open but has not called send), FF will continue to execute the code after onreadystatechange, after the code is executed, the onreadystatechange code in status 2, 3, and 4 will be executed, While IE will wait until status 2 arrives.The code in the status of 2, 3, and 4 in onreadystatechange continues to run the subsequent code,This problem occurs. We often need to process the data obtained from the server in the onreadystatechange code (this data can be obtained only when the onreadystatechange status is 4 ), so there is no problem in IE, because it will wait for the data after onreadystatechange status 4 arrives, after onreadystatechange is executed, however, since FF will not wait until the onreadystatechange status 4 is reached and the code behind onreadystatechange is executed, the code behind it cannot be processed.What should I do with the data obtained from the server?

Solution: use javascript closures (this solution is inspired by GMAP ). We pass a function to onreadystatechange to process the data returned from the server. But onreadystatechange is a non-parameter function. What should we do? Method in front of meHow to pass Parameters in Javascript attachEventI have already introduced it. Here I will introduce it a little more, that is, to pass a parameter to onreadystatechange, but to use the return function in onreadystatechange, you can use this input parameter in this no-argument function. This method can run normally in IE and FF, so this is a good method.

The use of closures is complicated. In addition, onload is used for FF on the Internet. After troubleshooting, the reason mentioned in the summary above is fundamental, that is,In FF, after onreadystatechange is executed for the first time, the onreadystatechange will be executed again, but the onreadystatechange will not be executed later.

I directly changed it:

XmlHttp. onreadystatechange = xmlHandle;
XmlHttp. open ("GET", Url, false );
XmlHttp. send (null );
XmlHttp. onreadystatechange = xmlHandle; // Add a line here to block FF and let it do it again.

FunctionXmlHandle(){
If (xmlHttp. readyState <4 ){
......
} Else if (xmlHttp. readyState = 4 & xmlHttp. status = 200 ){
Var cartResult = Number (xmlHttp. responseText );
If (cartResult = 1 ){
Window. location. href = 'a. asp ';
} Else if (cartResult = 2 ){
......;
} Else {
Window. location. href = '/';
}
}
}

But this does not work. The original ff 3 is changed to xmlHttp. onreadystatechange =XmlHandle ();However, with parentheses added, IE does not work. Alas, FF is a chicken skin, and now I feelFF is purely a title of "Supporting standards", but it is a waste of time for programmers.However, this program is really important, and there is no way to debug it again to see if there is a simpler way, as shown below:

XmlHttp. open ("GET", Url, false );
XmlHttp. send (null );
If (xmlHttp. status = 200)
XmlHandle ();

This code can be used in IE and FF. However, because it is a synchronous call, you need to prompt before the readyState <4 does not get the result, which is very friendly for customers with slow network speeds. However, to obtain such a response in the local machine, because the local machine is fast, it will cause no prompt to the customer, so this code is not needed for the moment.

Only browser type analysis is added.

Function getOs ()
{
Var OsObject = "";
If (navigator. userAgent. indexOf ("MSIE")> 0 ){
Return "MSIE"; // IE browser
}
If (isFirefox = navigator. userAgent. indexOf ("Firefox")> 0 ){
Return "Firefox"; // Firefox
}
If (isSafari = navigator. userAgent. indexOf ("Safari")> 0 ){
Return "Safari"; // Safan Browser
}
If (isCamino = navigator. userAgent. indexOf ("Camino")> 0 ){
Return "Camino"; // Camino Browser
}
If (isMozilla = navigator. userAgent. indexOf ("Gecko/")> 0 ){
Return "Gecko"; // Gecko Browser
}
}

Then change the AJAX code:

Var rndcode = new Date (). getTime ();
Var CartUrl = "a. asp? Cache = "+ rndcode
Var btype = getOs ();
XmlHttp. onreadystatechange =(Btype! = "Firefox ")? XmlHandle (): xmlHandle;
XmlHttp. open ("GET", CartUrl, false );
XmlHttp. send (null );
XmlHttp. onreadystatechange =(Btype! = "Firefox ")? XmlHandle (): xmlHandle;

Example 2
// Obtain the type of the browser. To solve the problem of onreadystatechange incompatibility
Function getOs ()
{
Var OsObject = "";
If (navigator. userAgent. indexOf ("MSIE")> 0 ){
Return "MSIE"; // IE browser
}
If (isFirefox = navigator. userAgent. indexOf ("Firefox")> 0 ){
Return "Firefox"; // Firefox
}
If (isSafari = navigator. userAgent. indexOf ("Safari")> 0 ){
Return "Safari"; // Safan Browser
}
If (isCamino = navigator. userAgent. indexOf ("Camino")> 0 ){
Return "Camino"; // Camino Browser
}
If (isMozilla = navigator. userAgent. indexOf ("Gecko/")> 0 ){
Return "Gecko"; // Gecko Browser
}
}
Var objHttp;
Function searchCommodityByGroupId (groupId)
{
ObjHttp = getHttpRequest ();
Var tt = new Date ();
Var url = "getCommodityListByGroupId.htm? CommodityGroupId = "+ groupId +" & time = "+ tt;
Var btype = getOs ();

ObjHttp. onreadystatechange = (btype = "Firefox ")? GetCommodity (): getCommodity;
ObjHttp. open ("GET", url, false );
ObjHttp. send (null );
ObjHttp. onreadystatechange = (btype = "Firefox ")? GetCommodity (): getCommodity;
}
Function getCommodity (){

If (objHttp. readyState = 4)
{
If (objHttp. status = 200)
{
Document. getElementById ("commodityDiv"). innerHTML = objHttp. responseText;
}
}
}

Function getHttpRequest (){
Var httpRequest;
If (window. XMLHttpRequest ){
HttpRequest = new XMLHttpRequest ();
If (httpRequest. overrideMimeType ){
HttpRequest. overrideMimeType ('text/xml ');
}
} Else if (window. ActiveXObject ){
Try {
HttpRequest = new ActiveXObject ("Msxml2.XMLHTTP ");
} Catch (e ){
Try {
HttpRequest = new ActiveXObject ("Microsoft. XMLHTTP ");
} Catch (e ){}
}
}
Return httpRequest;
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.