Javascript Ajax Object


/ Published in: JavaScript
Save to your folder(s)

El modo de uso es el siguiente:
function cargarContenido()
{
var p = new Request("prueba2.asp",respuesta);
p.setMethod("GET");
p.addParam("saludo",$("txtSaludo").value);
p.addParam("telefono",$("txtTelefono").value);
p.callRequest();
}
function respuesta(texto, id)
{
/*Utilizando JSON*/
var resultados = eval(texto)
document.getElementById("saludo").textContent = resultados.saludo;
document.getElementById("telefono").textContent = resultados.telefono;
}

function $(id)
{
return document.getElementById(id);
}


Copy this code and paste it in your HTML
  1. /**
  2. *Clase que implementa una llamada mediante AJAX, a travez de los metodos Get y Post
  3. *Metodo Constructor
  4. *@version beta
  5. *@copyright Enzo lepe
  6. *@author Enzo Lepe
  7. *@param String - direccion : Contiene la URL de la pagina que será llamada
  8. *@param String - callback : Contiene el nombre de la funcion que recibira la respuesta a la peticion
  9. *@link http://www.cristalab.com/tutoriales/178/precarga-preloader--en-ajax
  10. */
  11. var Request = function(direccion, funcion){
  12. this.ajax = this.createXMLHttpRequest();
  13. this.async = true;
  14. this.Method = "GET";
  15. this.callback = funcion;
  16. this.Id = "";
  17. this.direccion = direccion;
  18. this.parametros = "";
  19. this.countParametros = 0;
  20. }
  21. /**
  22. *Metodo que crea el objeto XMLHttpRequest, con el cual se realizan las llamadas
  23. *@return XMLHttpRequest object;
  24. */
  25. Request.prototype.createXMLHttpRequest = function(){
  26. var xmlhttp = false;
  27. try
  28. {xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}
  29. catch (e)
  30. {
  31. try
  32. {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
  33. catch (E)
  34. {xmlhttp = false;}
  35. }
  36.  
  37. if(!xmlhttp && typeof XMLHttpRequest!='undefined')
  38. {xmlhttp = new XMLHttpRequest();}
  39. return xmlhttp;
  40. }
  41. /**
  42. *Metodo que setea el sincronismo de la peticion
  43. *@param Bool - Value : Contiene el sincronismo de la peticion true, es asincronico, false sincronico
  44. */
  45. Request.prototype.setAsync = function(value){
  46. this.async = value;
  47. }
  48. /**
  49. *Metodo que entrega el valor de async
  50. *@return Bool: true, en caso de ser asincrono, false en caso de ser sincrono
  51. */
  52. Request.prototype.getAsync = function(){
  53. return this.async;
  54. }
  55. /**
  56. *Metodo que setea el metodo que es utilizado para hacer la peticion
  57. *@param String - value: Contiene el nombre del metodo puede ser GET o POST
  58. */
  59. Request.prototype.setMethod = function(value){
  60. this.Method = value;
  61. }
  62. /**
  63. *Metodo que porporciona el nombre del metodo que es utilizado para hacer la peticion
  64. *@return String : Con el nombre del metodo
  65. */
  66. Request.prototype.getMethod = function(){
  67. return this.Method;
  68. }
  69. /**
  70. *Metodo que setea el id del campo en donde sera recibido la respuesta a la peticion
  71. *@param String - value: Contiene el id donde sera depositada la respuesta
  72. */
  73. Request.prototype.setId = function(value){
  74. this.Id = value;
  75. }
  76. /**
  77. *Metodo que proporciona el identificador del campo
  78. *@return String : Contiene el Identificador del campo
  79. */
  80. Request.prototype.getId = function(){
  81. return this.Id;
  82. }
  83. /**
  84. *Metodo que agrega pares valor a la direccion
  85. *@param string nombre: Contiene el nombre del parametro
  86. *@param string valor : Contiene el valor que se le asigna al parametro
  87. */
  88. Request.prototype.addParam = function(nombre, valor){
  89. if(this.countParametros==0)
  90. {
  91. this.parametros = nombre + "=" + valor;
  92. }
  93. else
  94. {
  95. this.parametros = this.parametros + "&" + nombre + "=" + valor;
  96. }
  97. this.countParametros++;
  98. }
  99. /**
  100. *Metodo que propororciona un string con el enlace y los parametros para el metodo GET
  101. *@return String : Con el contenido del string
  102. */
  103. Request.prototype.getLinkGet = function(){
  104. var texto = this.direccion;
  105. if(this.countParametros>0)
  106. {
  107. texto = texto + '?' + this.parametros;
  108. }
  109. return texto;
  110. }
  111. /**
  112. *Metodo que propororciona un string con los parametros para el metodo POST
  113. *@return String : Con el contenido del string
  114. */
  115. Request.prototype.getLinkPost = function(){
  116. return this.parametros;
  117. }
  118. /**
  119. *Metodo que porporciona la peticion generica
  120. */
  121. Request.prototype.callRequest= function (){
  122. if(this.getMethod().toUpperCase()=="GET")
  123. {
  124. this.callGet();
  125. return;
  126. }
  127. if(this.getMethod().toUpperCase()=="POST")
  128. {
  129. this.callPost();
  130. return;
  131. }
  132. }
  133. /**
  134. *Metodo que implementa la peticion a travez del metodo GET
  135. */
  136. Request.prototype.callGet = function(){
  137. //Creacion del objeto XMLHttpRequest
  138. var ajax = this.createXMLHttpRequest();
  139. var Id = this.getId();
  140. var callback = this.callback;
  141. //Ingreso de variable aleatoria de manera de engañar el cacheo de internet explorer
  142. this.addParam("ajaxCache",Math.random());
  143. //Envio de la peticion
  144. ajax.open(this.getMethod(), this.getLinkGet(), this.getAsync());
  145. ajax.onreadystatechange = function() {
  146. if (ajax.readyState==4) {
  147. responseAjaxRequest(ajax, Id, callback)
  148. }
  149. }
  150. ajax.send(null)
  151. }
  152. /**
  153. *Metodo que implementa la peticion a travez del metodo POST
  154. */
  155. Request.prototype.callPost = function(){
  156. //Creacion del objeto XMLHttpRequest
  157. var ajax = this.createXMLHttpRequest();
  158. var Id = this.getId();
  159. var callback = this.callback;
  160. ajax.open(this.getMethod(), this.direccion ,this.getAsync());
  161. ajax.onreadystatechange = function() {
  162. if (ajax.readyState==4) {
  163. responseAjaxRequest(ajax, Id, callback)
  164. }
  165. }
  166. ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  167. ajax.send(this.getLinkPost())
  168. }
  169. /**
  170. *Funcion que analiza la respuesta a la peticion
  171. *@param XMLHttpRequest - xmlHttp : Contiene el objeto que implementa la peticion
  172. *@param String id - Contiene el id del campo en donde se cargara la respuesta
  173. *@Param String callback - Contiene el nombre de la funcion que sera ejecutada para acomodar los datos
  174. */
  175. function responseAjaxRequest(xmlHttp, Id, callback)
  176. {
  177. var val = "";
  178. for(i in xmlHttp) {
  179. try {
  180. val+="xmlHttp."+i+"="+xmlHttp[i]+"\n"
  181. } catch(e) {}
  182. }
  183. if(xmlHttp.status==404) {
  184. alert("Al parecer la pagina a la cual esta accediendo no existe")
  185. }
  186. try
  187. {
  188. var texto = new String(xmlHttp.responseText);
  189. var contenido = new String();
  190. contenido = texto.replace(/(·)/g,"\"");
  191. callback(contenido, Id)
  192. }
  193. catch(e) {alert(e.name+" - "+e.message);}
  194. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.