Modernizar código AJAX

[Keysersozer]

Buenas,

Me he encontrado este código con el fin de implementar un sistema de comentarios. El formulario "formulario_registro" está compuesto únicamente por un textarea "text" y un botón de submit que lleva a esta función mediante el evento onsubmit:

Código HTML:

<form action="" class="formulario" name="formulario_registro" method="post" onsubmit="enviarComentario(); return false">
     <div class="input-group">
    <textarea class="form-control" id="textarea" name="text" rows="3"></textarea>
    </div>
     <input type="submit" id="btn-submit" class="btn btn-primary" value="Comentar"  name="comenta">
</form>
 

El código JS en cuestión es este:

Código Javascript:

<script>
function objetoAjax(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
 
    try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
        xmlhttp = false;
    }
}
 
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
      xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
 
//Función para recoger los datos del formulario y enviarlos por post  
function enviarComentario(){
 
  //div donde se mostrará lo resultados
  divResultado = document.getElementById('comments');
  //recogemos los valores de los inputs
  text=document.formulario_registro.text.value;
  var id = "<?php echo $_GET['id']; ?>" ;
  var usu = "<?php echo $_SESSION['userid']; ?>" ;
  var nombre = "<?php echo $_SESSION['name']; ?>" ;
 
  //instanciamos el objetoAjax
  ajax=objetoAjax();
 
  //uso del metodo POST
  //archivo que realizará la operacion de inserción en BBDD
  //inscom.php
  ajax.open("POST", "inscom.php",true);
  //cuando el objeto XMLHttpRequest cambia de estado, la función se inicia
  ajax.onreadystatechange=function() {
      //la función responseText tiene todos los datos pedidos al servidor
    if (ajax.readyState==4) {
        //mostrar resultados en esta capa
        divResultado.innerHTML = ajax.responseText
        //llamar a funcion para limpiar los inputs
        LimpiarCampos();
    }
 }
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //enviando los valores a registro.php para que inserte los datos
    ajax.send("id="+id+"&login="+usu+"&nombre="+nombre+"&text="+text)
}
 
//función para limpiar los campos
function LimpiarCampos(){
  document.formulario_registro.text.value="";
  document.formulario_registro.text.focus();
}
 
</script>
 

Este código es del 2010 y me gustaría saber como se podría implementar el código anterior con la función $.ajax de jQuery o si existe una manera más moderna de hacerlo.

Muchas gracias de antemano.

[Keysersozer]

Actualizo:

He realizado este código pero no me funciona...

Código Javascript:

<script>
 
//Función para recoger los datos del formulario y enviarlos por post  
function enviarComentario(){
 
  //div donde se mostrará lo resultados
  divResultado = document.getElementById('comments');
  //recogemos los valores de los inputs
  text=document.formulario_registro.text.value;
  var id = "<?php echo $_GET['id']; ?>" ;
  var usu = "<?php echo $_SESSION['userid']; ?>" ;
  var nombre = "<?php echo $_SESSION['name']; ?>" ;
 
  //instanciamos el objetoAjax
  
 $.ajax({
  method: "POST",
  url: "inscom.php",
  data: { id: id, login:usu, nombre:nombre , text:text },
  dataType: "html"
})
  .done(function( msg ) {
    $("#comments").html(msg);
    LimpiarCampos();
  });
  
  
 
//función para limpiar los campos
function LimpiarCampos(){
  document.formulario_registro.text.value="";
  document.formulario_registro.text.focus();
}
 
</script>
 

El contenido de inscom.php es el siguiente:

Código PHP:

<?php
   session_start();
   
  $id=$_POST['id'];
  $usu=$_POST['login'];
  $nombre=$_POST['nombre'];
  $text=$_POST['text'];
 
   
   try{ //Intenta conectar con la base de datos y si no lo consigues captura el objeto del error (catch) y haz lo que yo te diga
    
    $base= new PDO('mysql:host=localhost; dbname=pelipedia','root','');
    
    $base->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
    
    $base->exec("SET CHARACTER SET utf8");
    
    $sql="INSERT INTO comentarios (idusu, idpag, nombreusu, coment) VALUES (:idusu,:id,:nom,:coment)"; 
    
    $resultado=$base->prepare($sql); 
    
    $resultado->execute(array(":idusu"=>$usu,":id"=>$id,":nom"=>$nombre,":coment"=>$text));
    
    $resultado->closeCursor(); //Cierra cursor
    
    }catch(Exception $e){
        
        die("Error: " . $e->getMessage() . "<br>Código del error: " . $e->getCode() . "<br>Línea: " . $e->getLine()); //Matar proceso y sacar este mensaje (mensaje del objeto error
        
    }finally{ //Tanto si tiene un error como si no ejecuta esto
        
        $base=null; //Vaciamos la memoria   
    }
   
include('consulta.php');
 
?>
 

Y el de consulta.php ...

Código PHP:

<?php
    
     try{ 
    
        $base= new PDO('mysql:host=localhost; dbname=pelipedia','root','');
    $base->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
    $base->exec("SET CHARACTER SET utf8");
    $sql="SELECT * FROM comentarios WHERE idpag = :id"; // :n_art Marcador
    $resultado=$base->prepare($sql); 
    $resultado->execute(array(":id"=>$id));
 
    while($registro=$resultado->fetch(PDO::FETCH_ASSOC)){
        echo "<div id='comtot'> "; 
    echo "<p><strong>" . $registro['nombreusu'] . " dice: </strong></p><br>";
    echo "<p>" . $registro['coment'] . "";
    echo "</div>";
    }
    
    $resultado->closeCursor(); //Cierra cursor
    
    }catch(Exception $e){
        
        die("Error: " . $e->getMessage() . "<br>Código del error: " . $e->getCode() . "<br>Línea: " . $e->getLine()); //Matar proceso y sacar este mensaje (mensaje del objeto error
        
    }finally{ //Tanto si tiene un error como si no ejecuta esto
        
        $base=null; //Vaciamos la memoria
        
    }
?>
 

Con el código obsoleto me funcionaba bien.

[caricatos]

Hola:

Parece que lo que tienes es correcto... no entiendo querer cargar una librería que sin duda ralentizaría algo el tiempo de carga de la página en muchos casos (no todos tienen fibra óptica ni 4G)

Saludos

[Alexis88]

Utilizar una librería no es sinónimo de "modernizar" un algoritmo. Si realmente quieres hacerlo de una forma acorde a los tiempos actuales, utiliza promesas.