使用 JavaScript 获取 Http 请求

如何解决使用 JavaScript 获取 Http 请求

我在我的网站上使用 get 方法检查了我的部分，问题是，我希望这些部分以特定的时间间隔自动更改，所以我开始研究如何在 javascript 中使用 http get 方法，但我还没有找到还没回答，我的代码如下

        <div style="margin-left:25%; width: 10%; text-align: center;">   <!--min-width: min-content;-->
        <a href="#AnaSayfa" onclick="myfunction();"  style="text-decoration: none; color: black;">
            <div style="width: 100%; height: 100%; text-align: center; ">
              
               
                <div style="transform: translatey(50%); margin-top: 0px; width: auto;height: max-content; font-size: 24px; white-space: Nowrap; font-family: Tahoma; color:white;">Ana Sayfa</div>

            </div>
        </a>
    </div>

<section style="width: 100%; height: 100%; background-color: chartreuse;" id="Anasayfa"> </section>

<section style="width: 100%; height: 100%; background-color: chartreuse;" id="Anasayfa-2"> </section>

<section style="width: 100%; height: 100%; background-color: chartreuse;" id="Anasayfa-3"> </section>

解决方法

您还没有分享您如何使用 get。但是你可以像@ali 所说的那样使用 Ajax。基本上 Ajax 或 XMLHttpRequest 你可以这样做：

const xhr = new XMLHttpRequest(),method = "GET",url = "https://developer.mozilla.org/";

xhr.open(method,url,true);
xhr.onreadystatechange = function () {
  // In local files,status is 0 upon success in Mozilla Firefox
  if(xhr.readyState === XMLHttpRequest.DONE) {
    var status = xhr.status;
    if (status === 0 || (status >= 200 && status < 400)) {
      // The request has been completed successfully
      console.log(xhr.responseText);
    } else {
      // Oh no! There has been an error with the request!
    }
  }
};
xhr.send();

此处 onreadystatechange 每次更改 readystate 时都会触发。 readystate 可以有 5 个值：

0 is UNSENT,i.e the req is stll not established
1 is OPENED,the req to the server is being opend
2 is HEADERS_RECEIVED,we have got back the haeders
3 is LOADING,the data is coming from server.
4 is DONE,the whole operation is complete.

借助这些状态更改，您可以在特定时间间隔内执行某些操作。

您可以找到就绪状态列表 here！

您可以从here

学到更多 ,

您不需要做任何请求。

您可以使用 document

控制页面上的元素

const sections = ['Anasayfa','Anasayfa-2','Anasayfa-3'];
let i = 0;

function myfunction() {
  document.getElementById(sections[i]).style.display = 'none';
  i++;
  if (i === sections.length) { i = 0; }
  document.getElementById(sections[i]).style.display = 'block';
}

function auto() {
  myfunction();
  setInterval(myfunction,1000);
}

window.onload = function() {
  auto();
}

body {
  background: #000;
}

section {
  display: none;
}

#Anasayfa {
  display: block;
}

<div style="margin-left:25%; width: 10%; text-align: center;">   <!--min-width: min-content;-->
        <a href="#AnaSayfa" onclick="myfunction();"  style="text-decoration: none; color: black;">
            <div style="width: 100%; height: 100%; text-align: center; ">
              
               
                <div style="transform: translatey(50%); margin-top: 0px; width: auto;height: max-content; font-size: 24px; white-space: nowrap; font-family: Tahoma; color:white;">Ana Sayfa</div>

            </div>
        </a>
    </div>

<section style="width: 100%; height: 100%; background-color: chartreuse;" id="Anasayfa"> 1 </section>

<section style="width: 100%; height: 100%; background-color: red;" id="Anasayfa-2"> 2 </section>

<section style="width: 100%; height: 100%; background-color: blue;" id="Anasayfa-3"> 3 </section>

在 javascript 中有多种获取元素的方法。

直接通过元素 id（HTML 的 id 属性）
document.getElementById(id)
document.querySelector(cssSelector)

在页面 Document 中使用 getElement 搜索寻找更多选项