XMLHttpRequest не работает в WordPress

Question

Я пытаюсь отправить переменную на сервер, используя XMLHttpRequest.

Я протестировал его на локальном компьютере, отличном от Wordpress, и он работает. Но на производстве, в моем файле Wordpress, состояние AJAX onreadystatechange не достигает 200.

Есть ли что-то, что мне нужно знать при запросе XMLHttp в Wordpress?

У меня есть следующий код для отправки данных на сервер с использованием XMLHTTP-запроса, но он не работает, я не знаю почему? Я получаю следующую ошибку:

VM704: 1 POST http://localhost/amt/wp-admin/admin-ajax.php 400 (неверный запрос)

вот мой код WordPress:

add_action('wp_ajax_csv_file', 'csv_file');

add_action('wp_ajax_nopriv_csv_file', 'csv_file');

function csv_file()
{
if($_POST['rtype'] == 'enr_data'){
        set_time_limit(0);
        ob_implicit_flush(true);
        ob_end_flush();

        for ($i = 0; $i < 10; $i++) {
            //Hard work!!
            sleep(1);
            $p = ($i + 1) * 10; //Progress
            $response = array('message' => $p . '% complete. server time: ' . date("h:i:s", time()),
                'progress' => $p);

            echo json_encode($response);
        }

        sleep(1);
        $response = array('message' => 'Complete',
            'progress' => 100);

        echo json_encode($response);

        die();
        }
}

function ajax_stream() {
            if (!window.XMLHttpRequest) {
                alert("Your browser does not support the native XMLHttpRequest object.");
                return;
            }
            try {
                var xhr = new XMLHttpRequest();
                xhr.previous_text = '';
                xhr.responseType = "text";

                xhr.onerror = function() {
                    alert("[XHR] Fatal Error.");
                };
                xhr.onreadystatechange = function() {
                    try {
                        if (xhr.readyState == 4) {
                            alert('[XHR] Done')
                        } else if (xhr.readyState > 2) {
                            var new_response = xhr.responseText.substring(xhr.previous_text.length);
                            var result = JSON.parse(new_response);

                            document.getElementById("divProgress").innerHTML += result.message + '<br />';
                            document.getElementById('progressor').style.width = result.progress + "%";

                            xhr.previous_text = xhr.responseText;
                        }
                    } catch (e) {
                        alert("[XHR STATECHANGE] Exception: " + e);
                    }
                };
                var data = "action=csv_file&rtype=enr_data";
                xhr.open("POST", ajaxurl, true);
                xhr.send(data);
                console.log(xhr);
            } catch (e) {
                alert("[XHR REQUEST] Exception: " + e);
            }
        }

#divProgress {
            border: 2px solid #ddd;
            padding: 10px;
            width: 300px;
            height: 265px;
            margin-top: 10px;
            overflow: auto;
            background: #f5f5f5;
        }
        
        #progress_wrapper {
            border: 2px solid #ddd;
            width: 321px;
            height: 20px;
            overflow: auto;
            background: #f5f5f5;
            margin-top: 10px;
        }
        
        #progressor {
            background: #07c;
            width: 0%;
            height: 100%;
            -webkit-transition: all 1s linear;
            -moz-transition: all 1s linear;
            -o-transition: all 1s linear;
            transition: all 1s linear;
        }
        
        .demo_container {
            width: 680px;
            margin: 0 auto;
            padding: 30px;
            background: #FFF;
            margin-top: 50px;
        }
        
        .my-btn,
        .my-btn2 {
            width: 297px;
            margin-top: 22px;
            float: none;
            display: block;
        }
        
        h1 {
            font-size: 22px;
            margin-bottom: 20px;
        }
        
        .float_left {
            float: left;
        }
        
        .float_right {
            float: right;
        }
        
        .demo_container::after {
            content: "";
            clear: both;
            display: block;
        }
        
        .ghost-btn.active {
            border: 2px solid #D23725;
            color: #D23725;
        }
        
        .ghost-btn {
            display: inline-block;
            text-decoration: none;
            border: 2px solid #3b8dbd;
            line-height: 15px;
            color: #3b8dbd;
            -webkit-border-radius: 3px;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 3px;
            -moz-background-clip: padding;
            border-radius: 3px;
            background-clip: padding-box;
            font-size: 15px;
            padding: .6em 1.5em;
            -webkit-transition: all 0.2s ease-out;
            -moz-transition: all 0.2s ease-out;
            -o-transition: all 0.2s ease-out;
            transition: all 0.2s ease-out;
            background: #ffffff;
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            cursor: pointer;
            zoom: 1;
            -webkit-backface-visibility: hidden;
            position: relative;
            margin-right: 10px;
        }
        
        .ghost-btn:hover {
            -webkit-transition: 0.2s ease;
            -moz-transition: 0.2s ease;
            -o-transition: 0.2s ease;
            transition: 0.2s ease;
            background-color: #3b8dbd;
            color: #ffffff;
        }
        
        .ghost-btn:focus {
            outline: none;
        }
        
        .ghost-btn.active {
            border: 2px solid #D23725;
            color: #D23725;
        }
        
        .ghost-btn.active:hover {
            border: 2px solid #D23725;
            background: #FFF;
        }
        
        .method_wrappers {
            margin-bottom: 20px;
        }

<div class="demo_container">
        <div class='method_wrappers'>
            <a class='ghost-btn active' href='#'>XHR Method</a>
            <a class='ghost-btn' href='../example2/index.html'>Iframe Method</a>
        </div>
        <h1>AJAX progress bar for PHP script without polling (XHR method)</h1>
        <div class='float_left'>
            <h3>Progress Bar</h3>
            <div id='progress_wrapper'>
                <div id="progressor"></div>
            </div>
            <a onclick="ajax_stream();" class='my-btn'>Start Ajax Streaming</a>
        </div>
        <div class='float_right'>
            <h3>Log</h3>
            <div id="divProgress"></div>
        </div>
    </div>

Answer 1

При использовании XHR вместо запроса jQuery / AJAX я обнаружил, что на самом деле проще и надежнее добавить action к ajaxurl.

var xhr = new XMLHttpRequest();
var url = ajaxurl + '?action=csv_file';

xhr.open( 'POST', url, true );

Метод передачи данных в запрос немного отличается, но в 95% случаев я использую простой объект для запроса строковой функции:

// Convert an Object into a Query String
function objectToQueryString(obj){
    return Object.keys(obj).map(key => key + '=' + obj[key]).join('&');
}

Который на практике превратит простой объект данных

var data = {
    'post_id': ajax_object.post_id,
    'rtype': 'enr_data',
    'field': element.getAttribute('data-field'),
};

в простую строку запроса:

post_id=1234&rtype=enr_data&field=bar

Это позволяет мне передавать данные в виде строки, отправленной в целевую функцию:

var dataString = objectToQueryString( data );
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(dataString);

Для более крупных или более сложных задач вы можете фактически эффективно обернуть все это в Promise , что я сделаю, если, например, мне нужно загрузить несколько файлов и передать их вместе с одним по одному для изменения размера.