ホームページ >ウェブフロントエンド >jsチュートリアル >firefox_javascript スキルにおける ajax の onreadystatechange のサポートの分析

firefox_javascript スキルにおける ajax の onreadystatechange のサポートの分析

WBOY
WBOYオリジナル
2016-05-16 18:39:08873ブラウズ

1. 質問:

コードをコピーします コードは次のとおりです。

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 を使用してください。

2 番目: 後。テストの結果、IE では onreadystatechange が正常ですが、FF3 では、readyState=0 のときのコードしか実行できないことがわかりました。 ReadyState=4 のコードは実行できません。インターネットで理由を見つけました。
ajax の XMLHttpRequest.onreadystatechange メソッドの違い: FF では、状態が 1 のとき (つまり、XMLHttpRequest が open を呼び出しているが、まだ send が呼び出されていません)、FF は次のコードを実行した後、onreadystatechange のコードを状態 2、3、および 4 で実行し続けますが、IE は状態 2 の到着を待って終了します。 onreadystatechange の状態 2、3、および 4 を実行します。コードの後、次のコードを実行し続けるため、多くの場合、onreadystatechange のコードはサーバーから取得したデータを処理する必要があります (このデータは、次の場合にのみ取得できます)。 onreadystatechange のステータスは 4) なので、IE では onreadystatechange 後のデータを実行する前に onreadystatechange ステータス 4 の到着を待つため問題はありません。ただし、FF はコードの実行前に onreadystatechange ステータス 4 が到着するまで待機しないためです。 onreadystatechange の後なので、後続のコードはスレーブ サーバーを処理できません。取得したデータはどうすればよいでしょうか。

解決策: JavaScript クロージャを使用します (この解決策は GMAP からインスピレーションを得ています)。 onreadystatechange に関数を渡して、サーバーから返されたデータを処理しますが、onreadystatechange はパラメーターのない関数なので、どうすればよいでしょうか。パラメータを渡す方法は以前のJavaScriptのattachEventで紹介しましたが、onreadystatechangeにパラメータを渡す方法ですが、onreadystatechangeではこのincoming関数を使用することができます。このパラメータなしの関数。この方法はIEでもFFでも問題なく動作するので良い方法です。

ここではクロージャの使用について言及していますが、これは非常に複雑です。また、インターネット上では FF で onload を使用している人もいますが、これは機能しません。エラーのトラブルシューティングを行った後、上記の概要で説明した理由が根本的な理由です。つまり、FF では、onreadystatechange を初めて実行した後、送信するまで実行され続けますが、後で onreadystatechange を実行することはできません。 、いつも愚かです。

私はそれを次のように直接変更しました:



コードをコピーします コードは次のとおりです: xmlHttp .onreadystatechange = xmlHandle;
xmlHttp.open ("GET",Url,false);
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 は次のように変更されました。しかし、括弧を追加した後、残念ながら FF は機能しませんでした。以前は鶏の皮でしたが、今は FF のように感じます。これは純粋に「標準をサポートする」というタイトルですが、プログラマーの時間の無駄です。しかし、手元にあるプログラムは非常に重要なので、次のように、もっと簡単な方法がないかを確認するためにもう一度デバッグするしかありません:




コードをコピー


コードは次のとおりです。
xmlHttp.open ("GET",Url,false); xmlHttp.send(null); (xmlHttp.status==200) xmlHandle();
このコードは IE と FF で広く使用できます。ただし、これは同期呼び出しであるため、readyState
ブラウザの種類の分析のみを追加します。
コードをコピー コードは次のとおりです。

function getOs()
{
var OsObject = "";
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE">}
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"
}


次に、AJAX コードを次のように変更します。

コードをコピーします コードは次のとおりです。
var rndcode = new Date().getTime();
var CartUrl ="a.asp?cache=" rndcode
var btype=getOs(); .onreadystatechange = (btype!="Firefox")?xmlHandle():xmlHandle;
xmlHttp.open ("GET",CartUrl,false);
xmlHttp.onreadystatechange = ( btype!="Firefox")?xmlHandle():xmlHandle;


例 2


コードをコピーします コードは次のとおりです。 //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"; //サファン ブラウザ
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return "Camino" ; >}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return "Gecko"; //Gecko ブラウザ
}
}
var objHttp ;
関数 searchCommodityByGroupId(groupId)
{
objHttp = getHttpRequest();
var tt=new Date();
var url="getCommodityListByGroupId.htm?commodityGroupId " &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
}
関数 getCommodity(); 🎜>
if(objHttp.readyState==4)
{
if(objHttp.status==200)
{
document.getElementById("commodityDiv").innerHTML=objHttp 。
}
}
}

関数 getHttpRequest(){
var httpRequest;
if (window.XMLHttpRequest){
httpRequest = new XMLHttpRequest( ) ;
if (httpRequest.overrideMimeType){
httpRequest.overrideMimeType('text/xml')
}
}else if (window.ActiveXObject){
try{
= new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){ }
}
}
return httpRequest
}

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。