FireFox'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); the problem cannot be solved.

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 code in the status of onreadystatechange is 2, 3, and 4, while IE waits for the status 2 to arrive. After the code in the status of 2, 3, and 4 in onreadystatechange is executed, continue to execute the following code. This problem occurs. We often use the onreadystatechange code to process the data obtained from the server (this data is only when the onreadystatechange status is 4, so there is no problem in IE, because it will wait for the arrival of onreadystatechange status 4, the data after onreadystatechange is executed, but because FF will not wait until onready After statechange status 4 arrives, the code after onreadystatechange is executed. Therefore, the code after statechange cannot process the data obtained from the server. What should I do?

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? The method has been introduced in the previous method for passing parameters in Javascript attachEvent. Here we will introduce it a little bit, that is, passing a parameter to onreadystatechange, but using return in onreadystatechange is a no-argument function, 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 to say, in FF, after onreadystatechange is executed for the first time, it continues to send, but will not go back to onreadystatechange, it's always silly to go on.

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.


Function xmlHandle (){
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 was originally regarded as a chicken skin. Now I feel that FF is purely named as a "standard support, 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.