firefox下對ajax的onreadystatechange的支持情況分析
更新時(shí)間：2009年12月14日 23:25:36 作者：
firefox下對ajax的onreadystatechange的支持分析。用的到的朋友可以參考下。
一、問題：
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下執(zhí)行，但是如果改成
xmlHttp.open ("GET",Url,false);時(shí)就不行了，今天被這個(gè)問題整的暈頭轉(zhuǎn)向。
原因分析：
其一:這時(shí)不能用xmlHttp.send()，需要內(nèi)容，如果沒有內(nèi)容，要用NULL
其二：經(jīng)測試后發(fā)現(xiàn)，onreadystatechange在IE下都很正常，但在FF3下，只能運(yùn)行readyState=0時(shí)的代碼。不能運(yùn)行readyState=4的代碼，在網(wǎng)絡(luò)上找了一個(gè)原因：
在ajax的XMLHttpRequest.onreadystatechange方法的差異：在FF中當(dāng)狀態(tài)為1（即XMLHttpRequest已經(jīng)調(diào)用open但還沒有調(diào)用send時(shí)），F(xiàn)F則會(huì)繼續(xù)執(zhí)行onreadystatechange后面的代碼，到執(zhí)行完后面的代碼后，在執(zhí)行onreadystatechange在狀態(tài)2，3，4的代碼，而IE會(huì)等待狀態(tài)2的到了，執(zhí)行完onreadystatechange中狀態(tài)2，3，4的代碼后，繼續(xù)執(zhí)行后面的代碼，這樣問題就出現(xiàn)了，經(jīng)常我們在onreadystatechange的代碼要處理從服務(wù)器上獲得的數(shù)據(jù)（這個(gè)數(shù)據(jù)只有在onreadystatechange的狀態(tài)為4時(shí)，才可以得到），所以這在IE中不存在問題，因?yàn)樗鼤?huì)等待onreadystatechange狀態(tài)4到來以后，在執(zhí)行onreadystatechange后面的數(shù)據(jù)，但是由于FF不會(huì)等到onreadystatechange狀態(tài)4到來后在執(zhí)行onreadystatechange后面的代碼，所以后面的代碼就不能處理從服務(wù)器上獲得的數(shù)據(jù)，那該怎么辦呢？
解決方法：使用javascript的閉包（這個(gè)解決方法是從GMAP中獲得靈感的）。我們傳遞一個(gè)函數(shù)給onreadystatechange，在這個(gè)函數(shù)中處理從服務(wù)器上返回的數(shù)據(jù)，但是onreadystatechange是一個(gè)無參函數(shù)，那該怎么辦呢？方法在我前面的Javascript attachEvent傳遞參數(shù)的辦法已經(jīng)介紹 了，這里再稍微介紹一下，就是傳遞一個(gè)參數(shù)給onreadystatechange，但是在onreadystatechange中使用return一個(gè)無參函數(shù)，在這個(gè)無參函數(shù)中可以使用這個(gè)傳入的參數(shù)。這個(gè)方法在IE和FF中都可以正常運(yùn)行，所以這不失是一個(gè)好方法。
這里提到采用閉包，挺復(fù)雜，另外網(wǎng)上有采用了在FF下用onload，也是不管用。經(jīng)過對錯(cuò)誤排除，上面摘要提到的原因，才是根本的，也就是說，在FF下，第一次執(zhí)行完onreadystatechange后，繼續(xù)執(zhí)行到send，但后面就不會(huì)再回頭執(zhí)行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是雞皮，現(xiàn)在感覺FF純屬一個(gè)打著“支持標(biāo)準(zhǔn)”的稱號，卻是干著浪費(fèi)程序員時(shí)間的垃圾。但手上這個(gè)程序又實(shí)在重要，沒辦法，只有再調(diào)試看看有沒有更簡單的辦法，如下：
xmlHttp.open ("GET",Url,false);
xmlHttp.send(null);
if(xmlHttp.status==200)
xmlHandle();
這段代碼在IE和FF下可以通用。但由于是同步調(diào)用，需要在readyState<4時(shí)未取得結(jié)果前出現(xiàn)提示，這對于網(wǎng)速慢的客戶很友好。然而要在本機(jī)獲得這種等待反應(yīng)時(shí)的情況，由于本機(jī)反應(yīng)快，會(huì)造成看不到給客戶提示，因此暫時(shí)先不用這個(gè)代碼
只有加入瀏覽器類型分析。
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;
}
復(fù)制代碼 代碼如下:
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下執(zhí)行，但是如果改成
xmlHttp.open ("GET",Url,false);時(shí)就不行了，今天被這個(gè)問題整的暈頭轉(zhuǎn)向。
原因分析：
其一:這時(shí)不能用xmlHttp.send()，需要內(nèi)容，如果沒有內(nèi)容，要用NULL
其二：經(jīng)測試后發(fā)現(xiàn)，onreadystatechange在IE下都很正常，但在FF3下，只能運(yùn)行readyState=0時(shí)的代碼。不能運(yùn)行readyState=4的代碼，在網(wǎng)絡(luò)上找了一個(gè)原因：
在ajax的XMLHttpRequest.onreadystatechange方法的差異：在FF中當(dāng)狀態(tài)為1（即XMLHttpRequest已經(jīng)調(diào)用open但還沒有調(diào)用send時(shí)），F(xiàn)F則會(huì)繼續(xù)執(zhí)行onreadystatechange后面的代碼，到執(zhí)行完后面的代碼后，在執(zhí)行onreadystatechange在狀態(tài)2，3，4的代碼，而IE會(huì)等待狀態(tài)2的到了，執(zhí)行完onreadystatechange中狀態(tài)2，3，4的代碼后，繼續(xù)執(zhí)行后面的代碼，這樣問題就出現(xiàn)了，經(jīng)常我們在onreadystatechange的代碼要處理從服務(wù)器上獲得的數(shù)據(jù)（這個(gè)數(shù)據(jù)只有在onreadystatechange的狀態(tài)為4時(shí)，才可以得到），所以這在IE中不存在問題，因?yàn)樗鼤?huì)等待onreadystatechange狀態(tài)4到來以后，在執(zhí)行onreadystatechange后面的數(shù)據(jù)，但是由于FF不會(huì)等到onreadystatechange狀態(tài)4到來后在執(zhí)行onreadystatechange后面的代碼，所以后面的代碼就不能處理從服務(wù)器上獲得的數(shù)據(jù)，那該怎么辦呢？
解決方法：使用javascript的閉包（這個(gè)解決方法是從GMAP中獲得靈感的）。我們傳遞一個(gè)函數(shù)給onreadystatechange，在這個(gè)函數(shù)中處理從服務(wù)器上返回的數(shù)據(jù)，但是onreadystatechange是一個(gè)無參函數(shù)，那該怎么辦呢？方法在我前面的Javascript attachEvent傳遞參數(shù)的辦法已經(jīng)介紹 了，這里再稍微介紹一下，就是傳遞一個(gè)參數(shù)給onreadystatechange，但是在onreadystatechange中使用return一個(gè)無參函數(shù)，在這個(gè)無參函數(shù)中可以使用這個(gè)傳入的參數(shù)。這個(gè)方法在IE和FF中都可以正常運(yùn)行，所以這不失是一個(gè)好方法。
這里提到采用閉包，挺復(fù)雜，另外網(wǎng)上有采用了在FF下用onload，也是不管用。經(jīng)過對錯(cuò)誤排除，上面摘要提到的原因，才是根本的，也就是說，在FF下，第一次執(zhí)行完onreadystatechange后，繼續(xù)執(zhí)行到send，但后面就不會(huì)再回頭執(zhí)行onreadystatechange,一直傻傻的走下去。
我直接改成：
復(fù)制代碼 代碼如下:
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是雞皮，現(xiàn)在感覺FF純屬一個(gè)打著“支持標(biāo)準(zhǔn)”的稱號，卻是干著浪費(fèi)程序員時(shí)間的垃圾。但手上這個(gè)程序又實(shí)在重要，沒辦法，只有再調(diào)試看看有沒有更簡單的辦法，如下：
復(fù)制代碼 代碼如下:
xmlHttp.open ("GET",Url,false);
xmlHttp.send(null);
if(xmlHttp.status==200)
xmlHandle();
這段代碼在IE和FF下可以通用。但由于是同步調(diào)用，需要在readyState<4時(shí)未取得結(jié)果前出現(xiàn)提示，這對于網(wǎng)速慢的客戶很友好。然而要在本機(jī)獲得這種等待反應(yīng)時(shí)的情況，由于本機(jī)反應(yīng)快，會(huì)造成看不到給客戶提示，因此暫時(shí)先不用這個(gè)代碼
只有加入瀏覽器類型分析。
復(fù)制代碼 代碼如下:
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代碼改為：
復(fù)制代碼 代碼如下:
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;
例二
復(fù)制代碼 代碼如下:
//獲取游覽器的類型,為解決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;
}
您可能感興趣的文章:
- ajax readyState的五種狀態(tài)詳解
- Ajax xmlHttpRequest的status的值的含義
- ajax+php打造進(jìn)度條 readyState各狀態(tài)
- ajax+php打造進(jìn)度條代碼[readyState各狀態(tài)說明]
- AJax 學(xué)習(xí)筆記二(onreadystatechange的作用)
- AJAX(XMLHttpRequest.status)狀態(tài)碼
- Ajax 給 XMLHttpReq.onreadystatechange傳遞參數(shù)
- javascript學(xué)習(xí)筆記（七）Ajax和Http狀態(tài)碼
- 探討Ajax中有關(guān)readyState（狀態(tài)值）和status（狀態(tài)碼)的問題
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Bootstrap框架,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了javascript使用call調(diào)用微信API,需要的朋友可以參考下2014-12-12
下面小編就為大家?guī)硪黄贘S對象創(chuàng)建常用方式及原理分析。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了JavaScript寄生組合式繼承,結(jié)合實(shí)例形式分析了javascript寄生組合式繼承的原理、定義與簡單使用方法,需要的朋友可以參考下2019-01-01
本篇文章主要是對js 判斷控件獲得焦點(diǎn)的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
JavaScript圖片旋轉(zhuǎn)效果實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JavaScript圖片旋轉(zhuǎn)效果實(shí)現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
用JS提交參數(shù)創(chuàng)建form表單在FireFox中遇到的問題
在一個(gè)前端頁面上，需要通過JavaScript來提交參數(shù)，使用JS創(chuàng)建form表單，將參數(shù)append到表單中進(jìn)行提交,接下來將介紹如何操作與實(shí)現(xiàn)2013-01-01
JavaScript實(shí)現(xiàn)數(shù)字前補(bǔ)“0”的五種方法示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)字前補(bǔ)“0”的五種方法,結(jié)合具體實(shí)例形式分析了javascript數(shù)字前補(bǔ)0的相關(guān)操作技巧,涉及javascript字符串遍歷、迭代、截取、構(gòu)造等操作,需要的朋友可以參考下2019-01-01
為什么JS中eval處理JSON數(shù)據(jù)要加括號
這篇文章主要介紹了為什么JS中eval處理JSON數(shù)據(jù)要加括號的相關(guān)資料,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細(xì)介紹了jsTree事件和交互以及插件plugins的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08