Arrays en Javascript
En los lenguajes de programación existen estructuras
de datos especiales que nos sirven para guardar información más compleja que
simples variables. Una estructura típica en todos los lenguajes es el Array,
que es como una variable donde podemos introducir varios valores, en lugar de
solamente uno como ocurre con las variables normales.
Los arrays nos permiten guardar varias variables y
acceder a ellas de manera independiente, es como tener una variable con
distintos compartimentos donde podemos introducir datos distintos. Para ello
utilizamos un índice que nos permite especificar el compartimiento o posición a
la que nos estamos refiriendo.
Creación de Arrays javascript
El primer paso para
utilizar un array es crearlo. Para ello utilizamos un objeto Javascript ya
implementado en el navegador. Veremos en adelante un tema para explicar lo que
es la orientación a objetos, aunque no será necesario para poder entender el
uso de los arrays. Esta es la sentencia para crear un objeto array:
varmiArray=newArray()
Esto crea un array en
la página que esta ejecutándose. El array se crea sin ningún contenido, es
decir, no tendrá ninguna casilla o compartimiento creado. También podemos crear
el array Javascript especificando el número de compartimentos que va a tener.
varmiArray=newArray(10)
En este caso
indicamos que el array va a tener 10 posiciones, es decir, 10 casillas donde
guardar datos.
Es importante que nos
fijemos que la palabra Array en código Javascript se escribe con la primera
letra en mayúscula. Como en Javascript las mayúsculas y minúsculas si que
importan, si lo escribimos en minúscula no funcionará.
Tanto se indique o no
el número de casillas del array javascript, podemos introducir en el array
cualquier dato. Si la casilla está creada se introduce simplemente y si la
casilla no estaba creada se crea y luego se introduce el dato, con lo que el
resultado final es el mismo. Esta creación de casillas es dinámica y se produce
al mismo tiempo que los scripts se ejecutan. Veamos a continuación cómo
introducir valores en nuestros arrays.
miArray[0]=290
miArray[1]=97
miArray[2]=127
Se introducen
indicando entre corchetes el índice de la posición donde queríamos guardar el
dato. En este caso introducimos 290 en la posición 0, 97 en la posición 1 y 127
en la 2.
Los arrays en
Javascript empiezan siempre en la posición 0, así que un array que tenga por
ejemplo 10 posiciones, tendrá casillas de la 0 a la 9. Para recoger datos de un
array lo hacemos igual: poniendo entre corchetes el índice de la posición a la
que queremos acceder. Veamos cómo se imprimiría en la pantalla el contenido de
un array.
varmiArray=newArray(3)
miArray[0]=155
miArray[1]=4
miArray[2]=499
for(i=0;i<3;i++){
document.write("Posición "+i+" del array: "+miArray[i])
document.write("<br>")
}
Hemos creado un array
con tres posiciones, luego hemos introducido un valor en cada una de las
posiciones del array y finalmente las hemos impreso. En general, el recorrido
por arrays para imprimir sus posiciones, o cualquier otra cosa, se hace
utilizando bucles. En este caso utilizamos un bucle FOR que va desde el 0 hasta
el 2.
Tipos de datos en los arrays
En las casillas de
los arrays podemos guardar datos de cualquier tipo. Podemos ver un array donde
introducimos datos de tipo carácter.
miArray[0]="Hola"
miArray[1]="a"
miArray[2]="todos"
Incluso, en
Javascript podemos guardar distintos tipos de datos en las casillas de un mismo
array. Es decir, podemos introducir números en unas casillas, textos en otras,
boleanos o cualquier otra cosa que deseemos.
miArray[0]="desarrolloweb.com"
miArray[1]=1275
miArray[1]=0.78
miArray[2]=true
Declaración e inicialización resumida de Arrays
En Javascript tenemos
a nuestra disposición una manera resumida de declarar un array y cargar valores
en un mismo paso. Fijémonos en el código siguiente:
vararrayRapido=[12,45,"array inicializado en su declaración"]
Como se puede ver, se
está definiendo una variable llamada arrayRapido y estamos indicando en los
corchetes varios valores separados por comas. Esto es lo mismo que haver
declarado el array con la función Array() y luego haberle cargado los valores
uno a uno.
Longitud de los arrays
Todos los arrays en
javascript, aparte de almacenar el valor de cada una de sus casillas, también
almacenan el número de posiciones que tienen. Para ello utilizan una propiedad
del objeto array, la propiedad length. Ya veremos en objetos qué es una
propiedad, pero para nuestro caso podemos imaginarnos que es como una variable,
adicional a las posiciones, que almacena un número igual al número de casillas
que tiene el array.
Para acceder a una
propiedad de un objeto se ha de utilizar el operador punto. Se escribe el
nombre del array que queremos acceder al número de posiciones que tiene, sin
corchetes ni paréntesis, seguido de un punto y la palabra length.
var miArray = new Array()
miArray[0] = 155
miArray[1] = 499
miArray[2] = 65
document.write("Longitud
del array: " +
miArray.length)
Este código
imprimiría en pantalla el número de posiciones del array, que en este caso es
3. Recordamos que un array con 3 posiciones abarca desde la posición 0 a la 2.
Es muy habitual que
se utilice la propiedad length para poder recorrer un array por todas sus
posiciones. Para ilustrarlo vamos a ver un ejemplo de recorrido por este array
para mostrar sus valores.
for (i=0;i<miArray.length;i++){
document.write(miArray[i])
}
Hay que fijarse que
el bucle for se ejecuta siempre que i valga menos que la longitud del array,
extraída de su propiedad length.
El siguiente ejemplo
nos servirá para conocer mejor los recorridos por los arrays, el funcionamiento
de la propiedad length y la creación dinámica de nuevas posiciones. Vamos a
crear un array con 2 posiciones y rellenar su valor. Posteriormente introduciremos
un valor en la posición 5 del array. Finalmente imprimiremos todas las
posiciones del array para ver lo que pasa.
var
miArray = new Array(2)
miArray[0] = "Colombia"
miArray[1] = "Estados
Unidos"
miArray[5] = "Brasil"
for (i=0;i<miArray.length;i++){
document.write("Posición
" + i + "
del array: " +
miArray[i])
document.write("<br>")
}
El ejemplo es
sencillo. Se puede apreciar que hacemos un recorrido por el array desde 0 hasta
el número de posiciones del array (indicado por la propiedad length). En el
recorrido vamos imprimiendo el número de la posición seguido del contenido del
array en esa posición. Pero podemos tener una duda al preguntarnos cuál será el
número de elementos de este array, ya que lo habíamos declarado con 2 y luego
le hemos introducido un tercero en la posición 5. Al ver la salida del programa
podremos contestar nuestras preguntas. Será algo parecido a esto:
Posición 0 del array: Colombia
Posición 1 del array: Estados Unidos
Posición 2 del array: null
Posición 3 del array: null
Posición 4 del array: null
Posición 5 del array: Brasil
Se puede ver
claramente que el número de posiciones es 6, de la 0 a la 5. Lo que ha ocurrido
es que al introducir un dato en la posición 5, todas las casillas que no
estaban creadas hasta la quinta se crean también.
Las posiciones de la
2 a la 4 están sin inicializar. En este caso nuestro navegador ha escrito la
palabra null para expresar esto, pero otros navegadores podrán
utilizar la palabra undefined. Ya veremos más adelante qué es este null y dónde
lo podemos utilizar, lo importante ahora es que comprendas cómo trabajan los
arrays y los utilices correctamente.
JSON
JSON (JavaScript
Object Notation - Notación de Objetos de JavaScript) es un formato ligero de
intercambio de datos. Leerlo y escribirlo es simple para humanos, mientras que
para las máquinas es simple interpretarlo y generarlo. Está basado en un
subconjunto del Lenguaje de Programación JavaScript.
Estas son estructuras universales;
virtualmente todos los lenguajes de programación las soportan de una forma u
otra. Es razonable que un formato de intercambio de datos que es independiente
del lenguaje de programación se base en estas estructuras.
En JSON, se presentan de estas formas:
Un objeto es un
conjunto desordenado de pares nombre/valor. Un objeto comienza con { (llave de apertura) y termine con } (llave de cierre). Cada nombre es seguido por : (dos puntos) y los pares nombre/valor están separados
por , (coma).
Un arreglo es una colección de valores. Un
arreglo comienza con [ (corchete izquierdo) y termina
con ] (corchete derecho). Los valores se separan
por , (coma).
Un valor puede ser una cadena de
caracteres con comillas dobles, o un número,
o true o false o null, o un objeto o
un arreglo. Estas estructuras pueden anidarse.
Una cadena de caracteres es una colección de
cero o más caracteres Unicode, encerrados entre comillas dobles, usando barras
divisorias invertidas como escape. Un carácter está representado por una cadena
de caracteres de un único carácter. Una cadena de carateres es
parecida a una cadena de caracteres C o Java.
Un número es similar a un número C o Java,
excepto que no se usan los formatos octales y hexadecimales.
Los espacios en blanco pueden insertarse entre cualquier par de símbolos.
Veamos un sencillo ejemplo de JSON:
Imaginemos que tenemos una frutería y que
queremos obtener el nombre y la cantidad de fruta y verdura que tenemos. En un
principio vamos a suponer que tenemos lo siguiente:
- Fruta:
10 manzanas
20 Peras
30 Naranjas
- Verduras
80 lechugas
15 tomates
50 pepinos
Para empezar, nos tenemos que familiarizar con
la sintaxis de Json:
JSON Nombre/Par de Valores
Para asignar a un nombre un valor debemos usar los dos
puntos ':' este separador es el equivalente al igual ('=') de
cualquier lenguaje.
"Nombre" : "Geeky Theory"
Valores Json
Los tipos de valores que podemos encontrar en Json son
los siguientes:
·
Un número (entero o float)
·
Un string (entre comillas simples)
·
Un booleano (true o false)
·
Un array (entre corchetes [] )
·
Un objeto (entre llaves {})
·
Null
Objetos JSON
Los objetos JSON se identifican entre llaves, un
objeto puede ser en nuestro caso una fruta o una verdura.
{ "NombreFruta":"Manzana" , "Cantidad":20 }
Arrays JSON
En un Json puedes incluir arrays, para
ellos el contenido del array debe ir entre corchetes []:
{"Frutas": [{ "NombreFruta":"Manzana" , "cantidad":10 }, { "NombreFruta":"Pera" , "cantidad":20 }, { "NombreFruta":"Naranja" , "cantidad":30 }]}Una vez explicado el funcionamiento de la sintaxis
JSON, vamos a aplicar nuestro ejemplo de la frutería.
{"Fruteria": [ {"Fruta": [ {"Nombre":"Manzana","Cantidad":10}, {"Nombre":"Pera","Cantidad":20}, {"Nombre":"Naranja","Cantidad":30} ] }, {"Verdura": [ {"Nombre":"Lechuga","Cantidad":80}, {"Nombre":"Tomate","Cantidad":15}, {"Nombre":"Pepino","Cantidad":50} ] } ]}Como podemos
observar, hemos creado un objeto llamado frutería y, dentro de
ese objeto hemos almacenado un array de dos elementos. El primer
elemento del array contiene un objeto llamado fruta y el
segundo elemento del array contiene otro objeto llamado verdura.
Estos objetos a su vez contienen un array cuyo contenido es el
nombre y la cantidad de cada fruta o verdura.
Imaginemos que nos
gustaría saber la cantidad de manzanas que tenemos. El path de este array sería
el siguiente:
Path: json['Fruteria'][0]['Fruta'][0]['Cantidad']Observamos que la
cantidad de manzanas se almacena dentro del primer elemento del array que
contiene el objeto Frutería, y a su vez dentro del primer elemento
del array que contiene el objeto Fruta.
Todo esto parece un
poco confuso, pero una vez que se domina veremos que tenemos ante nosotros una
gran herramienta de desarrollo.
AJAX
AJAX (JavaScript
Asíncrono y XML) es un término nuevo para describir dos capacidades de los
navegadores que han estado presentes por años, pero que habían sido ignoradas
por muchos desarrolladores Web, hasta hace poco que surgieron aplicaciones como
Gmail, Google suggest y Google Maps.
Las dos capacidades
en cuestión son:
·
La posibilidad de hacer peticiones al servidor sin
tener que volver a cargar la página.
·
La posibilidad de analizar y trabajar con documentos
XML.
Cómo realizar una petición HTTP al servidor
Para realizar una
petición HTTP usando JavaScript, es necesario crear una instancia de una clase
que provea esta funcionalidad. Esta clase fue inicialmente introducida en
Internet Explorer como un objeto ActiveX, llamado XMLHTTP. Después
Mozilla, Safari y otros navegadores lo siguieron, implementando una
clase XMLHttpRequest que soportaba los métodos y las propiedades del
objeto ActiveX original.
Como resultado, para
crear una instancia de la clase requerida que funcione en todos los
navegadores, es necesario poner:
if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest();} else if (window.ActiveXObject) { // IE http_request = new ActiveXObject("Microsoft.XMLHTTP");}
(El código mostrado
es una versión simplificada con fines ilustrativos. Para un ejemplo más
realista ver el paso 3 de este artículo.)
Algunas versiones de
los navegadores Mozilla no funcionan correctamente si la respuesta del servidor
no tiene la cabecera mime de tipo XML. En ese caso es posible usar un método
extra que sobreescriba la cabecera enviada por el servidor, en caso que no
sea text/xml.
http_request = new XMLHttpRequest();http_request.overrideMimeType('text/xml'); El próximo paso es
decidir qué se hará después de recibir la respuesta del servidor a la petición
enviada. A estas alturas sólo es necesario decirle al objeto HTTPrequest qué
función de JavaScript se encargará de procesar la respuesta. Para esto se
asigna la propiedad onreadystatechange del objeto al nombre de la
función de JavaScript que se va a utilizar:
http_request.onreadystatechange = nameOfTheFunction;
Es importante notar
que no hay paréntesis después del nombre de la función y no se pasa ningún
parámetro. También es posible definir la función en ese momento, y poner en seguida
las acciones que procesarán la respuesta:
http_request.onreadystatechange = function(){ // procesar la respuesta};
Después de
especificar qué pasará al recibir la respuesta es necesario hacer la petición.
Para esto se utilizan los métodos open() y send() de la
clase HTTP request, como se muestra a continuación:
http_request.open('GET', 'http://www.example.org/algun.archivo', true);http_request.send(null); ·
El primer parámetro de la llamada
a open() es el método HTTP request – GET, POST, HEAD o cualquier otro
método que se quiera usar y sea aceptado por el servidor. El nombre del método
se escribe en mayúsculas, sino algunos navegadores (como Firefox) podrían no
procesar la petición. Para más información sobre los métodos HTTP request
visitar W3C specs
·
El segundo parámetro es el URL de la página que se
esta pidiendo. Por medida de seguridad no es posible llamar páginas en dominios
de terceras personas. Se debe saber el dominio exacto de todas las páginas o se
obtendrá un error de 'permiso denegado' al llamar open(). Una falla común es
acceder al sitio por domain.tld e intentar llamar las páginas como www.domain.tld.
·
El tercer parámetro establece si la petición es
asíncrona. Si se define TRUE, la ejecución de la función de JavaScript
continuará aún cuando la respuesta del servidor no haya llegado. Por esta
capacidad es la A en AJAX.
·
El parámetro en el método send()puede ser
cualquier información que se quiera enviar al servidor si se usa POST para la
petición. La información se debe enviar en forma de cadena, por ejemplo:
name=value&anothername=othervalue&so=on
Si se quiere enviar
información de esta forma, es necesario cambiar el tipo MIME de la petición
usando la siguiente línea:
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
De otro modo el
servidor descartará la información.
Procesando la respuesta del servidor
Al enviar la petición
HTTP es necesario indicar el nombre de la función JavaScript que procesará la
respuesta.
http_request.onreadystatechange = nameOfTheFunction;
A continuación se
verá lo que esta función realiza. En primer lugar necesita revisar el estado de
la petición. Si el estado tiene el valor 4, significa que la respuesta completa
del servidor ha sido recibida y es posible continuar procesándola.
if (http_request.readyState == 4) { // todo va bien, respuesta recibida} else { // aun no esta listo}
La lista completa de
valores para la propiedad readyState es:
·
0 (no inicializada)
·
1 (leyendo)
·
2 (leido)
·
3 (interactiva)
·
4 (completo)
Ahora es necesario
revisar el código de status de la respuesta HTTP. La lista completa de códigos
aparece en el sitio de la W3C.
Para el próposito de este artículo sólo es importante el código 200 OK.
if (http_request.status == 200) { // perfect!} else { // hubo algún problema con la petición, // por ejemplo código de respuesta 404 (Archivo no encontrado) // o 500 (Internal Server Error)}
Después de haber
revisado el estado de la petición y el código de status de la respuesta,
depende de uno hacer cualquier cosa con la información que el servidor ha
entregado. Existen dos opciones para tener acceso a esa información:
·
http_request.responseText –
regresará la respuesta del servidor como una cadena de texto.
·
http_request.responseXML –
regresará la respuesta del servidor como un objeto XMLDocument que
se puede recorrer usando las funciones de JavaScript DOM.
Un sencillo ejemplo
En este ejemplo se
utilizará todo lo que se ha visto para hacer una petición HTTP. Se pedirá un
documento HTML llamado test.html, que contiene el texto "Esto es una
prueba." y después usaremos la función alert() con el contenido
del archivo test.html .
<script type="text/javascript" language="javascript">
var http_request = false;
function makeRequest(url) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
// Ver nota sobre esta linea al final
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Falla :( No es posible crear una instancia XMLHTTP');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('Hubo problemas con la petición.');
}
}
}
</script><span
style="cursor: pointer; text-decoration: underline"
onclick="makeRequest('test.html')"> Hacer una petición</span>
En este ejemplo:
El usuario presiona
el vínculo "Hacer una petición" en el navegador;
Esto llama la
función makeRequest() que tiene como
parámetro test.html que es un archivo HTML localizado en el mismo
directorio;
La petición es
realizada y después (onreadystatechange) la ejecución pasa
a alertContents();
alertContents() verifica
si la respuesta fue recibida y si es OK, si es así
utiliza alert() con el contenido de test.html.
Puedes probar el
ejemplo aquí y
puedes ver el archivo de prueba aquí.
Trabajando con la respuesta XML
En el ejemplo
anterior se utilizo la propiedad reponseText del objeto pedido para
mostrar el contenido de test.html una vez que la respuesta HTTP había
sido recibida. En éste se utilizará la propiedad responseXML.
Primero hay que crear
un documento de XML válido. El documento (test.xml) contiene lo siguiente:
<?xml version="1.0" ?><root> Esto es una prueba.</root>
Para que funcione el script solo es necesario
cambiar la línea de petición por:
...onclick="makeRequest('test.xml')">...
Y en alertContents() es
necerario remplazar la línea donde aparece alert(http_request.responseText); por:
var xmldoc = http_request.responseXML;var root_node = xmldoc.getElementsByTagName('root').item(0);alert(root_node.firstChild.data);
De esta manera se
utiliza el objeto XMLDocument dado por responseXML y se
usan métodos del DOM para acceder a la información contenida en el documento
XML.
DEMOSTRACIÓN
En Visual Studio Daremos Click en Menú à File à New à Project
Y en la Ventana Emergente colocaremos como Nombre del Proyecto “Demo 5
20480”
Le damos click
a OK y Nos aparecerá la siguiente ventana donde Seleccionamos Emty y tildamos la
opción de WebForm:
Al dar click
en OK, En el espacio de nombre del proyecto damos click derecho y
seleccionamos Add à New Items
En la siguiente ventana seleccionamos la Opción “WebForm” y colocamos como
nombre del archivo “Numero.aspx”, para luego presionar el botón Add.
Y luego va a aparecer una página donde vamos a incrustar nuestro código
HTML
Finalizando la etiqueta </Form> vamos a abrir una etiqueta de tipo
<Script></Script>, donde vamos a codificar un objeto de tipo JSON:
En el ejemplo anterior vemos un objeto JSON denominado “Personas”, este
objeto posee dos parámetros “nombre” y “edad” y el cual tiene dos posiciones,
en la posición 0 se le asigna los valores correspondiente a Jorge y en la 1 a
Carlos, en la línea posterior a través de este código JavaScript se le indica
que en la página web a desplegarse escriba el valor del objeto JSON en la
Posición1especificamente el parámetro “nombre”.
Y al desplegar nuestra página web:
Se nos muestra de la siguiente forma:
En este código declaramos un objeto JSON de nombre “Persona”, tiene tres
parámetros “name”, “edad” en las cuales
guardamos la información correspondiente a Jorge y “avisar” que disparará una
función que nos mostrará un mensaje indicando el valor que esta asignado al
parámetro “name”.
Y al desplegar nuestra página web:
Se nos muestra de la siguiente forma:
Nos dirigimos más arriba específicamente en las etiquetas
<Form></Form> de nuestro formulario y escribimos el siguiente
código:
Le damos click derecho al mouse y seleccionamos la opción “ViewCode” y se
nos depliega la siguiente ventana
Debajo del método Page_Load colocaremos lo siguiente:
No sin antes asegurarse que se este haciendo un llamado a la siguiente
librería:
El código tiene que quedar de la siguiente forma:
Volviendo a nuestro código HTML, crearemos otra etiqueta
<Script></Script>, donde tipiáramos la acción que ejecutará el
botón Calcular.
Opciones del método $.ajax
El método $.ajax posee muchas opciones de
configuración, y es justamente esta característica la que hace que sea un
método muy útil. Para una lista completa de las opciones disponibles, puede
consultar api.jquery.com/jQuery.ajax; a continuación se
muestran las más comunes:
async Establece si la petición será asíncrona o no. De forma predeterminada el
valor es true. Debe tener en cuenta que si la opción se establece en false, la petición bloqueará la ejecución de otros códigos hasta que dicha
petición haya finalizado.
cache Establece si la petición será guardada en la cache del navegador. De forma
predeterminada es true para todos los dataType excepto para script y jsonp.
Cuando posee el valor false, se agrega una cadena de caracteres anti-cache al
final de la URL de la petición.
complete Establece una función de devolución de llamada que se ejecuta cuando la
petición está completa, aunque haya fallado o no. La función recibe como
argumentos el objeto de la petición en crudo y el código de estatus de la misma
petición.
context Establece el alcance en que la/las funciones de devolución de llamada se
ejecutaran (por ejemplo, define el significado de this dentro de las
funciones). De manera predeterminada this hace referencia al objeto
originalmente pasado al método $.ajax.
data Establece la información
que se enviará al servidor. Esta puede ser tanto un objeto como una cadena de
datos (por ejemplo foo=bar&baz=bim)
dataType Establece el tipo de información que se espera recibir como respuesta del
servidor. Si no se especifica ningún valor, de forma predeterminada, jQuery
revisa el tipo de MIME que posee la respuesta.
error Establece una función de devolución de llamada a ejecutar si resulta algún
error en la petición. Dicha función recibe como argumentos el objeto de la
petición en crudo y el código de estatus de la misma petición.
jsonp Establece el nombre de la función de devolución de llamada a enviar cuando
se realiza una petición JSONP. De forma predeterminada el nombre es callback
success Establece una función a ejecutar si la petición a sido satisfactoria. Dicha
función recibe como argumentos la información de la petición (convertida a
objeto JavaScript en el caso que dataType sea JSON), el estatus de la
misma y el objeto de la petición en crudo.
timeout Establece un tiempo en milisegundos para considerar a una petición como
fallada. traditional Si su valor es true, se utiliza el estilo de
serialización de datos utilizado antes de jQuery 1.4. Para más detalles puede
visitar api.jquery.com/jQuery.param.
type De forma predeterminada su valor es GET. Otros tipos de peticiones
también pueden ser utilizadas (como PUT y DELETE), sin embargo
pueden no estar soportados por todos los navegadores.
url Establece la URL en donde se realiza la petición. La
opción url es obligatoria para el método $.ajax;
Y al desplegar nuestra página web:
Se nos muestra de la siguiente forma:
En el campo Num 1 Vamos a colocar el Valor 1 y el Num 2 el valor 2, y le
damos click en el botón Calcular
Con el método .$Ajax realizó la sumatoria sastifactoriamente.
