Как использовать AJAX?

Более или менее то, что является AJAX. Однако, еще у меня не остается ясным, как использование этого, и мне хотелось бы учиться использовать это, из-за которого я вижу, что это что-то элементарное в сегодняшний день.

Я искал руководители в Интернете, но в большинстве своем они устаревшие и старые. Мой вопрос: Они могли бы давать мне какой-то пример простого кода, который у них был бы, и как учиться использовать это? Я нуждаюсь в языке стороны сервера как PHP?

16
задан 27.02.2019, 21:03
4 ответа

Кратко

AJAX - техника, чтобы реализовывать запрос в Веб ресурс. Например, читать веб-страницу.

Главное AJAX состоит в том, что он осуществляется асинхронной формы. И она асинхронная в условиях глобального груза страницы, так как он позволяет делать запрос как только страница уже была получена, без необходимости перезагружать ее.

Когда использовать это

  • Обновлять страницу без необходимости перезагружать ее в браузере.
  • Просить данные у сервера (после которого страница была загружена).
  • Получать данные об услуге (после которой страница была бы загружена).
  • Посылать данные в сервер (на втором плане).

Читая твой вопрос, он мне кажется, что ни даже sabés, зачем использовать это еще... Ну, сначала я думаю, что ты был бы должен намереваться о какой информации querés получать Веба, когда уже была загружена страница. И это было бы, например, когда пользователь кликает в каком-то элементе, который искал бы больше информации о другой стороне, или сходно.

Пример Кода

function solicitudAJAX(url){

    //Enviar con AJAX
    var http_request = false;

    //Crear el objeto
    if (window.XMLHttpRequest)
        http_request = new XMLHttpRequest();
    else if (window.ActiveXObject)
        http_request = new ActiveXObject("Microsoft.XMLHTTP"); //para IE6-
    else
        return false; //Error al crear el request

    //asignamos una función que se llamará (asincrónicamente) 
    //  cuando cambie el estado de la petición
    http_request.onreadystatechange = cambiaEstadoDelRequest;

    //hacemos el request
    http_request.open("GET", url, true);
    http_request.send(null);
    return true;
}

function cambiaEstadoDelRequest() {
    if (http_request.readyState == 4) { // 4 significa que terminó
        if (http_request.status == 200) { //200 es la respuesta "OK" del server
            //acá leemos la respuesta (la página devuelta)
            var respuesta = http_request.responseText;

            //Acá el código que parsee a la respuesta <------

        } else {
            //El server tuvo otra respuesta (Por ej: 404 not found)
        }
    }

}

Пример вызова:

solicitudAJAX("http://www.midominio.com/datos.html?buscar=algo");



Я нуждаюсь в языке стороны сервера как PHP?

Нет. Necesitás определять, какой querés делать. Смоги состоять в том, чтобы получать страницу, произведенную с PHP, смоги быть общим HTML, смоги быть WebService, смоги быть любым Веб ресурсом, который приходил в голову бы тебе.


Больше info: MDN> AJAX> Первые Шаги

25
ответ дан 03.12.2019, 20:44
  • 1
    Если только из-за AJAX ты не будешь иметь в виду это – Mariano 21.08.2016, 16:30
  • 2
    Я включать и # 237; в tambi и # 233; n повествовательный fetch API: developer.mozilla.org/es/docs/Web/API/Fetch_API – Jose Hermosilla Rodrigo 21.08.2016, 16:50
  • 3
    Главное AJAX состоит в том, что он позволяет делать просьбы в серверы, не перезагружая ее p и # 225; gina заверши. Просьбы AJAX могут быть экспертом и # 237; ncronas или нет, и у него нет relaci и # 243; n с моментом, в котором делаются просьбы. – José M. Carnero 15.09.2016, 11:19
  • 4
    @Jos и # 233; M.Carnero Es asincr и # 243; nico в t и # 233; rminos глобального груза ее p и # 225; gina (независимо, если JS зависит от ответа одного async: false, который может считаться устаревшим). А именно, asincr и # 243; nico значь то же самое что marc и # 225; s как главная точка. Тем не менее, edit и # 233; ответ, чтобы помещать м и # 225; s expl и # 237; я назначаю встречу. – Mariano 17.09.2016, 20:30

У меня есть немного основной пример AJAX. Ты должен использовать PHP стороны сервера и jQuery в клиенте (bootstrap для рисунка).

Введи код на твоем сервере PHP и назови это, как "ajaxSleep.php", он возвратит тебе переменные, которые ты пошлешь ему из-за AJAX с клиента.

<?php
    $nombre = $_POST["nombre"];
    $apellido = $_POST["apellido"];
    $telefono = $_POST["telefono"];
    sleep(4);//simulamos tiempo de espera de algunos segundos
    echo ("Tus datos: " . $nombre . " - " .     $apellido . " - " . $telefono);
?> 

Это код, который осуществляет AJAX jQuery, назови это, как сочти подходящим, и сохраняй это рядом с "ajaxSleep.php":

<html>
<body>

    <div class="container">
        <h2>Modal Example</h2>

        <div class="jumbotron">
            <h1>Hello, world!</h1>
            <p id="lblDatos">......</p>
            <button id="btnModal" class="btn btn-primary">Abrir modal</button>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <!-- Modal contenido-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <label for="txtNombre">Nombre: </label>
                        <input type="text" class="form-control" id="txtNombre"/>

                        <label for="txtApellido">Apellido:</label>
                        <input type="text" class="form-control" id="txtApellido"/>

                        <label for="txtTelefono">Telefono:</label>
                        <input type="text" class="form-control" id="txtTelefono"/>
                    </div>
                    <div class="modal-footer">                            
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-success" id="btnGuardar">Guardar</button>
                        <img src="img/cargandoPaginaWeb.gif" class="img-rounded" height="30px" width="30px" id="imgLoad" style="display:none">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--haca todos los script-->
    <!--Siempre debe ir jQuery primero q bootstrap-->
    <script src="js/jquery-3.1.0.js"></script>  
    <script src="js/bootstrap.js"></script>        
    <script type="text/javascript">  
        $(document).ready(function() { 
            $('#btnModal').click(function(event){
                clearModal();
                $('#myModal').modal('show');                
            }); 
            $('#btnGuardar').click(function(event){                    
                var n= $('#txtNombre').val();
                var a = $('#txtApellido').val();
                var t = $('#txtTelefono').val();
                $.ajax({
                    type: "POST",
                    data: {"nombre" : n, "apellido" : a, "telefono" : t},
                    url: "ajaxSleep.php",
                    beforeSend: function () {
                        $('#imgLoad').show();
                    },
                    success: function(response) { 
                        $('#lblDatos').text(response);                           
                    },
                    error: function(jqXHR, textStatus, errorThrown){
                        //if(textStatus === 'timeout'){alert('Failed from timeout');}   
                        if (jqXHR.status === 0) {alert('Not connect: Verify Network: ' + textStatus);}
                        else if (jqXHR.status == 404) {alert('Requested page not found [404]');} 
                        else if (jqXHR.status == 500) {alert('Internal Server Error [500].');}
                        else if (textStatus === 'parsererror') {alert('Requested JSON parse failed.');}
                        else if (textStatus === 'timeout') {alert('Time out error.');} 
                        else if (textStatus === 'abort') {alert('Ajax request aborted.');} 
                        else {alert('Uncaught Error: ' + jqXHR.responseText);}
                    },
                    timeout: 5000
                    //timeout: 1000//para probar timeout
                }).always(function(){
                    $('#imgLoad').hide();
                    $('#myModal').modal('toggle');//Verificar uso 
                    clearModal();
                });
                event.preventDefault();
            });  
            function clearModal(){
                //Limpio las cajas de texto del modal
                $('.modal-body input').val('');
            }    
        });            
    </script>

</body>
</html>

Помни что добавь .css bootstrap 3 и .js bootstrap 3 и jQuery 3

Прикрепи все на сервере PHP 5.6 или больше. Параметры путешествуют с формуляра до сервера путь AJAX, и PHP берется за то, чтобы возвращать ту же стоимость.

6
ответ дан 03.12.2019, 20:44

Из-за того, что держится немного в dГ - в, с тех пор, как ES6 llegГі по отношению к нашим жизням (хотя он кажется что многие вы resistГ-s) мы считаем доступной API fetch , чтобы облегчать нам делать вызовы AJAX.

Пример

fetch('https://somedomine.com/some/url', {
    method: 'get'
}).then(response => {
  // Response :)
}).catch(err => {
  // Error :(
})

оставил Вам какие-то интересные ссылки:

6
ответ дан 03.12.2019, 20:44

В JQuery у тебя есть хороший материал, чтобы использовать ajax: https://learn.jquery.com/ajax/jquery-ajax-methods /

JQuery - великолепный книжный магазин функций javascript, для которых мы неопределены и идем поспешно.

0
ответ дан 03.12.2019, 20:44
  • 1
    Quiz и # 225; s быть и # 237; в хороший добавлять c и # 243; я говорю, что он показал c и # 243; mo реализовывать запрос ген и # 233; богатая с jQuery – Mariano 26.08.2016, 14:12
  • 2
    У тебя есть много info на странице ссылки, и в связанных других, как и #233; sta: learn.jquery.com/ajax – Guillermo 30.08.2016, 14:53
  • 3
    Прямо здесь у тебя есть какой-то info на jquery+ajax: es.stackoverflow.com/… – Guillermo 30.08.2016, 15:00
  • 4
    Рекомендуемое я верю в то, что быть и # 237; в издавать ответ добавляя пример. Ссылки могут не быть доступны, и формат, который мы продолжаем, состоит в том, чтобы помещать ответы ac и # 225; (по крайней мере с иллюстративным примером, который может быть дополненным ссылкой) – Mariano 30.08.2016, 15:04