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

如何使用 AJAX？

  • 772

我或多或少知道 AJAX 是什么。但是，我仍然不清楚如何使用它，我想学习如何使用它，因为我看到它今天是初级的东西。

我在互联网上搜索过教程，但它们大多过时且陈旧。我的问题是：您能给我一些您拥有的简单代码示例以及如何学习如何使用它吗？我需要像 PHP 这样的服务器端语言吗？

javascript

5 Answers

  1. Best Answer

    简要地

    AJAX 是一种向 Web 资源发出请求的技术。例如，阅读网页。

    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，可以是您能想到的任何 Web 资源。

    更多信息：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);
?>

    这是实现 jQuery 的 AJAX 的代码，将其命名为您认为合适的名称，并将其保存在“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进入我们的生活（尽管你们中的许多人似乎反对）我们已经提供了fetch API来使我们更容易进行 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