Home / Questions / 21182
Accepted
Hoose
Asked: 2020-08-21 17:28:37 +0800 CST 2020-08-21 17:28:37 +0800 CST

Как использовать АЯКС?

  • 772

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

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

javascript

5 Answers

  1. Best Answer

    Кратко

    AJAX — это метод выполнения запроса к веб-ресурсу. Например, чтение веб-страницы.

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

    когда его использовать

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

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

    Пример кода

    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?

    Нет. Вам нужно определить, что вы хотите делать. Это может быть страница, сгенерированная с помощью PHP, это может быть обычный HTML, это может быть WebService, это может быть любой веб-ресурс, о котором вы только можете подумать.

    Дополнительная информация: MDN > AJAX > Начало работы

    • 25

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

    Вставьте код на свой 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>

    Не забудьте добавить bootstrap 3 .css и bootstrap 3 и jQuery 3 .js

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

    • 6

  3. Чтобы держать нас в курсе, с тех пор, как ES6 вошел в нашу жизнь (хотя кажется, что многие из вас сопротивляются), у нас есть API-интерфейс fetch , который упрощает нам выполнение вызовов AJAX.

    Пример

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

    Вот несколько интересных ссылок:

    • 6

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

    JQuery — отличная библиотека функций javascript для тех из нас, кто ленив и спешит.

    • 0

  5. С JQuery я посылаю вам пример, который я очень часто использую для использования ajax, я использую его для извлечения данных в формате Json.

        $(document).ready(function () {

var config = {
    url: '../../aplicacion/crud/index.php',
    variables: 'tabla'
};
var fuentedata = sendData(config);
 function  sendData(config)
 {//json captura
 var json = null;
 $.ajax({
    'type': "POST",
    'data': config,
    'async': false,
    'global': false,
    'url': '' + config.url,
    'dataType': "json"
    , 'beforeSend': function (data)
    {
       // console.log('... cargando...');
    }
    , 'error': function (data) {
        //si hay un error mostramos un mensaje
        console.log('Tenemos problemas Houston ' + data);
    },
    'success': function (data) {
        json = data;
    }
    });
    return json;
}

});

    Я надеюсь быть полезным.

    • -3