javascript - 在ajax中调用PHP函数，不推荐使用同步XMLHttpRequest

Question

对于php来说完全是新的/ajax 。每个教程似乎都以某种方式过时了。花了大约 30 个小时试图想出一个简单的插入/检索脚本。请帮忙!一旦我看到代码工作起来，我就更容易摆弄它并理解文档。

我收到以下错误。

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

我的index.php相关数据，错误在xmlhttp.open行。

disp_data();
function disp_data(){

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", "update.php?status=disp",false);

这是我的update.php相关代码。在教程中，它应该在刷新时加载我的数据，但它是空白的。我不知道为什么教程将其设置为 false，当我在 w3schools 阅读的文档似乎我应该将其设为 true，但两者都不起作用。

$status = $_GET["status"];

if ($status == "disp") {
  $link = mysqli_connect("localhost", "root", "");
  mysqli_select_db($link, "checkbox");

$res = mysqli_query($link, "SELECT * FROM table1");

我的完整index.php

<div id ="disp_data"></div>

<script src="jquery-3.2.1.min.js"></script>
<script type ="text/javascript">

(function() {
  var newXHR = null;

  function sendXHR(type, url, data, callback) {
    newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
    newXHR.open(type, url, true); // Use async = true to avoid bad user experience for waiting a Sychronous request that might block the UI.
    newXHR.send(data);

    newXHR.onreadystatechange = function() {
      if (this.status === 200 && this.readyState === 4) {
        callback(this.response); // Callback function to process the response.
      }
    };
  }

  sendXHR("GET", "update.php?status=disp", null, function(response) {
    document.getElementById("disp_data").innerHTML=newXHR.responseText;
  });

})();

</script>

</body>

我的完整 update.php 文件

$status = $_GET["status"];
if($status=="disp")
{
$link = mysqli_connect("localhost", "root", "");
mysqli_select_db($link,"checkbox");
$res = mysqli_query($link,"SELECT * FROM table1");

echo "<table>";
while($row = mysqli_fetch_array($res))
{
echo "<tr>";
echo "<td>";   echo $row["id"]; echo "</td>";
echo "<td>";  echo $row["name"];  echo "</td>";
echo "<td>";  echo $row["city"];  echo "</td>";

echo "</tr>";
}
echo "</table>";
}

Answer 1

您应该在 async 参数中使用 true。

类似这样的:xmlhttp.open("GET", "update.php?status=disp", true);。

参见XMLHttpRequest.open() .

您可以使用此辅助函数来生成 XMLHttpRequest。

适用于所有浏览器，包括 IE6。

var newXHR = null;

function sendXHR(type, url, data, callback) {
  newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
  newXHR.open(type, url, true); // Use async = true to avoid bad user experience for waiting a Sychronous request that might block the UI.
  newXHR.send(data);
  newXHR.onreadystatechange = function() {
    if (this.status === 200 && this.readyState === 4) {
      callback(this.response); // Callback function to process the response.
    }
  };
}

用法:

sendXHR("GET", "update.php?status=disp", null, function(response) {
  console.log(response);
});

您可以使用此演示检索数据:

(function() {



  var newXHR = null;

  function sendXHR(type, url, data, callback) {
    newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
    newXHR.open(type, url, true); // Use async = true to avoid bad user experience for waiting a Sychronous request that might block the UI.
    newXHR.send(data);
    newXHR.onreadystatechange = function() {
      if (this.status === 200 && this.readyState === 4) {
        callback(this.response); // Callback function to process the response.
      }
    };
  }


  // Example 1: Get data.
  var btnRequest = document.getElementById("btnRequest");
  btnRequest.onclick = function() {
    sendXHR("GET", "https://gist.githubusercontent.com/dannyjhonston/22851f9c21733973b2705b0b65443f90/raw/30cf99ceeb470a7ab6d2ffb51a78f1bb57f41ca3/data.txt", null, function(response) {
      document.getElementById("myDiv").innerHTML = response; // response contains the data from the server.
    });
  };


  // Example 2. Cancel a long request.
  var btnCancelRequest = document.getElementById("btnCancelRequest");
  btnCancelRequest.onclick = function() {
    newXHR.abort(); // You can use the newXHR variable to abort a XMLHttpRequest that is taking long time to response, with the .abort() method.
  };





})();

#myDiv {
  border: solid 1px #ccc;
  border-radius: 5px;
  margin: 20px;
  padding: 5px;
}

<button id="btnRequest" type="button">Request data</button>
<button id="btnCancelRequest" type="button">Cancel request</button>
<div id="myDiv">The new content will print here.</div>

<小时/>

很高兴知道这一点:

XMLHttpRequest.response property returns the response's body. It can be of the type ArrayBuffer, Blob, Document, JavaScript object, or a DOMString, depending of the value of XMLHttpRequest.responseType property. Value of response is null if the request is not complete or was not successful. However, if the value of responseType was set to "text" or the empty string, response can contain the partial text response while the request is still in the loading state.

XMLHttpRequest.responseText property returns a DOMString that contains the response to the request as text, or null if the request was unsuccessful or has not yet been sent. The responseText property will have the partial response as it arrives even before the request is complete. If responseType is set to anything other than the empty string or "text", accessing responseText will throw InvalidStateError exception.

<小时/>

您的php代码必须是这样的:

$status = $_GET["status"];
if($status=="disp")
{
    $link = mysqli_connect("localhost", "root", "");
    mysqli_select_db($link,"checkbox");
    $res = mysqli_query($link,"SELECT * FROM table1");

    $html = "<table>"; // Declare a variable to concat the html content.
    while($row = mysqli_fetch_array($res))
    {
        $html += "<tr><td>";
        $html += $row["id"];
        $html += "</td><td>";
        $html += $row["name"];
        $html += "</td><td>";
        $html += $row["city"];
        $html += "</td></tr>";
    }
    $html += "</table>";
    echo $html; // Prints the $html variable.
}

在你身上html您需要删除的代码:

<script src="jquery-3.2.1.min.js"></script>

如果你要使用原生的 javascript 则没有必要.