Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/03/2016, 12:53
Keysersozer
 
Fecha de Ingreso: febrero-2016
Mensajes: 17
Antigüedad: 8 años, 2 meses
Puntos: 0
Modernizar código AJAX

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:
Ver original
  1. <form action="" class="formulario" name="formulario_registro" method="post" onsubmit="enviarComentario(); return false">
  2.      <div class="input-group">
  3.     <textarea class="form-control" id="textarea" name="text" rows="3"></textarea>
  4.     </div>
  5.      <input type="submit" id="btn-submit" class="btn btn-primary" value="Comentar"  name="comenta">
  6. </form>

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

Código Javascript:
Ver original
  1. <script>
  2. function objetoAjax(){
  3.     var xmlhttp=false;
  4.     try {
  5.         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  6.     } catch (e) {
  7.  
  8.     try {
  9.         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  10.     } catch (E) {
  11.         xmlhttp = false;
  12.     }
  13. }
  14.  
  15. if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  16.       xmlhttp = new XMLHttpRequest();
  17.     }
  18.     return xmlhttp;
  19. }
  20.  
  21. //Función para recoger los datos del formulario y enviarlos por post  
  22. function enviarComentario(){
  23.  
  24.   //div donde se mostrará lo resultados
  25.   divResultado = document.getElementById('comments');
  26.   //recogemos los valores de los inputs
  27.   text=document.formulario_registro.text.value;
  28.   var id = "<?php echo $_GET['id']; ?>" ;
  29.   var usu = "<?php echo $_SESSION['userid']; ?>" ;
  30.   var nombre = "<?php echo $_SESSION['name']; ?>" ;
  31.  
  32.   //instanciamos el objetoAjax
  33.   ajax=objetoAjax();
  34.  
  35.   //uso del metodo POST
  36.   //archivo que realizará la operacion de inserción en BBDD
  37.   //inscom.php
  38.   ajax.open("POST", "inscom.php",true);
  39.   //cuando el objeto XMLHttpRequest cambia de estado, la función se inicia
  40.   ajax.onreadystatechange=function() {
  41.       //la función responseText tiene todos los datos pedidos al servidor
  42.     if (ajax.readyState==4) {
  43.         //mostrar resultados en esta capa
  44.         divResultado.innerHTML = ajax.responseText
  45.         //llamar a funcion para limpiar los inputs
  46.         LimpiarCampos();
  47.     }
  48.  }
  49.     ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  50.     //enviando los valores a registro.php para que inserte los datos
  51.     ajax.send("id="+id+"&login="+usu+"&nombre="+nombre+"&text="+text)
  52. }
  53.  
  54. //función para limpiar los campos
  55. function LimpiarCampos(){
  56.   document.formulario_registro.text.value="";
  57.   document.formulario_registro.text.focus();
  58. }
  59.  
  60. </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.