Ajax XmlHttpRequest

Ajax XmlHttpRequest

本文关键字：XmlHttpRequest Ajax      更新时间：2023-09-26

我有js代码以及带有一些文本的*.txt文件，我想加载到页面中。

JS代码：

 (function () {
 var link = document.getElementsByTagName("a")[0];
 link.onclick = function () {
      var xhr = new XmlHttpRequest();
      xhr.onreadystatechange = function () {
         if ((xhr.readyState == 4) && (xhr.status == 200 || xhr.status == 304)) {
                xhr.responseText;
                var body = document.getElementsByTagName("body")[0];
                var p = document.createElement("p");
                var pText = document.createTextNode(xhr.responseText);
                p.appendChild(pText);
                body.appendChild(p);
            }
        };
        xhr.open("Get", "ajax.txt", true);
        hxr.send(null);
        return false;
    };
})();

HTML代码：

<body>
<h1>AjaxTest</h1>
<a href="ajax.txt">Load the text from file</a>
<script src="main.js">
</script>

一切都应该正常。然而，ReSharper在XmlHttpRequest（）下加下划线并表示使用隐式声明的全局变量"，对于此xhr.responseText；它表示-表达式语句不是调用的赋值。问题出在哪里？

一些评论：

  • 大写"XML"：

    var xhr = new XmlHttpRequest();->var xhr = new XMLHttpRequest();


  • 变量不是语句：

    xhr.responseText;，去掉这条线，就像说var a = 5;，然后说a;


  • 您可以使用document.body来获取主体元素：

    var body = document.getElementsByTagName("body")[0];->

    var body = document.body;


  • 您没有名为hxr:的变量

    hxr.send(null);->xhr.send(null);


如果你遵循这是你应该得到的：

 (function () {
 var link = document.getElementsByTagName("a")[0];
 link.onclick = function () {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
         if ((xhr.readyState == 4) && (xhr.status == 200 || xhr.status == 304)) {
                var body = document.body;
                var p = document.createElement("p");
                var pText = document.createTextNode(xhr.responseText);
                p.appendChild(pText);
                body.appendChild(p);
            }
        };
        xhr.open("Get", "ajax.txt", true);
        xhr.send(null);
        return false;
    };
})();

如果我是你，我更喜欢使用jQuery:

$('a').first().click(function() {
    $.get('ajax.txt', function(data) {
        $(document.body).append('<p>' + data + '</p>');
    });
});

这是您使用jquery的全部代码；）

相关文章：