firefox下对ajax的onreadystatechange的支持情况分析及解决

时间:2023-03-14 16:25:56

一、问题:

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);
}

上面的这段代码, xmlHttp.onreadystatechange = function(){.....};可以在FF下执行,但是如果改成

xmlHttp.open ("GET",Url,false);时就不行了,今天被这个问题整的晕头转向。

原因分析:

其一:这时不能用xmlHttp.send(),需要内容,如果没有内容,要用NULL

其二:经测试后发现,onreadystatechange在IE下都很正常,但在FF3下,只能运行readyState=0时的代码。不能运行readyState=4的代码,在网络上找了一个原因: 
在ajax的XMLHttpRequest.onreadystatechange方法的差异:在FF中当状态为1(即XMLHttpRequest已经调用open但还没有调用send时),FF则会继续执行onreadystatechange后面的代码,到执行完后面的代码后,在执行onreadystatechange在状态2,3,4的代码,而IE会等待状态2的到了,执行完onreadystatechange中状态2,3,4的代码后,继续执行后面的代码,这样问题就出现了,经常我们在onreadystatechange的代码要处理从服务器上获得的数据(这个数据只有在onreadystatechange的状态为4时,才可以得到),所以这在IE中不存在问题,因为它会等待onreadystatechange状态4到来以后,在执行onreadystatechange后面的数据,但是由于FF不会等到onreadystatechange状态4到来后在执行onreadystatechange后面的代码,所以后面的代码就不能处理从服务器上获得的数据,那该怎么办呢?

解决方法:使用javascript的闭包(这个解决方法是从GMAP中获得灵感的)。我们传递一个函数给onreadystatechange,在这个函数中处理从服务器上返回的数据,但是onreadystatechange是一个无参函数,那该怎么办呢?方法在我前面的Javascript attachEvent传递参数的办法已经介绍 了,这里再稍微介绍一下,就是传递一个参数给onreadystatechange,但是在onreadystatechange中使用return一个无参函数,在这个无参函数中可以使用这个传入的参数。这个方法在IE和FF中都可以正常运行,所以这不失是一个好方法。

这里提到采用闭包,挺复杂,另外网上有采用了在FF下用onload,也是不管用。经过对错误排除,上面摘要提到的原因,才是根本的,也就是说,在FF下,第一次执行完onreadystatechange后,继续执行到send,但后面就不会再回头执行onreadystatechange,一直傻傻的走下去。

我直接改成:

xmlHttp.onreadystatechange = xmlHandle;
xmlHttp.open ("GET",Url,false);
xmlHttp.send(null);
xmlHttp.onreadystatechange = xmlHandle; //这里加一行挡住FF,让它再搞一次。 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='/';
}
}
}

但是这样也不行,原来ff 3改成:xmlHttp.onreadystatechange = xmlHandle();然而加了括号,IE又不行,唉,原来就觉得FF是鸡皮,现在感觉FF纯属一个打着“支持标准”的称号,却是干着浪费程序员时间的垃圾。但手上这个程序又实在重要,没办法,只有再调试看看有没有更简单的办法,如下:

xmlHttp.open ("GET",Url,false);
xmlHttp.send(null);
if(xmlHttp.status==200)
xmlHandle();

这段代码在IE和FF下可以通用。但由于是同步调用,需要在readyState<4时未取得结果前出现提示,这对于网速慢的客户很友好。然而要在本机获得这种等待反应时的情况,由于本机反应快,会造成看不到给客户提示,因此暂时先不用这个代码

只有加入浏览器类型分析。

function getOs()
{
var OsObject = "";
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE"; //IE浏览器
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox"; //Firefox浏览器
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
return "Safari"; //Safan浏览器
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return "Camino"; //Camino浏览器
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return "Gecko"; //Gecko浏览器
}
}

然后把AJAX代码改为:

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;

例二

//获取游览器的类型,为解决onreadystatechange不兼容的问题
function getOs()
{
var OsObject = "";
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE"; //IE浏览器
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox"; //Firefox浏览器
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
return "Safari"; //Safan浏览器
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return "Camino"; //Camino浏览器
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return "Gecko"; //Gecko浏览器
}
}
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;
}

我觉得那个判断各个浏览器的有些多余,直接只判断火狐吧,如下

var browserflag=0;
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
browserflag=1
}
xmlHttp.onreadystatechange = (browserflag!=1)?(serverResponse):(serverResponse());
xmlHttp.open ("GET","taogogo.py",false);
xmlHttp.send(null);
xmlHttp.onreadystatechange = (browserflag!=1)?(serverResponse):(serverResponse());

上面为查找资料得到

但是还是不行!!!

var xmlhttp = loadXMLDoc();
var startRequestMethod = function(obj){
var url = "http://www.xxxx.com?id=1";
xmlhttp.open("get", url, false); //这是个同步请求
xmlhttp.send(null);
xmlhttp.onReadyStateChange = stateChange; //注意这儿
} var stateChange = function(){
if(xmlhttp.readyState == 4){
if (xmlhttp.status == 200){
//需要执行的代码
}else{
alert("操作失败!");
}
}
} var loadXMLDoc = function(){
var xmlhttp = null;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else if (window.ActiveXObject){
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}

查了资料后发现,FireFox3下同步请求不需要等待onReadyStateChange,而直接执行后续代码,于是只要将原先代码中

xmlhttp.onReadyStateChange = stateChange;    这句注掉,然后直接调用stateChange()方法。代码如下:

var startRequestMethod = function(obj){
var url = "http://www.xxxx.com?id=1";
xmlhttp.open("get", url, false); //这是个同步请求
xmlhttp.send(null);
//xmlhttp.onReadyStateChange = stateChange; //注意这儿
stateChange();
}

综合上面的,可以对同步和异步请求做个判断,做个通用化的处理,代码如下:

var startRequestMethod = function(obj){
var url = "http://www.xxxx.com?id=1";
var ansyType = true; //默认异步
xmlhttp.open("get", url, ansyType); //这是个同步请求
xmlhttp.send(null);
if(ansyType){ //异步
xmlhttp.onReadyStateChange = stateChange;
}else{ //同步
stateChange();
}
}

最后,上传自己写的

乱了点,但是至少是个总结

$("#changeCoupon").click(function () {
var couponVal = $("#selQuans").val();
var ary = couponVal.split("$");
var couponType = ary[0];
var parValue = ary[1];
if (couponType == "") {
alert("请选择优惠券类别");
$("#selQuans").focus();
return;
}
var consumedIntegral = $('#jifen').val();
var canUseIntergral = $('#lab_jifen').text();
if (parseInt(canUseIntergral) < parseInt(consumedIntegral)) {
alert("抱歉您的积分还不够兑换该券");
$("#selQuans").focus();
return;
}
var postdata = { coupontype: couponType, parvalue: parValue, consumedintegral: consumedIntegral };
//最起初方法
//$.post("services/Integral2Coupon.ashx", postdata, function (json) {
// if (json.error_code == 0) {
// var integralLogList = $("#tab0\\.page0");
// var tpl = $("#integrallogtpl").html();
// var html = _.template(tpl, json.data.integralLog);
// integralLogList.append(html); // var couponlist = $("#tb0\\.pg0");
// tpl = $("#coupontpl0").html();
// html = _.template(tpl, json.data.coupon);
// couponlist.append(html); // var integraltocouponList = $("#tab0\\.page1");
// tpl = $("#integraltocoupontpl").html();
// html = _.template(tpl, json.data.integralToCoupon);
// integraltocouponList.append(html); // alert("积分换券成功!")
// }
// else
// alert(json.data.msg)
// }); //09-01 改变 ajax 方式 采用判断浏览器改同步或异步方式 strat
var browserflag = 0;
var ansyType = true; //默认异步
if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
browserflag = 1;
ansyType = false;
}
var args = "coupontype=" + couponType + "&parvalue=" + parValue + "&consumedintegral=" + consumedIntegral;
var xmlhttp;
if (window.XMLHttpRequest) {
//如果为 Mozilla,Safari 等浏览器
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType)
xmlhttp.overrideMimeType('text/xml');
}
else if (window.ActiveXObject) { //如果是Ie浏览器
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) { }
}
}
var url = "services/Integral2Coupon.ashx";
//xmlhttp.onreadystatechange = (browserflag != 1) ? serverResponse() : serverResponse;
xmlhttp.open("POST", url, ansyType);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.send(args);
if (ansyType) { //异步
xmlhttp.onReadyStateChange = stateChange;
} else { //同步
stateChange();
}
//xmlhttp.onreadystatechange = (browserflag != 1) ? serverResponse() : serverResponse;
function serverResponse() {
if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了,但是服务器还没有完成响应的生成)
{
if (xmlhttp.status == 200) //如果状态码为200则是成功
{
//onsuccess(xmlhttp.responseText);
//var json = JSON.parse(xmlhttp.responseText); var jsons = xmlhttp.responseText;
var json;
if (typeof (JSON) == 'undefined') {
json = eval("(" + jsons + ")");
} else {
json = JSON.parse(jsons);
} if (json.error_code == 0) {
var integralLogList = $("#tab0\\.page0");
var tpl = $("#integrallogtpl").html();
var html = _.template(tpl, json.data.integralLog);
integralLogList.append(html); var couponlist = $("#tb0\\.pg0");
tpl = $("#coupontpl0").html();
html = _.template(tpl, json.data.coupon);
couponlist.append(html); var integraltocouponList = $("#tab0\\.page1");
tpl = $("#integraltocoupontpl").html();
html = _.template(tpl, json.data.integralToCoupon);
integraltocouponList.append(html); alert("积分换券成功!")
}
else
alert(json.data.msg) }
else {
alert("AJAX服务器返回错误!");
}
}
};
//ajax end
});