Question

我如何在我的功能中执行此操作：当Post（）工作时，我想显示加载符号。

function Post() {

    // 1. Create XHR instance - Start
    var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } else {
        throw new Error("Ajax is not supported by this browser");
    }
    // 1. Create XHR instance - End

    // 2. Define what to do when XHR feed you the response from the server - Start
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status == 200 && xhr.status < 300) {
                document.getElementById('new_story_post').innerHTML = xhr.responseText;
            }
        }
    }
    // 2. Define what to do when XHR feed you the response from the server - Start

    var textid = document.getElementById("textid").value;

    // 3. Specify your action, location and Send to the server - Start 
    xhr.open('POST', 'post.php');
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("textid=" + textid);
    // 3. Specify your action, location and Send to the server - End
}

Answer 1

您已在代码中使用它。请查看有关onreadystatechange event。

的文档

每次readyState更改时都会触发onreadystatechange事件。 readyState属性保存XMLHttpRequest的状态。

希望这有帮助。

修改：Example here

xmlhttp.onreadystatechange = function () {

    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

        $("#loading").append('Loaded. Status is ' + xmlhttp.readyState + '<br />');

    } else {

        $("#loading").append('Working... Status is ' + xmlhttp.readyState + '<br />');
    }
}

Answer 2

算法

在调用您的服务之前显示加载标志。
服务响应时隐藏它。

实施

更新您的功能：

function Post() {
  // 0. Display the loading sign
  document.getElementById("loading-overlay").style.display = "block";

  // 1. Create XHR instance
  // ...

  // 2. Response handler 
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status == 200 && xhr.status < 300) {
        document.getElementById('new_story_post').innerHTML = xhr.responseText;
      }

      // Hide the loading sign whatever the response is
      document.getElementById("loading-overlay").style.display = "none";
    }
  }

  // ...
}

将加载标志附加到body：

<div id="loading-overlay">Loading...</div>

添加一些CSS：

#loading-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  text-align: center;
  display: none;
}

加成

您可以使用回调来更好地解耦代码。

function Post(textid, fn) {
  // 1. Create XHR instance - Start
  var xhr;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    xhr = new ActiveXObject("Msxml2.XMLHTTP");
  } else {
    return fn(new Error("Ajax is not supported by this browser"));
  }
  // 1. Create XHR instance - End

  // 2. Define what to do when XHR feed you the response from the server - Start
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status == 200) {
        fn(null, xhr.responseText);
      } else {
        fn(new Error('Request failed'));
      }
    }
  };

  // 3. Specify your action, location and Send to the server - Start 
  xhr.open('POST', 'post.php');
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send("textid=" + textid);
  // 3. Specify your action, location and Send to the server - End
}

用法：

// Display the loader
document.getElementById("loading-overlay").style.display = "block";

// Get the textid
var textid = document.getElementById("textid").value;

// Call the service
Post(textid, function(err, res) {
  if (err) {
    // Handle error
  } else {
    // Hide loader
    document.getElementById("loading-overlay").style.display = "none";

    // Update view
    document.getElementById('new_story_post').innerHTML = res;
  }
});

等待函数完成并执行等待前一个函数完成的函数（页面加载）

2 个答案:

算法

实施

加成