{"id":117,"date":"2023-04-14T11:25:46","date_gmt":"2023-04-14T16:25:46","guid":{"rendered":"https:\/\/www.sofcavi.com\/es\/?p=117"},"modified":"2023-04-14T11:25:46","modified_gmt":"2023-04-14T16:25:46","slug":"ajax-y-jquery","status":"publish","type":"post","link":"https:\/\/www.sofcavi.com\/es\/2023\/04\/14\/ajax-y-jquery\/","title":{"rendered":"Ajax y Jquery"},"content":{"rendered":"<h2>Qu\u00e9 es AJAX<\/h2>\n<p>AJAX (<em>Asynchronous Javascript and XML<\/em>) es una <strong>t\u00e9cnica de desarrollo web<\/strong> que, al combinar una serie de tecnolog\u00edas independientes, nos permite intercambiar informaci\u00f3n entre el servidor y el cliente (un navegador web) de forma as\u00edncrona.<\/p>\n<p>Como resultado, obtenemos una navegaci\u00f3n \u00e1gil, r\u00e1pida y din\u00e1mica; y tambi\u00e9n la posibilidad de <strong>realizar cambios sobre una web sin necesidad de actualizarla<\/strong>. Las tecnolog\u00edas independientes que lo hacen posible son: <a href=\"https:\/\/static.platzi.com\/blog\/uploads\/2015\/06\/DIAGRAMA.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/static.platzi.com\/blog\/uploads\/2015\/06\/DIAGRAMA.png\" alt=\"AJAX\" \/><\/a><\/p>\n<ul>\n<li>JAVASCRIPT: Es la base fundamental que une estas tecnolog\u00edas<\/li>\n<li>XMLHttpRequest: Intercambio as\u00edncrono<\/li>\n<li>XML: Manipulaci\u00f3n e intercambio de informaci\u00f3n<\/li>\n<li>JSON: Alternativa de XML (Actualmente m\u00e1s usado que XML)<\/li>\n<li>DOM: Document Object Model<\/li>\n<li>XHTML y CSS: Estilos &#8211; Creaci\u00f3n de una presentaci\u00f3n de objetos<\/li>\n<\/ul>\n<h2><strong>Sus ventajas son:<\/strong><\/h2>\n<ul>\n<li>Mejora la experiencia del usuario<\/li>\n<li>Puede ser utilizada en cualquier plataforma y navegador<\/li>\n<li>Menor transferencia de datos cliente\/servidor<\/li>\n<li>Optimizaci\u00f3n de recursos (tiempo de operaciones)<\/li>\n<li>Portabilidad y usabilidad (permite realizar una petici\u00f3n de datos al servidor y recibirla sin necesidad de cargar la p\u00e1gina entera)<\/li>\n<\/ul>\n<h2><strong>Sus desventajas son:<\/strong><\/h2>\n<ul>\n<li>JavaScript debe estar activado en el navegador web para funcionar<\/li>\n<li>Utilizar AJAX preferentemente en formularios de contacto, validaci\u00f3n de correo electr\u00f3nico y contrase\u00f1as para no afectar el posicionamiento web (SEO)<\/li>\n<li>Tiempos de respuesta del servidor en momentos determinados<\/li>\n<li>Tiempo de desarrollo (es necesario tener conocimiento medio\/alto de las tecnolog\u00edas que hacen parte de AJAX)<\/li>\n<li>Algunas funciones a las que estamos acostumbrados en la navegaci\u00f3n web pueden no funcionar como esperamos. Por ejemplo, el bot\u00f3n de atr\u00e1s, guardar marcador o actualizar la p\u00e1gina web en cualquier momento.<\/li>\n<\/ul>\n<p>El punto d\u00e9bil de AJAX es que es necesario escribir c\u00f3digo para cada uno de los navegadores que utilizaremos, y esto requiere de mucho tiempo.<\/p>\n<p>Sin embargo, jQuery llega al rescate al permitirnos utilizar AJAX y todo su potencial con una sola l\u00ednea de c\u00f3digo:<\/p>\n<pre><code class=\"hljs fortran\">$.ajax({<span class=\"hljs-keyword\">name<\/span>:<span class=\"hljs-keyword\">value<\/span>, <span class=\"hljs-keyword\">name<\/span>:<span class=\"hljs-keyword\">value<\/span>, ... })\r\n<\/code><\/pre>\n<p>Para comprender el uso de jQuery AJAX vamos a realizar un ejemplo donde podemos visualizar los m\u00e9todos que se utilizan:<\/p>\n<pre><code class=\"language-js hljs javascript\">&lt;script&gt;\r\n$(<span class=\"hljs-built_in\">document<\/span>).ready(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>()<\/span>{ \r\n\t$(<span class=\"hljs-string\">\"button\"<\/span>).click(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>()<\/span>{ \r\n\t\t$(<span class=\"hljs-string\">\"div\"<\/span>).load(<span class=\"hljs-string\">\"Metodos.xml\"<\/span>,<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">response, status<\/span>)<\/span>{ \r\n\t\t\t<span class=\"hljs-keyword\">if<\/span> (status == <span class=\"hljs-string\">\"success\"<\/span>){ \r\n\t\t\t\t$(<span class=\"hljs-string\">\"div\"<\/span>).html(<span class=\"hljs-string\">\"&lt;ol&gt;&lt;\/ol&gt;\"<\/span>); \r\n\t\t\t\t$(response).find(<span class=\"hljs-string\">\"metodo\"<\/span>).each(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>()<\/span>{ \r\n\t\t\t\t\t<span class=\"hljs-keyword\">var<\/span> item_text = $(<span class=\"hljs-keyword\">this<\/span>).text(); \r\n\t\t\t\t\t$(<span class=\"hljs-string\">'&lt;li&gt;&lt;\/li&gt;'<\/span>).html(item_text).appendTo(<span class=\"hljs-string\">'ol'<\/span>);\r\n\t\t\t\t}); \r\n\t\t\t\talert(<span class=\"hljs-string\">\"Estos son los metodos que utiliza jQuery AJAX\"<\/span>) \r\n\t\t\t}\r\n\t\t }); \r\n\t});\r\n });\r\n\r\n<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"handlebars\"> \r\n\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\r\n<span class=\"hljs-selector-tag\">div<\/span> { \r\n\t<span class=\"hljs-attribute\">font-size<\/span>: x-large; \r\n\t<span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">5px<\/span>; \r\n\t<span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#dddddd<\/span>; \r\n\t<span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">24px<\/span> <span class=\"hljs-number\">24px<\/span> <span class=\"hljs-number\">24px<\/span> <span class=\"hljs-number\">24px<\/span>; \r\n\t<span class=\"hljs-attribute\">-moz-border-radius<\/span>: <span class=\"hljs-number\">24px<\/span> <span class=\"hljs-number\">24px<\/span> <span class=\"hljs-number\">24px<\/span> <span class=\"hljs-number\">24px<\/span>; \r\n\t<span class=\"hljs-attribute\">-webkit-border-radius<\/span>: <span class=\"hljs-number\">24px<\/span> <span class=\"hljs-number\">24px<\/span> <span class=\"hljs-number\">24px<\/span> <span class=\"hljs-number\">24px<\/span>; \r\n\t<span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-number\">#bfc0be<\/span>; \r\n}\r\n\r\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\r\n<\/span><\/span><\/code><\/pre>\n<h2>Qu\u00e9 es jQuery<\/h2>\n<p><strong>jQuery<\/strong> es un software libre y c\u00f3digo abierto. Cuenta con la facilidad de hacernos manipular elementos del DOM y agilizar nuestro desarrollo web, tambi\u00e9n nos ayuda a generar menos c\u00f3digo para que podamos enfocarnos en escribir c\u00f3digo m\u00e1s importante.<\/p>\n<h2>Metodos jQuery AJAX<\/h2>\n<p>En este ejemplo utilizamos el m\u00e9todo load() para cargar nuestro archivo .xml y de esta forma, visualizarlo en pantalla. Otro ejemplo de c\u00f3mo implementar un m\u00e9todo ser\u00eda:<\/p>\n<pre><code class=\"hljs nimrod\">&lt;script&gt;\r\n$(document).ready(function(){ \r\n\t$(<span class=\"hljs-string\">\"button\"<\/span>).click(function(){ \r\n\t\t$.ajaxSetup({\r\n\t\t\turl: <span class=\"hljs-string\">\"Metodo.txt\"<\/span>, \r\n\t\t\tsuccess: function(<span class=\"hljs-literal\">result<\/span>){ \r\n\t\t\t\t$(<span class=\"hljs-string\">\"div\"<\/span>).html(<span class=\"hljs-literal\">result<\/span>);\r\n\t\t\t\t}\r\n\t\t\t}); \r\n\t\t$.ajax(); \r\n\t}); \r\n});\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<p>Utilizando los m\u00e9todos de jQuery AJAX podemos implementar elementos y funciones en nuestras p\u00e1ginas web logrando resultados sorprendentes. Si quieres saber c\u00f3mo utilizar esta t\u00e9cnica m\u00e1s a fondo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Qu\u00e9 es AJAX AJAX (Asynchronous Javascript and XML) es una t\u00e9cnica de desarrollo web que, al combinar una serie de tecnolog\u00edas independientes, nos permite intercambiar informaci\u00f3n entre el servidor y el cliente (un navegador web) de forma as\u00edncrona. Como resultado, obtenemos una navegaci\u00f3n \u00e1gil, r\u00e1pida y din\u00e1mica; y tambi\u00e9n la posibilidad de realizar cambios sobre [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":118,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tecnologia"],"_links":{"self":[{"href":"https:\/\/www.sofcavi.com\/es\/wp-json\/wp\/v2\/posts\/117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sofcavi.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sofcavi.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sofcavi.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sofcavi.com\/es\/wp-json\/wp\/v2\/comments?post=117"}],"version-history":[{"count":1,"href":"https:\/\/www.sofcavi.com\/es\/wp-json\/wp\/v2\/posts\/117\/revisions"}],"predecessor-version":[{"id":119,"href":"https:\/\/www.sofcavi.com\/es\/wp-json\/wp\/v2\/posts\/117\/revisions\/119"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sofcavi.com\/es\/wp-json\/wp\/v2\/media\/118"}],"wp:attachment":[{"href":"https:\/\/www.sofcavi.com\/es\/wp-json\/wp\/v2\/media?parent=117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sofcavi.com\/es\/wp-json\/wp\/v2\/categories?post=117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sofcavi.com\/es\/wp-json\/wp\/v2\/tags?post=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}