Peticiones Crossdomain con AJAX y jQuery


Recientemente, en mi clase de sistemas distribuidos, nos dejaron realizar un web service que realizara ciertas funciones. A mi me tocó desarrollar un modulo que realizara la funcionalidad de tienda en linea, por lo cual, yo como cliente tenía que proporcionar datos de una tarjeta de crédito, para que un servidor, ubicado en otro dominio, funcionara como intermediario (servidor para mi y cliente de webservice) y enviara esos datos a un servidor que se encontraba en otro dominio, en el cual estaría la base de datos de un banco y este a su vez, comprobaría que los datos que se enviaron fueran validos, es decir, que existiera una cuenta con los datos proporcionados por el cliente, y que de la misma manera, la cuenta tuviera suficiente dinero para poder realizar la compra.

Cuando se envía el formulario,  llamo a un script que con ayuda de jQuery validará que los campos tengan contenido y una vez validado eso, se procede a realizar la peticion AJAX a un servidor distinto, que regresara un mensaje, el cual el cliente mostrará en pantalla.

$(function() {
	$('td.error').hide();
    $(".submit").click(function() {
      // validate and process form here
		$('td.error').hide();
		var name = $("input#nombre").val();
		if (name == "") {
			$("td.nombre_error").show();
			$("input#nombre").focus();
			return false;
		}

  		var apellido = $("input#apellido").val();
  		if (apellido == "") {
			$("td.apellido_error").show();
			$("input#apellido").focus();
			return false;
		}

  		var mes = $("input#mes").val();
  		if (mes == "") {
			$("td.fecha_error").show();
			$("input#mes").focus();
			return false;
		}

		var year = $("input#year").val();
  		if (year == "") {
			$("td.fecha_error").show();
			$("input#year").focus();
			return false;
		}

		var tarjeta = $("input#numTarjeta").val();
		if(tarjeta == ""){
			$("td.numTarjeta").show();
			$("input#numTarjeta").focus();
			return false;
		}

		var codigo = $("input#codigo").val();
		if(codigo == ""){
			$("td.codigo_error").show();
			$("input#codigo").focus();
			return false;
		}

	/*************	 FIN DE LA VALIDACION	*************/

		var monto = $("input#monto").val();
		var dataString = {"nombre": name, "apellido": apellido, "mes":mes, "year": year, "numTarjeta": tarjeta, "codigoSeguridad": codigo, "monto":monto}
		//alert (dataString);return false;

		$.ajax({
			type: "GET",
			url: "http://pagos.sduninter.tk/servidor_pagos.php",
			crossDomain : true,
			data: dataString,
			dataType: 'jsonp',
			jsonp: 'jsonp_callback',
			success: function(data) {
				console.log("Success" + data);
				alert(data.mensaje);
			},
			error: function(jqXHR, textStatus, errorThrown){
				console.log('Error ' + jqXHR);
			}
		  });
		  return false;
    });
  });

Por su parte, el servidor necesita unas cuantas lineas de código para poder recibir la petición AJAX, generar una instancia del banco para así poder ejecutar un método de la clase banco, la cual se encarga de realizar las consultas a la base de datos. Una vez realizada la consulta, se mandará una respuesta al servidor y este mandará un mensaje que se mostrará en la pantalla del cliente.

ini_set("soap.wsdl_cache_enabled", 0);
	require_once 'Zend/Loader/Autoloader.php';
	Zend_Loader_Autoloader::getInstance();

	Class servidor_pagos{
        	$obj = new Zend_Soap_Client("http://banco.sduninter.tk/banco.php?wsdl");

		public function preautorizarPago() {
			$nombre = $_GET['nombre'];
			$apellido = $_GET['apellido'];
			$mes = $_GET['mes'];
			$year = $_GET['year'];
			$tarjeta = $_GET['numTarjeta'];
			$codigo = $_GET['codigoSeguridad'];
			$monto = $_GET['monto'];

			$jsonp_callback = $_GET['jsonp_callback'];
			$msg = array("mensaje" => "Se va a cobrar esta cantidad: $" . $monto );

			return $jsonp_callback . "(". json_encode($msg) .");";
		}

		public function revertirPago() {
			$result = $obj->desautorizarPago();
		}

	} //Fin de clase servidor_pagos

	if(isset($_GET['jsonp_callback'])) {
		$obj2 = new servidor_pagos();
		$respuesta = $obj2->preautorizarPago();

		echo $respuesta;
	}

El código anterior muestra una clase servidor_pagos, la cual genera una instancia de un cliente de un web service, y que posee un método preautorizarPago(), el cual va a utilizar esa instancia para llamar a un metodo que generará una consulta a una base de datos.

Al finalizar la clase, lo primero que se verifica es que por medio de $_GET[], se halla recibido una variabe jsonp_callback. Si es así, se genera el objeto de la clase servidor_pagos y se llama al método preautorizarPago(), el cual regresará un mensaje de error o de éxito.

Generar la petición crossdomain me costó mucho trabajo ya que consulté varios sitios web y ninguno de ellos pudo ayudarme, hasta que al final encontré que:

  • Una petición crossdomain necesita enviar datos por el método GET.
  • El tipo de datos se tiene que definir como jsonp.
  • La información que se envía tiene que estar en formato json.
  • El atributo crossDomain se tiene que definir como true.
  • Tiene que existir un atributo jsonp en el cual se define una función callback. En este caso la definí como jsonp_callback.
  • El servidor debe de regresar los datos de la petición en formato json.

Espero que esto sea de gran utilidad para algunos, ya que a mi como nuevo usuario del lenguaje me llevó mucho tiempo poder ponerlo en marcha.

Para poder hacer funcionar mis peticiones crossdomain, me basé en esta publicación: http://www.using-jquery.com/2011/02/jquery-and-jsonp-cross-domain-requests-in-jquery/

Anuncios
Esta entrada fue publicada el 6 mayo, 2012 a las 21:43. Se guardó como Tech y etiquetado como , , , , , , . Añadir a marcadores el enlace permanente. Sigue todos los comentarios aquí gracias a la fuente RSS para esta entrada.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: