Как выразить вызов jquery ajax только с помощью javascript?

ProgramBox

Как выразить вызов jquery ajax только с помощью javascript?

Post author:admin
Запись опубликована:23 августа, 2022
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

Можете ли вы помочь мне преобразовать этот jquery в javascript? Спасибо.

     <script>
        $(document).ready(function() {
            $("a.false").click(function(e) {
                $(this).closest("tr.hide").hide("slow");
                var main_id = this.title;
                var display = "false";
                e.preventDefault();
                $.ajax({
                    url: "/useradminpage",
                    data: {main_id: main_id, display: display},
                    success: function(data) {
                    //display_false();
                    }
                });
            });
        });
    </script>

1. jQuery — это JavaScript. Вы можете прочитать его исходный код, если хотите извлечь определенные биты для использования, не загружая всю библиотеку.

2. Какое значение это дает вам, чтобы не использовать jQuery?? jQuery — это JavaScript , который делает ваш код намного проще для чтения, более удобным для обслуживания, кроссбраузерным… в целом, меньше проблем при написании определенных сценариев и меньше ошибок.

3. @Juri правда? «легче читать и более удобен в обслуживании». Действительно ли мой пример сложнее читать?

4. @Raynos Это — не то чтобы это плохо написанный пример — но jQuery [при правильном использовании], как и любая высокоуровневая абстракция, может сделать код «проще и удобнее в обслуживании» 😉 [jQuery — или другие подобные библиотеки — также заботятся о ряде особенностей браузера, включая даже такие тривиальные, как addEventListener vs attachEvent .]

5. @Raynos Я бы сказал: да :). Проблема в основном в том, что если у вас хороший программист на JavaScript, он также кодирует без jQuery и может быть продуктивным и писать хороший код. Но если вы возьмете среднего программиста, он совершит гораздо больше ошибок, напишет более уродливый, менее обслуживаемый, ужасающий код и, вероятно, потребуется намного больше времени. С другой стороны, jQuery обеспечит ему более высокую абстракцию, ему придется писать меньше кода (следовательно, совершать меньше ошибок), и в результате код станет более удобным для обслуживания и чтения 🙂

Ответ №1:

Да, вы можете, но вам придется изучить ES5, DOM4 и XHR2.

 // Create the toArray utility
var toArray = function (obj) {
    var arr = [];
    for (var i = 0, len = obj.length; i < len; i  ) {
        arr[i] = obj[i];    
    }
    return arr;
};

Вам нужна toArray утилита для управления NodeList и HTMLCollection.

 var as = toArray(document.getElementsByClassName("false")).filter(function (el) {
    return el.tagName === "A";
});

Здесь вам нужно получить все class='false' элементы, а затем отфильтровать их по тому, являются ли они <a> элементами.

 as.forEach(function (el) {
    var parentTr = el.parentNode;
    do {
        if (parentTr.tagName === "TR" amp;amp; parentTr.classList.contains("hide")) {
            return; 
        }
        parentTr = parentTr.parentNode;
    } while (parentTr !== null);

Для каждого элемента вы хотите найти родительский <tr> элемент. Вы делаете это, зацикливая цепочку родительских узлов, как показано. Вам также необходимо parentTr === null более элегантно обработать случай

     el.addEventListener("click", function (ev) {
        // Make a CSS3 animation class
        parentTr.classList.add("hide-slow");
        var main_id = this.title;
        var display = "false";

Прикрепите обработчик щелчков. Измените анимацию скрытия jQuery, чтобы она выполнялась с помощью аппаратно-ускоренного CSS3

         var xhr = new XMLHttpRequest();
        xhr.open("GET", "/useradminpage");
        xhr.addEventListener("readystatechange", function (ev) {
            if (xhr.readyState === XMLHTTPRequest.DONE) {
                // display_false();   
            } 
        });
        xhr.send({
            main_id: main_id,
            display: display 
        });

Откройте запрос XHR2. Укажите его на свой URL-адрес с помощью метода GET. Затем присоедините прослушиватель readystatechange и, наконец, отправьте данные по запросу.

     }); 
});

Отказ от ответственности: поддержка браузера — это боль. Вам понадобятся следующие прокладки

ES5-shim
DOM-shim
XHR2 shim не существует. Я напишу его в какой-то момент.

Дальнейшее чтение:

Интерфейсы, которые я использовал, следующие

Вам также следует ознакомиться с ES5.1

1. Некоторые новые браузеры поддерживают document. querySelectorAll .

2. @pst да, но вы должны использовать QSA только тогда, когда вам это нужно, а не тогда, когда вы ленивы.

3. @Raynos Я использую библиотеки, потому что я ленив. Мне все равно, что использует библиотека, пока она «просто работает» 🙂 Просто указываю на это, в основном потому, что я только что узнал об этом неделю назад…

4. @pst Мне нравится ручная оптимизация! Я также не знаю, следует ли мне использовать QSA для QSA («tag.class «)

Метки: Как выразить вызов jquery ajax только с помощью javascript?