XMLHttpRequest 异步请求

最新推荐文章于 2024-10-11 08:30:00 发布

原创最新推荐文章于 2024-10-11 08:30:00 发布 · 313 阅读

0 ·

CC 4.0 BY-SA版权

创作源自于MyFreeIT

文章标签：

#javascript #XMLHttpRequest

Script 专栏收录该内容

12 篇文章

订阅专栏

这篇文章展示了如何在JavaScript中使用XMLHttpRequest对象进行异步HTTP请求。通过将回调函数作为参数，可以在数据加载完成后更新DOM元素。文中提到了`this`关键字在onload回调内的作用，并对比了使用onreadystatechange事件处理不同状态的情况。

把一个方法以参数的形式，作为内部函数，是另一种解决问题的角度。

this关键字，只有在onload的回调函数内部有效。

<!DOCTYPE html>
<html>
<body>
<div id="demo" />
<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function loadXMLDoc() {
  var req = new XMLHttpRequest();
  req.onload = function(){myDisplayer(this.responseText)};
  req.open("GET", "http://localhost:8888/rest/order/1", true);
  req.send();
}
loadXMLDoc();
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<div id="demo" />
<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function loadXMLDoc() {
  var req = new XMLHttpRequest();
  // req.onload =();
  req.onreadystatechange = (function() {
    if (this.readyState == 4 && this.status == 200) {
      myDisplayer(this.responseText);
    } else {
      myDisplayer("Error: " + req.status);
    }
  });
  req.open("GET", "http://localhost:8888/rest/order/1", true);
  req.send();
}
loadXMLDoc();
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<div id="demo" />
<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function loadXMLDoc(myCallback) {
  var req = new XMLHttpRequest();
  // req.onload =();
  req.onreadystatechange = (function() {
    if (this.readyState == 4 && this.status == 200) {
      myCallback(this.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  });
  req.open("GET", "http://localhost:8888/rest/order/1", true);
  req.send();
}
loadXMLDoc(myDisplayer);
</script>
</body>
</html>