Consumiendo datos Web Sockets, jQuey ajax, consumiendo JSON.

1. Consumiendo Datos
Danae Aguilar Guzmán
MCT, MS, MCTS, MCP
danaeaguilar@gmail.com

2. Contenido del Módulo
 Recibiendo mensajes desde el WebSocket
API de HTML5
 Usando jQuery para llamadas AJAX
 Consumiendo datos JSON y XML
 Obteniendo datos de un servicio Web
 Obteniendo datos usando XMLHTTPRequest

3. Recibiendo mensajes desde el
WebSocket API de HTML5
 WebSocket es una tecnología de comunicación
full-duplex sobre una conexión basada en TCP.
 Permite al server enviar contenido al browser sin
que el cliente lo solicite.
 Permite una conversación bidireccional mientras
la conexión esta abierta
 El protocolo WebSocket hace fácil la
comunicación en tiempo real
 Los URL de webSocket inician con: ws:// o
wss://
 Configuramos los eventos onopen, onmessage,
onerror, y onclose

4. Recibiendo mensajes desde el
WebSocket API de HTML5
var wsUri = 'ws://echo.websocket.org/';
var webSocket;
$(document).ready(function () {
if (checkSupported()) {
connect();
$('#btnSend').click(doSend);
}
});
function writeOutput(message) {
var output = $("#divOutput");
output.html(output.html() + '<br />' + message);
}
function checkSupported() {
if (window.WebSocket) {
writeOutput('WebSockets supported!');
return true;
}
else {
writeOutput('WebSockets NOT supported');
$('#btnSend').attr('disabled', 'disabled');
return false;
}
}

5. Recibiendo mensajes desde el
WebSocket API de HTML5
function connect() {
webSocket = new WebSocket(wsUri);
webSocket.onopen = function (evt) { onOpen(evt) };
webSocket.onclose = function (evt) { onClose(evt) };
webSocket.onmessage = function (evt) { onMessage(evt) };
webSocket.onerror = function (evt) { onError(evt) };
}
function doSend() {
if (webSocket.readyState != webSocket.OPEN) {
writeOutput("NOT OPEN: " + $('#txtMessage').val());
return;
}
writeOutput("SENT: " + $('#txtMessage').val());
webSocket.send($('#txtMessage').val());
}
function onOpen(evt) {
writeOutput("CONNECTED");
}

6. Implementando AJAX con jQuery
1. Introducción
2. Invocando un servicio Web
3. La función $.ajax()

7. 1. Introducción
 jQuery permite implementar AJAX
mediante llamadas a servicios web.
 jQuery puede llamar a servicios o a
métodos web de la misma pagina.
 Usamos funciones como jQuery.ajax()
 jQuery.ajax() es lo mismo que $.ajax()

8. 2. Invocando un servicio Web
Invocando un servicio Web con $.ajax()
1. Definir el servicio:
[System.Web.Script.Services.ScriptService]
public class EstudiantesService : System.Web.Services.WebService
{
[WebMethod]
public string ObtenerEstudiante(string codigo)
{
return "Juanito Perez";
}
}

9. 2. Invocando un servicio Web
Invocando un servicio Web con $.ajax()
2. Invocar el servicio:
<script type="text/javascript">
$(document).ready(function () {
$("#btnBuscar").click(function () {
var miId = $("#txtId").val();
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json",
url: "EstudiantesService.asmx/ObtenerEstudiante",
data: "{'codigo': '" + miId + "'}",
success: function (data) {
alert("Nombre del Estudiante: " + data.d);
},
error: function () {
alert("Error invocando al servicio web.");
}
});
});
});
</script>

10. 3. La función $.ajax()
Propiedad Descripción
type El tipo de petición o request HTTP, por
ejemplo POST
contentType Indica el tipo MIME de la petición, por
ejemplo JSON.
dataType Indica el tipo MIME de la respuesta, por
ejemplo JSON.
url La dirección url del servicio web, junto con el
nombre del método a invocar.

11. 3. La función $.ajax()
Propiedad Descripción
data Sirve para pasar los parámetros que recibe el
servicio web.
success Indica una función que será ejecutada si la llamada
se ejecuta correctamente.
Los resultados de la llamada AJAX serán pasados a
esta función como el parámetro que nosotros
especificamos en esta función.
por ejemplo: data.d, data.d.NombreDePropiedad
error Permite especificar una función que será invocada si
la llamada AJAX falla.

12. 3. Otras funciones y eventos
• .ajaxSend()
• .ajaxComplete()
• .ajaxError()
• .ajaxSuccess()
• $.get()
• $.post()

13. Retornando JSON
• Definimos una clase para serializarla
• Podemos usar DataContract y
DataMember
– (importar el assembly
System.Runtime.Serialization)
[DataContract]
class Estudiante
{
[DataMember]
public string Nombre { get; set; }
[DataMember(Name = "edad")]
public int Edad { get; set; }
}

14. Retornando JSON
• Marcamos el método del servicio con los
atributos WebMethod y ScriptMethod.
• Especificamos que el formato de retorno es
JSON
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string ObtenerEstudiante(string codigo)
{

15. Retornando JSON
• Serializamos el objeto con
DataContractJsonSerializer
var estudiante = new Estudiante()
{ Nombre = "Pepito", Edad = 10};
var serializer = new
DataContractJsonSerializer(estudiante.GetType());
MemoryStream ms = new MemoryStream();
serializer.WriteObject(ms, estudiante);
string jsonString = Encoding.Default.
GetString(ms.ToArray());
ms.Close();
return jsonString;

16. Retornando JSON
• En el lado del script podemos convertir la
cadena en un objeto JavaScript usando eval
o con JSON.parse
var estudiante = eval('(' + data.d+ ')');

17. Obteniendo datos usando
XMLHTTPRequest
• Principalmente se usa para datos XML
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST",
"EstudiantesService.asmx/HelloWorld",
false);
xmlhttp.send();
var xmlDoc = xmlhttp.responseText;