2009-06-18 6 views
3

AJAXリクエストを作成してレスポンスを処理するには、私は奇妙な問題を抱えています。AJAX responseXMLエラー

xmlファイルのajax呼び出しを作成しています。しかし、私は応答を取得するxhr.responseTextプロパティは、Firefoxでうまく動作しますが、IEでは動作しません。 もう1つは、xhr.responseXMLにXMLDocumentとしてアクセスしようとしていますが、xhr.responseXMLが未定義であることをFirefoxに伝えます。つまり、未定義のエラーを表示したり、出力を表示したりしません。

これは私が要求を行うために使用していたコードです:

var ajaxReq = function(url, callback) { 
    //initialize the xhr object and settings 
    var xhr = window.ActiveXObject ? 
      new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(), 
    //set the successful connection function 
     httpSuccess = function(xhr) { 
      try { 
       // IE error sometimes returns 1223 when it should be 204 
       // so treat it as success, see XMLHTTPRequest #1450 
       // this code is taken from the jQuery library with some modification. 
       return !xhr.status && xhr.status == 0 || 
         (xhr.status >= 200 && xhr.status < 300) || 
         xhr.status == 304 || xhr.status == 1223; 
      } catch (e) { } 
      return false; 
     }; 

    //making sure the request is created 
    if (!xhr) { 
     return 404; // Not Found 
    } 


    //setting the function that is going to be called after the request is made 
    xhr.onreadystatechange = function() { 
     if (!httpSuccess(xhr)) { 
      return 503; //Service Unavailable 
     } 
     if (xhr.responseXML != null && xhr.responseText != null && 
       xhr.responseXML != undefined && xhr.responseText != undefined) { 
      callback(xhr); 
     } 
    }; 


    //open request call 
    xhr.open('GET', url, true); 

    //setup the headers 
    try { 
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
     xhr.setRequestHeader("Accept", "text/xml, application/xml, text/plain"); 
    } catch (ex) { 
     window.alert('error' + ex.toString()); 
    } 

    //send the request 
    try { 
     xhr.send(''); 
    } catch (e) { 
     return 400; //bad request 
    } 

    return xhr; 
}; 

、これは私が結果をテストするための関数を呼び出しています方法です:

window.onload = function() { 
    ajaxReq('ConferenceRoomSchedules.xml', function(xhr) { 
     //in firefox this line works fine, 
     //but in ie it doesnt not even showing an error 
     window.document.getElementById('schedule').innerHTML = xhr.responseText; 
     //firefox says ''xhr.responseXML is undefined'. 
     //and ie doesn't even show error or even alerts it. 
     window.alert(xhr.reponseXML.documentElement.nodeName); 
    }); 
} 

これがまた私の最初の試みでありますAJAXと連携するためには、私が正しく見ていないことがあるかもしれません。 私はそれをどうやって修正するかの兆候は見逃せませんでしたが、そこに運がありません。 すべてのアイデアが素晴らしいだろう。

EDIT:

私は、これはフレームワークと良いだろうけど、上司はちょうどAjax機能のためのフレームワークを追加する必要はありません(「単に」AJAXの公正言葉ではありません。 P)。だから私は純粋なjavascriptでそれをやっている。

XMLファイルが整形式である、私は、Webブラウザでもそれを見たが、完成のために、これは私が使用していますテストファイルです:

<?xml version="1.0" encoding="utf-8"?> 
<rooms> 
    <room id="Blue_Room"> 
    <administrator>[email protected]</administrator> 
    <schedule> 
     <event> 
     <requester> 
      <name>Johnny Bravo</name> 
      <email>[email protected]</email> 
     </requester> 
     <date>2009/09/03</date> 
     <start_time>11:00:00 GMT-0600</start_time> 
     <end_time>12:00:00 GMT-0600</end_time> 
     </event> 
    </schedule> 
    </room> 
    <room id="Red_Room"> 
    <administrator>[email protected]</administrator> 
    <schedule> 
    </schedule> 
    </room> 
    <room id="Yellow_Room"> 
    <administrator>[email protected]</administrator> 
    <schedule> 
    </schedule> 
    </room> 
</rooms> 

EDIT 2: まあ良いニュース私は上司にjQueryの使用を納得させました。悪い知らせは、AJAXがまだ私に困惑しているということです。好奇心のためだけに私はそれについてもっと読むでしょう。ヒントをありがとうと私は彼が最も近い作業のヒントだったのでヒートミーサーに答えクレジットを与えた。

答えて

4

私は数年前に同じ問題を抱えていましたが、私はresponseXMLをあきらめて、常にresponseTextを使い始めました。このXMLHttpRequestオブジェクトで

function parseXml(xmlText){ 
    try{ 
     var text = xmlText; 
     //text = replaceAll(text,"&lt;","<"); 
     //text = replaceAll(text,"&gt;",">"); 
     //text = replaceAll(text,"&quot;","\""); 
     //alert(text); 
     //var myWin = window.open('','win','resize=yes,scrollbars=yes'); 
     //myWin.document.getElementsByTagName('body')[0].innerHTML = text; 
     if (typeof DOMParser != "undefined") { 
      // Mozilla, Firefox, and related browsers 
      var parser=new DOMParser(); 
      var doc=parser.parseFromString(text,"text/xml"); 
      //alert(text); 
      return doc; 
     }else if (typeof ActiveXObject != "undefined") { 
      // Internet Explorer. 
     var doc = new ActiveXObject("Microsoft.XMLDOM"); // Create an empty document 
      doc.loadXML(text);   // Parse text into it 
      return doc;     // Return it 
     }else{ 
      // As a last resort, try loading the document from a data: URL 
      // This is supposed to work in Safari. Thanks to Manos Batsis and 
      // his Sarissa library (sarissa.sourceforge.net) for this technique. 
      var url = "data:text/xml;charset=utf-8," + encodeURIComponent(text); 
      var request = new XMLHttpRequest(); 
      request.open("GET", url, false); 
      request.send(null); 
      return request.responseXML; 
     } 
    }catch(err){ 
     alert("There was a problem parsing the xml:\n" + err.message); 
    } 
} 

:この解析関数は、常に私のために働いてい

// The XMLHttpRequest class object 

debug = false; 

function Request (url,oFunction,type) { 
    this.funct = ""; 
    // this.req = ""; 
    this.url = url; 
    this.oFunction = oFunction; 
    this.type = type; 
    this.doXmlhttp = doXmlhttp; 
    this.loadXMLDoc = loadXMLDoc; 
} 

function doXmlhttp() { 
    //var funct = ""; 
    if (this.type == 'text') { 
     this.funct = this.oFunction + '(req.responseText)'; 
    } else { 
     this.funct = this.oFunction + '(req.responseXML)'; 
    } 
    this.loadXMLDoc(); 
    return false; 
} 

function loadXMLDoc() { 
    //alert(url); 
    var functionA = this.funct; 
    var req; 
    req = false; 

    function processReqChange() { 
     // alert('reqChange is being called'); 
     // only if req shows "loaded" 
     if (req.readyState == 4) { 
      // only if "OK" 
      if (req.status == 200) { 
       // ...processing statements go here... 
       eval(functionA); 
       if(debug){ 
        var debugWin = window.open('','aWindow','width=600,height=600,scrollbars=yes'); 
        debugWin.document.body.innerHTML = req.responseText; 
       } 
      } else { 
       alert("There was a problem retrieving the data:\n" + 
        req.statusText + '\nstatus: ' + req.status); 
       if(debug){ 
        var debugWin = window.open('','aWindow','width=600,height=600,scrollbars=yes'); 
        debugWin.document.body.innerHTML = req.responseText; 
       } 
      } 
      } 
    } 

    // branch for native XMLHttpRequest object 
    if(window.XMLHttpRequest) { 
     try { 
      req = new XMLHttpRequest(); 
     } catch(e) { 
      req = false; 
     } 
    // branch for IE/Windows ActiveX version 
    } else if(window.ActiveXObject) { 
     try { 
       req = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch(e) { 
       try { 
        req = new ActiveXObject("Microsoft.XMLHTTP"); 
       } catch(e) { 
        req = false; 
       } 
     } 
    } 



    if(req) { 
     req.onreadystatechange = processReqChange; 
     if(this.url.length > 2000){ 
      var urlSpl = this.url.split('?'); 
      req.open("POST",urlSpl[0],true); 
      req.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
      req.send(urlSpl[1]); 
     } else { 
      req.open("GET", this.url, true); 
      req.send(""); 
     } 
    } 
} 

function browserSniffer(){ 
    if(navigator.userAgent.toLowerCase().indexOf("msie") != -1){ 
     if(navigator.userAgent.toLowerCase().indexOf("6")){ 
      return 8; 
     }else{ 
      return 1; 
     } 
    } 
    if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1){ 
     return 2; 
    } 
    if(navigator.userAgent.toLowerCase().indexOf("opera") != -1){ 
     return 3; 
    } 
    if(navigator.userAgent.toLowerCase().indexOf("safari") != -1){ 
     return 4; 
    } 
    return 5; 
} 
確か

が、これは非常に古いコードですが、それはまだサイト上で私のために働いている私はいくつかを建て数年前。私は現在、フレームワークを使用していますが、このコードを使用する必要はありません。

要求の読み取り機能で、分割などで明細の一部を無視することができます。それはある長さよりも長い場合、要求を投稿に変換することになっていたが、私はちょうどそれが常にポストを行う方が良いと決めた。

+0

レスポンステキストはブラウザ間の環境で見た目がよく見えますが、私はこのメソッドを使用するつもりです。スクリプトのおかげで –

+0

問題はありません、私は助けることができてうれしい! –

+0

あなたの答えは、7年後の同様の問題の正しい方向に私を指摘しました:)私はIE9で.responseを使用していましたが、他のすべてのブラウザでは動作しませんでした。 .responseTextはすべてのブラウザで動作します。良い! – K48

1

これらのブラウザ間の問題を非表示にして管理するフレームワークを(信頼性の高い方法で)検討することをお勧めします。ここのポイントはjQueryです。これらのことを自分で行うことは、かなり難しく複雑になる可能性があります。

Thisが必要な場合があります。

//編集: これはw3schoolがそれを示してどのようである:

function ajaxFunction() 
{ 
var xmlhttp; 
if (window.XMLHttpRequest) 
    { 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else if (window.ActiveXObject) 
    { 
    // code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
else 
    { 
    alert("Your browser does not support XMLHTTP!"); 
    } 
} 
+0

これは良い提案です。ライブラリがブラウザ間の問題を心配するようにしましょう。 –

+0

私は同意します、私はjQueryを使用しましたが、上司はajaxを使うつもりならばフレームワーク全体をウェブサイトに埋めたいとは考えていません。だから私はそれを自分でやる必要があります。私はまだ彼にフレームワークの使用を納得させようとしていますが。 –

+0

@トニー・L.、彼はjQueryはスクリプトであり、フレームワークではないことを伝えます。フレームワークは重く聞こえる。 –

0

あなたのクロスブラウザの問題を回避するには(およびテストされ、強力なコミュニティが既に開発している項目の多くをコーディング自分を救います、およびレビュー)、あなたはjavascriptライブラリを選択する必要があります。 JQueryとDojoは素晴らしい選択肢です。

1

現在のドキュメントからの相対URLを呼び出していますか? IEはActiveXオブジェクトを使用することになりますので、それは例えば、絶対パス、必要がある場合があります:XML用として

http://some.url/ConferenceRoomSchedules.xml

を、あなたはそれがうまく形成されていますよろしいですか?それはXMLエディタで読み込まれますか?

+0

返信いただきありがとうございます。私は絶対パスを使用してみましたが、IEでは同じ結果がまだありません。 –

0

あなたのウェブサーバーは、 'ConferenceRoomSchedules.xml'で正しい応答ヘッダーを提供する必要があります。 Content-Type:text/xmlまたはその他のxmlタイプ。

3

この問題は、コンテンツタイプがブラウザによって誤検出されたか、正しく送信されなかった場合に発生します。

var request = new XMLHttpRequest(); 
request.open("GET", url, false); 
request.overrideMimeType("text/xml"); 
request.send(null); 
return request.responseXML; 

ない...この問題は、SafariとChromeでのみ発生する理由(WebKitのブラウザで、サーバーが正しくヘッダを送信します)確認を:ちょうどそれを上書きする

その容易になります。

+0

これは私の問題を修正しました。ありがとう – Stefano

0

アロンの答えはhttps://stackoverflow.com/a/2081466/657416です。私の考え方は、最もシンプルな(そして最高の)ものです。ここに私の作業コードがあります:

ajax = ajaxRequest(); 
ajax.overrideMimeType("text/xml"); 
ajax.open("GET", myurl;