在 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 属性返回响应的 身体。它可以是ArrayBuffer、Blob、Document、 JavaScript 对象，或 DOMString，取决于 XMLHttpRequest.responseType 财产。如果响应的值为 null 请求未完成或未成功。但是，如果 responseType 的值设置为 "text" 或空字符串， 响应可以包含部分文本响应，而请求是 仍处于加载状态。

XMLHttpRequest.responseText 属性返回 DOMString 包含对请求的响应作为文本，或者 null 如果 请求不成功或尚未发送。 responseText 属性将在它到达之前得到部分响应 请求完成。如果responseType 设置为除 空的string 或"text"，访问responseText 将抛出 InvalidStateError 异常。

---

您的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，则没有必要。

Answer 2

试试这个方法

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

使用xmlhttp .send(); 方法将request 发送到某个页面

为避免这种warning，请勿在参数中使用false：

async: false

Answer 3

XMLHttpRequest?试试“新”Fetch API。见：Browser Support for Fetch。

好的，IE 不支持。在我的辩护中，IE 11 是唯一支持的 IE 版本，如果他们有 IE 11，他们可能有 Edge。

这是一个非常简单的例子：

fetch("example.com")
.then(
    function(response)
    {
        response.text()
        .then(
            function(result)
            {
                console.log(result);
            }
        );
    }
);

当然，您可以将"example.com" 更改为您的网址。

以下是一个更详细的示例，展示了不同的选项，例如标头、请求方法、重定向、控制凭据（您要发送 cookie 和 http auth 吗？）以及捕获异常。我建议阅读 Using Fetch 上的 MDN 文章了解更多详情。

注意：您可以按预期在 url 中传递 GET 参数。对于 POST 请求，您必须将成员 body 添加到 Request 对象的初始化中。

var headers = new Headers();
headers.append('X-Requested-With', 'XMLHttpRequest'); // #lies
var request = new Request(
    "example.com",
    {
        method: "GET",
        headers: headers,
        mode: 'cors',
        credentials: 'same-origin',
        cache: 'default',
        redirect: 'follow'}
);
fetch(request)
.then(
    function(response)
    {
        // response status
        console.log('ok: ' + response.ok);
        console.log('status: ' + response.status); //e.g: 200
        // response headers
        console.log('X-Header: ' + response.headers.get('X-Header'));
        // response url (redirections)
        console.log(response.url);
        // body as text
        response.text()
        .then(
            function(result)
            {
                console.log(result);
            }
        );
    }
)
.catch(
    function(err)
    {
        console.log(err);
    }
);

注意：在示例中，我使用方法text 来获取响应正文的文本。您也可以使用方法json 来获取正文并直接解析它。还有一个blob 方法，如果响应是多媒体等，它会很有用。