AngularJS AJAX: realice una llamada AJAX usando $http

Por: james hartman james hartman
Hours Actualizado

AngularJS AJAX

AJAX es la forma corta de Asynchronous JavaScript y XML. AJAX fue diseñado principalmente para actualizar partes de una página web, sin tener que recargar toda la página.

La razón para diseñar esta tecnología fue reducir la cantidad de viajes de ida y vuelta que se realizaban entre el cliente y el servidor y la cantidad de actualizaciones de páginas completas que solían tener lugar cada vez que un usuario requería cierta información.

AJAX permitió que las páginas web se actualizaran de forma asincrónica mediante el intercambio de pequeñas cantidades de datos con el servidor en segundo plano. Esto significaba que era posible actualizar partes de una página web sin tener que recargar toda la página.

Muchas aplicaciones web modernas siguen esta técnica para actualizar la página u obtener datos del servidor.

Interacciones de alto nivel con servidores usando $resource

Angular proporciona dos API diferentes para manejar solicitudes de Ajax. Ellos son

  • $ recurso
  • $ http

Veremos la propiedad “$resource” en Angular, que se utiliza para interactuar con servidores de alto nivel.

Cuando hablamos de interactuar a un nivel superior, significa que sólo nos preocuparemos de lo que el servidor tiene para ofrecer en cuanto a funcionalidad y no de qué hace exactamente el servidor en detalle con respecto a esta funcionalidad.

Por ejemplo, si el servidor alojara una aplicación que mantiene la información de los empleados de una determinada empresa, el servidor podría exponer funcionalidades a clientes como GetEmployeeDetails, SetEmployeeDetails, etc.

En un nivel alto, sabemos qué pueden hacer estas dos funciones y podemos invocarlas mediante la propiedad $resource. Pero no conocemos exactamente los detalles de las funciones “GetEmployeeDetails” y “SetEmployeeDetails”, ni cómo se implementan.

La explicación anterior explica lo que se conoce como una arquitectura basada en REST.

  • REST se conoce como Transferencia de Estado Representacional, que es una arquitectura seguida en muchos sistemas modernos basados ​​en la web.
  • Significa que puede utilizar los verbos HTTP normales de GET, POST, PUT y DELETE para trabajar con una aplicación basada en web.

Entonces supongamos que tenemos una aplicación web que mantiene una lista de Eventos .

Si quisiéramos llegar a la lista de todos los eventos,

  • La aplicación web puede exponer una URL como http://example/events y
  • Podemos usar el verbo “GET” para obtener la lista completa de eventos si la aplicación sigue una arquitectura basada en REST.

Por ejemplo, si hubo un evento con ID 1, podemos obtener los detalles de este evento a través de URL. http://example/events/1

¿Qué es el objeto $recurso?

El objeto $resource en Angular ayuda a trabajar con servidores que sirven aplicaciones en una arquitectura basada en REST.

La sintaxis básica de la declaración @resource junto con las diversas funciones se detallan a continuación

Sintaxis de la declaración @resource

var resource Object = $resource(url);

Una vez que tenga el objeto de recurso a mano, puede utilizar las siguientes funciones para realizar las llamadas REST necesarias.

1. get([params], [éxito], [error]): esto se puede utilizar para realizar la llamada GET estándar.

2. save([params], postData, [success], [error]): esto se puede utilizar para realizar la llamada POST estándar.

3. consulta ([parámetros], [éxito], [error]): esto se puede usar para realizar la llamada GET estándar, pero se devuelve una matriz como parte de la respuesta.

4. remove([params], postData, [success], [error]): esto se puede utilizar para realizar la llamada DELETE estándar.

En todas las funciones que se muestran a continuación, el parámetro 'params' se puede utilizar para proporcionar los parámetros necesarios, que deben pasarse en la URL.

Por ejemplo,

  • Supongamos que pasa un valor de Tema: 'Angular' como 'parámetro' en la función get como
  • conseguir('http://example/events' ,'{ Tema: 'Angular' }')
  • El URL http://example/events?Topic=Angular se invoca como parte de la función get.

ARTÍCULOS RELACIONADOS

Cómo utilizar la propiedad $resource de AngularJS

Para utilizar la propiedad $resource, se deben seguir los siguientes pasos:

Paso 1) El archivo "angular-resource.js" debe descargarse del sitio Angular.JS y debe colocarse en la aplicación.

Paso 2) El módulo de la aplicación debe declarar una dependencia del módulo “ngResource” para poder utilizar el recurso $.

En el siguiente ejemplo, llamamos al módulo “ngResource” desde nuestra aplicación 'DemoApp'.

angular.module(DemoApp,['ngResource']); //DemoApp is our main module

Paso 3) Llamar a la función $resource() con su punto final REST, como se muestra en el siguiente ejemplo.

Si hace esto, el objeto $resource tendrá la capacidad de invocar la funcionalidad necesaria expuesta por los puntos finales REST.

El siguiente ejemplo llama al punto final. URL: http://example/events/1

angular.module('DemoApp.services').factory('Entry', function($resource) 
{
     return $resource('/example/Event/:1); // Note the full endpoint address
});

En el ejemplo anterior se están haciendo las siguientes cosas

  1. Al definir la aplicación Angular, se crea un servicio utilizando la declaración 'DemoApp.services' donde DemoApp es el nombre que se le da a nuestra aplicación Angular.
  2. El método .factory se utiliza para crear los detalles de este nuevo servicio.
  3. "Entrada" es el nombre que le damos a nuestro servicio, que puede ser cualquier nombre que desee proporcionar.
  4. En este servicio, estamos creando una función que llamará a la API $resource
  5. $resource('/example/Event/:1).La función $resource es un servicio que se utiliza para llamar a un punto final REST. El punto final REST normalmente es un URL. En la función anterior, estamos utilizando el URL (/example /Event/:1) como nuestro punto final REST. Nuestro punto final REST (/example /Event/:1) indica que hay una aplicación de eventos alojada en nuestro sitio principal “example”. Esta aplicación de eventos está desarrollada utilizando una arquitectura basada en REST.
  6. El resultado de la llamada a la función es un objeto de clase de recurso. El objeto de recurso ahora tendrá las funciones ( get() , query() , save() , remove(), delete() ) que se pueden invocar.

Paso 4) Ahora podemos usar los métodos que se devolvieron en el paso anterior (que son get(), query(), save(), remove(), delete()) en nuestro controlador.

En el siguiente fragmento de código, utilizamos la función get() como ejemplo

Veamos el código que puede utilizar la función get().

angular.module('DemoApp.controllers',[]);
angular.module('DemoApp.controllers').controller('DemoController',function($scope, MyFunction) {
  var obj = MyFunction.get({ 1: $scope.id }, function() {
    console.log(obj);
  });

En el paso anterior,

  • La función get() en el fragmento anterior emite una solicitud GET a / ejemplo /Event/:1.
  • El parámetro:1 en el URL se reemplaza con $scope.id.
  • La función get() devolverá un objeto vacío que se completa automáticamente cuando los datos reales provienen del servidor.
  • El segundo argumento para get() es una devolución de llamada que se ejecuta cuando los datos llegan del servidor. El posible resultado del código completo sería un objeto JSON que devolvería la lista de eventos expuestos en el sitio web de "ejemplo". A continuación se muestra un ejemplo de lo que se puede devolver. 
    {
{ 'EventName' : 'Angular , 'EventDescription' : 'Angular Basics'},
{ 'EventName' : 'Node , 'EventDescription' : 'Node Basics'},
{ 'EventName' : 'Programming in C++ , 'EventDescription' : 'C++ Basics'}

}

Interacciones del servidor de bajo nivel con $http

$http es otro servicio de Angular JS que se utiliza para leer datos de servidores remotos. La forma más popular de datos que se lee desde los servidores son los datos en formato JSON.

Supongamos que tenemos un PHP página ( http://example/angular/getTopics.PHP ) que devuelve los siguientes datos JSON

"Topics": [
  {
    "Name" : "Controllers",
    "Description" : "Controllers in action"
  },
  {
    "Name" : "Models",
    "Description" : "Binding data using Models"
  },
  {
    "Name" : "Directives",
    "Description" : "Using directives in Angular"
  }
]

Veamos el código AngularJS usando $http, que se puede usar para obtener los datos anteriores del servidor.

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example/angular/getTopics.PHP")
    .then(function(response) 
{
$scope.names = response.data.records;});
});
</script>

En el ejemplo anterior

  1. Estamos agregando el servicio $http a nuestra función Controlador para poder usar la función "obtener" del servicio $http.
  2. Ahora estamos utilizando la función get del servicio HTTP para obtener los objetos JSON del URL http://example /angular/getTopics.PHP
  3. Basado en el objeto 'respuesta', estamos creando una función de devolución de llamada que devolverá los registros de datos y posteriormente los almacenaremos en el objeto $scope.
  4. Luego podemos usar la variable $scope.names del controlador y usarla en nuestra vista para mostrar los objetos JSON en consecuencia.

Cómo obtener datos de SQL y MySQL Servidor usando AngularJS

Angular también se puede utilizar para recuperar datos de un servidor que ejecuta MySQL o SQL.

La idea es que si tienes una página PHP conectada a un MySQL base de datos o un asp.net página de conexión a una MS SQL base de datos del servidor, entonces debe asegurarse de que tanto la página PHP como la ASP.Net representen los datos en formato JSON.

A continuación se muestra el proceso paso a paso sobre cómo obtener datos de SQL y MySQL Servidor usando AngularJS.

Supongamos que tenemos un sitio PHP (http://example /angular/getTopics.PHP) entregando datos desde un MySQL o base de datos SQL.

Paso 1) Tomar datos de un MySQL base de datos de CRISPR Medicine News
El primer paso es asegurarse de que la página PHP tome los datos de un MySQL base de datos y sirve los datos en formato JSON.

Paso 2) Obtenga los datos JSON usando el servicio $http
Escriba el código similar que se muestra arriba para utilizar el servicio $http para obtener los datos JSON.

Veamos el código AngularJS usando $http que se puede usar para obtener los datos anteriores del servidor.

<script>
var app = angular.module('myApp', []);
app.controller('AngularCtrl', function($scope, $http) {
    $http.get("http://example /angular/getTopics.PHP")
    .then(function(response) 
{
	$scope.topics = response.data.records;});
});
</script>

Paso 3) Renderice datos en su vista usando el directiva ng-repetir

A continuación, utilizamos la directiva ng-repeat para revisar cada uno de los pares clave-valor en los objetos JSON devueltos por el método "get" del servicio $http.

Para cada objeto JSON, mostramos la clave que es "Nombre" y el valor es "Description".

<div ng-app="myApp" ng-controller="AngularCtrl"> 
<table>
  <tr ng-repeat="x in topics">
    <td>{{ x.Name }}</td>
    <td>{{ x.Description }}</td>
  </tr>
</table>
</div>

Resumen

  • La forma completa de AJAX es Asíncrono. JavaScript y XML.
  • Hemos echado un vistazo a lo que SOSEGADO La arquitectura es, no es nada más que una funcionalidad expuesta por las aplicaciones web basadas en los verbos HTTP normales de GET, POST, PUT y DELETE.
  • El objeto $resource se usa con Angular para interactuar con las aplicaciones web RESTFUL en un alto nivel, lo que significa que solo invocamos la funcionalidad expuesta por la aplicación web pero no nos preocupamos de cómo se implementa la funcionalidad.
  • También analizamos el servicio $http que se puede utilizar para obtener datos de una aplicación web. Esto es posible porque el servicio $http puede funcionar con aplicaciones web a un nivel más detallado.
  • Debido al poder del servicio $http, este puede usarse para obtener datos de un MySQL o MS SQL Server a través de una aplicación PHP. Luego, los datos se pueden representar en una tabla usando la directiva ng-repeat.

Resumir este post con: