web-dev-qa-db-ja.com

XMLHttpRequest（Ajax）エラー

JavaScriptでXMLHttpRequestを使用しています。しかし、それは私にエラーを与え、私の問題が何なのか分かりません。
XMLファイルを解析し、そのコンテンツをWebページに割り当てる必要があります。これが私のコードです。

<script = "text/javascript">

    window.onload = onPageLoad();
    var questionNum = 0;

    function onPageLoad(questionNum) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET","quiz.xml");
        try {
            xmlhttp.send(null); // Here a xmlhttprequestexception number 101 is thrown 
        } catch(err) {
            document.getElementById("body").innerHTML += "\nXMLHttprequest error: " + err.description; // This prints "XMLHttprequest error: undefined" in the body.
        }
        xmlDoc = xmlhttp.responseXML;
        parser = new DOMParser(); // This code is untested as it does not run this far.
    }
</script>

私のXMLファイルは同じディレクトリ内にあります。

<question>
    <query>what is 2+2?</query>
    <option>4</option>
    <option>5</option>
    <option>3</option>
    <answer>4</answer>
</question>

参考までに、私は通常C＃またはJavaでプログラムし、Google ChromeでWebサイトを実行しています。

javascriptajaxxmlxmlhttprequest
49
Muricula

したがって、ここでいくつか間違っている可能性があります。

最初に XMLHttpRequest.open() の使用方法を読むことから始めます。非同期リクエストを行うかどうかを指定するための3番目のオプションパラメーターがあるためです。デフォルトはtrueです。つまり、非同期要求を作成しているので、send()を実行する前にコールバック関数を指定する必要があります。 MDN の例を次に示します。

var oXHR = new XMLHttpRequest();

oXHR.open("GET", "http://www.mozilla.org/", true);

oXHR.onreadystatechange = function (oEvent) {  
    if (oXHR.readyState === 4) {  
        if (oXHR.status === 200) {  
          console.log(oXHR.responseText)  
        } else {  
           console.log("Error", oXHR.statusText);  
        }  
    }  
}; 

oXHR.send(null);

次に、101エラーが発生するため、間違ったURLを使用する可能性があります。そのため、リクエストを行っているURLが正しいことを確認してください。また、サーバーがquiz.xmlファイルを提供できることを確認してください。

おそらく、問題のある場所を単純化/絞り込むことでデバッグする必要があります。したがって、簡単な同期要求を作成することから始めて、コールバック関数について心配する必要がないようにします。同期要求を行うためのMDNの別の例を次に示します。

var request = new XMLHttpRequest();  
request.open('GET', 'file:///home/user/file.json', false);   
request.send(null);  

if (request.status == 0)  
    console.log(request.responseText);

また、Javascriptを使い始めたばかりの場合は、Javascript APIのドキュメント/ examples/tutorialsについて MDN を参照できます。

80
Nadir Muzaffar

2つの問題が発生する可能性があります。

問題1

  • xMLHTTPRequestオブジェクトは、使用しようとした時点でデータのロードを完了していません

解決策：コールバック関数をオブジェクト "onreadystatechange" -eventに割り当て、その関数でデータを処理します

xmlhttp.onreadystatechange = callbackFunctionName;

state がDONE（4）に達すると、応答コンテンツを読み取る準備が整います。

問題2

  • xMLHTTPRequestオブジェクトがすべてのブラウザに（その名前で）存在するわけではありません

解決策：正しいブラウザー（IEのActiveXObject）の正しいオブジェクトを作成するためにtry-catchを使用するか、フレームワークを使用します。たとえば、 jQuery ajax-method

注：jQuery ajax-methodを使用する場合は、jqXHR.done（）を使用してコールバック関数を割り当てます。

2
supertopi

問題は次の行にある可能性があります。

window.onload = onPageLoad();

括弧を含めることで、onloadはonPageLoad()の戻り値と等しくなるはずです。例えば：

/*Example function*/
function onPageLoad()
{
    return "science";
}
/*Set on load*/
window.onload = onPageLoad()

window.onloadの値をコンソールに出力すると、次のようになります。

科学

解決策は、ブラケットを削除することです：

window.onload = onPageLoad;

そのため、onPageLoadを名前の付いた関数への参照として使用しています。

最後に、応答値を取得するには、非同期のreadystatechangeオブジェクトのXMLHttpRequestリスナーが必要です。

xmlDoc = xmlhttp.responseXML;
parser = new DOMParser(); // This code is untested as it doesn't run this far.

ここで、リスナーを追加します。

xmlHttp.onreadystatechange = function() {
    if(this.readyState == 4) {
        // Do something
    }
}
2
CBusBus