XMLHttpRequest (Ajax) 错误

Posted 2023-02-22

【中文标题】XMLHttpRequest (Ajax) 错误

【英文标题】：XMLHttpRequest (Ajax) Error

【发布时间】：2012-02-10 14:41:29

【问题描述】：

我在 javascript 中使用XMLHttpRequest。但是，它给了我一个错误，我不知道我的问题是什么。 我必须解析一个 XML 文件并将其内容分配给网页 - 这是我的代码：

<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 上运行我的网站。

【参考方案1】：

所以这里可能有一些问题。

首先阅读如何使用XMLHttpRequest.open()，因为有第三个可选参数用于指定是否发出异步请求，默认为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，您可以参考 MDN 获取 Javascript API 文档/示例/教程。

【讨论】：

我仍然有这个问题。当我尝试 Nadir 的第二段代码时，我收到以下错误。我怀疑这是我的问题“XMLHttpRequest 无法加载文件：///Users/me/My%20Directory%20quiz/quiz.xml。跨源请求仅支持 HTTP。”

你输入的url应该和以前一样...示例中的url只是一个示例url...

你用的是什么网络服务器？？

我在代码中输入的“URL”是我机器上文件的路径，我只是为帖子更改了它。我没有使用网络服务器。我想知道这是否是问题所在。我只是想从我的驱动器中检索文件。我需要下载网络服务器软件吗？或者我应该将它嵌入到 Django 或 Rails 服务器中进行测试？

你需要一个网络服务器，XMLHttpRequest 在获取本地文件方面不是很好......一些浏览器可能允许它......无论如何，你似乎对此非常了解，所以你在你进入这些东西之前应该先建立一个基本的网站

【参考方案2】：

我看到 2 个可能的问题：

问题 1

XMLHTTPRequest 对象在您尝试使用它时尚未完成数据加载

解决方案： 为对象“onreadystatechange”事件分配一个回调函数并处理该函数中的数据

xmlhttp.onreadystatechange = callbackFunctionName;

state 达到 DONE (4) 后，即可读取响应内容。

问题 2

XMLHTTPRequest 对象并非在所有浏览器中都存在（按该名称）

解决方案： 使用 try-catch 为正确的浏览器创建正确的对象（IE 中的 ActiveXObject）或使用框架，例如 jQuery ajax-method

注意：如果你决定使用 jQuery ajax 方法，你可以使用 jqXHR.done() 分配回调函数

【参考方案3】：

问题很可能出在这行代码上：

window.onload = onPageLoad();

通过包含括号，您说onload 应该等于onPageLoad() 的返回值。例如：

/*Example function*/
function onPageLoad()

    return "science";

/*Set on load*/
window.onload = onPageLoad()

如果您将window.onload 的值打印到控制台，它将是：

科学

解决办法是去掉括号：

window.onload = onPageLoad;

所以，您使用onPageLoad 作为对所谓函数的引用。

最后，为了获得响应值，您需要为您的XMLHttpRequest 对象设置一个readystatechange 侦听器，因为它是异步的：

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
    

【讨论】：

你说的大部分都是真的，但是将函数的返回值分配给window.onload意味着该函数必须被执行，因此应该可以工作。另请注意，函数声明的位置没有区别，因为 JavaScript 中的函数声明被提升到声明它们的范围的顶部。

我完全同意您关于声明的声明并编辑了我的答案；似乎我被错误的括号蒙蔽了。