在客户端服务器通信中是否有 XMLHttpRequest 的替代方案答案

【问题标题】：Is there any alternatives for XMLHttpRequest in client server communication在客户端服务器通信中是否有 XMLHttpRequest 的替代方案
【发布时间】：2021-12-24 02:25:37
【问题描述】：

我有一个 XMLHttpRequest 来与服务器端 .php 文件 (clientserver.php) 进行通信。请求是这样的，

    tablink = tab.url;
    $("#p1").text("Selected URL - "+tablink);
    var xhr=new XMLHttpRequest();
    params="url="+tablink;
    // alert(params);
    var markup = "url="+tablink+"&html="+document.documentElement.innerHTML;
    xhr.open("POST","http://localhost/WebExt/clientServer.php",false);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(params);
    //alert(xhr.responseText);
    $("#div1").text(xhr.responseText);
    return xhr.responseText;

clientserver.php 包含，

<?php
header("Access-Control-Allow-Origin: *");
$site=$_POST['url'];
$decision=exec("python test.py $site 2>&1");
echo $decision;
?>

当我执行上面的代码时，它会显示类似的错误

主线程上的同步 XMLHttpRequest 已被弃用，因为它对最终用户的体验产生不利影响

如何解决？是否有任何替代代码（如 fetch API）来完成此任务（XMLHttpRequest）？

【问题讨论】：

“还有其他选择吗...？” - 是的。它已经在您的问题中：Fetch API
错误消息只是告诉您同步请求已被弃用 - 因此您不一定需要将整个方法切换到其他方法，而只需使请求异步反而。通过将false 作为open 方法的第三个参数传递，您明确指定需要同步请求。
From the document by mozilla 只需从request.open() 中删除false。

标签： javascript php xmlhttprequest fetch-api web-development-server

【解决方案1】：

worker 之外的同步 XMLHttpRequest 正在处理中被从网络平台上删除，因为它有不利影响最终用户的体验。（这是一个漫长的过程，需要很多年。）开发人员不得为 async 参数传递 false 时当前全局对象是一个 Window 对象。用户代理非常强大鼓励在开发人员工具中警告此类使用，并可能尝试抛出“InvalidAccessError”DOMException 发生。

https://xhr.spec.whatwg.org/

如果您希望在 XMLHttpRequest 之后有一些任务要做，那么请改用Promise，因为将来会删除同步 XMLHttpRequest。

这是一个例子（test02.php）：

<?php
$requestType = ($_GET['requestType'] ?? null);

if (isset($requestType) && $requestType === 'ajax') {
    sleep(1);
    echo 'hello';
    exit();
}
?>

<div id="response" style="border: 4px dashed #ccc;"></div>

<script>
    function ajaxRequest() {
        let promiseObj = new Promise(function(resolve, reject) {
            var xhr=new XMLHttpRequest();

            xhr.addEventListener('abort', (event) => {
                reject({'response': '', 'status': (event.currentTarget ? event.currentTarget.status : 'abort'), 'event': event});
            });
            xhr.addEventListener('error', function(event) {
                reject({'response': '', 'status': (event.currentTarget ? event.currentTarget.status : ''), 'event': event});
            });
            xhr.addEventListener('timeout', (event) => {
                reject({'response': '', 'status': (event.currentTarget ? event.currentTarget.status : 'timeout'), 'event': event});
            });
            xhr.addEventListener('load', function(event) {
                let response = (event.currentTarget ? event.currentTarget.response : '');

                if (event.currentTarget && event.currentTarget.status >= 200 && event.currentTarget.status < 300) {
                    resolve({'response': response, 'status': event.currentTarget.status, 'event': event});
                } else if (event.currentTarget && event.currentTarget.status >= 400 && event.currentTarget.status < 600) {
                    reject({'response': response, 'status': event.currentTarget.status, 'event': event});
                } else {
                    reject({'response': response, 'status': event.currentTarget.status, 'event': event});
                }
            });

            xhr.open("POST","test02.php?requestType=ajax");// use your URL.
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            // add your xhr options here.
            xhr.send();
        });

    return promiseObj;
    }
    ajaxRequest()
    .then((response) => {
        let responseElement = document.getElementById('response');
        responseElement.insertAdjacentHTML('beforeend', response.response + '<br>');
        responseElement.insertAdjacentHTML('beforeend', 'hi');
    });
</script>

此异步请求不会冻结用户的网络浏览器，此后的任务仍可作为then() 的队列正常工作。

【讨论】：