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

Posted 2023-02-24

【中文标题】在 ajax 中调用 PHP 函数，不推荐使用同步 XMLHttpRequest

【英文标题】：Call PHP function in ajax, Synchronous XMLHttpRequest deprecarted

【发布时间】：2018-04-29 12:44:18

【问题描述】：

对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>";

【问题讨论】：

@DannyFardyJhonstonBermúdez 我把它改成了 true ，没有错误，但我的数据仍然没有显示

我在回答中添加了一些细节。

@born2gamble 您的数据没有显示，因为您没有显示任何数据。你的xmlhttp.onreadystatechange 或xmlhttp.onload 呢？你的 PHP 脚本在哪里输出任何信息？

【参考方案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，则没有必要。

【讨论】：

谢谢，我稍后会尝试实现这个，我 9 个月的老人醒了：/

没问题@born2gamble。如果您需要更多示例，请告诉我。

@born2gamble 你可以看到这个链接：***.com/questions/16707648/…。

这行得通，它显示在控制台上！..我有一个 div id，我试图将其显示到..我将如何使用这种方法？

非常感谢！ ，并感谢您提供指向 $.ajax 版本的链接。我将开始剖析这一切。非常感谢。

【参考方案2】：

试试这个方法

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

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

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

async: false

【讨论】：

通过async:true 而不是false

我尝试输入“true”，错误消失，但页面为空白。

所以你的 php 代码中有些错误，或者你没有任何打印或从 php 返回

【参考方案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 方法，如果响应是多媒体等，它会很有用。

【讨论】：

谢谢你，等我完全理解第一种方法后，我会试试这个。当我阅读有关它的教程/视频时，我在修改代码时更容易学习。

@born2gamble 我发现了一个可以（大部分）在 IE 中工作的 polyfill：window.fetch polyfill。它使用XMLHttpRequest internally，也可以作为案例研究。

谢谢，我会尽快深入检查一下?