XMLHttpRequest Object - La mejor explicacion

Interacting With The Web: The XMLHttpRequest Object


This article was written and submitted by an external developer.
The Google Desktop Team thanks Benjamin Schirmer for his time and expertise.

Benjamin Schirmer, Gadget Developer
October 2007




Introduction


As you've surely seen, Google Desktop gadgets are capable of delivering website content straight to the user's desktop. Whether gathering the latest news or the user's online data, these gadgets need a way to communicate over the Internet.
This is where the XMLHttpRequest object comes in. It allows you to easily establish a connection with a website to request or send information.
This article is an in-depth look at all the functionality that XMLHttpRequest provides.


The XMLHttpRequest Object


Before we start, you should be familiar with the attributes and methods of the XMLHttpRequest object:

Let's start with the attributes. They are mostly used to inquire the status of pending requests and the XMLHttpRequest object itself.
readyState
The readyState attribute tells you the state of the XMLHttpRequest object. The possible values for this attribute are:
  • 0 - The XMLHttpRequest object is uninitialized
  • 1 - open() was called successfully
  • 2 - The request was successfully sent
  • 3 - Currently receiving data
  • 4 - The request completed successfully
onreadystatechange
This attribute is meant to be set to a callback function. The function will be called whenever the readyState of the XMLHttpRequest object changes. If you are making a lengthy request, this function may be called multiple times with a readyState of 3. As soon as the call completes, the callback function will be called with a readyState of 4.
status
If the readyState of the XMLHttpRequest object is 3 (receiving) or 4 (loaded), this attribute will contain the HTTP status code for the request. For example, if the request finished successfully, this is usually 200.
statusText
Similar to the status attribute, but it will contain the current HTTP status text. For example, status code 404 usually responds with "Not Found" and 200 returns "OK".
responseXML
If the server responded with a document in the XML format, you can use the responseXML attribute to parse the XML document tree. Check out the Simple XML Parsing article if you need help parsing XML.
responseText
The responseText attribute is a string containing the entire document returned by the request.
responseStream
If you are requesting binary data, then the responseStream attribute contains the response data in a binary stream.


The XMLHttpRequest object provides a few powerful methods for managing requests.
One of the most important methods is open(), which initializes the XMLHttpRequest object.
The parameters you send to this method are essential for controlling the behavior of the XMLHttpRequest object.


The open() method has a total of 5 parameters, but only the first two are required.


HTTP Authentication


Figure 1: HTTP Authentication in Firefox

request method (required)
The first parameter is the HTTP method you want to use for the request. The most common ones are "GET" or "POST", but other methods exist such as "HEAD", "PUT", or "DELETE".
complete URI (required)
The second parameter is the complete URI to the page where the request is sent. You can not use a relative path. This URI must be absolute and must be resolvable.
asynchronous (optional)
This is an optional boolean parameter. If you set this parameter to true, the request is asynchronous and will not block. If false, the request will be synchronous and will not return until it completes.
username (optional)
If the webpage uses HTTP Authentication (Figure 1), you use this parameter to provide the username credential.
password (optional)
The password parameter is usually used together with the username parameter for HTTP Authentication (Figure 1). It provides the password credential to the page.

The send() method executes the request. It accepts one optional parameter, which can be a string or a document object. The parameter is only necessary when you want to transmit information in the request, which is usually the case for POST or PUT requests. The structure of this transmitted data varies based on the selected HTTP request method. There will be an example of this later on.

If you are using a synchronous request, the send() method returns only after the request completes. This may freeze your gadget if a request takes too long. You should always try to use an asynchronous request.

If your request requires special headers, you can set them using the setRequestHeader method. This method has two required parameters. The first one is the name of the HTTP header, and the second parameter is the value.

req.setRequestHeader("content-type", "text/xml");



When your request has finished, you can read the response headers in addition to the content of the document. To access the headers, you can use getAllResponseHeaders(), which returns all the headers in one string. Another method, getResponseHeader(), allows you to request the content for a specific header:
var contentType = req.getRequestHeader("content-type");


The XMLHttpRequest object also provides an abort() method. You can use this method to cancel a request.


abort() can only be used in asynchronous requests (remember a synchronous request blocks).


Creating Synchronous Requests


You now should be familiar with all the attributes and methods the XMLHttpRequest object provides, but how do you use them? This section will show you how to create simple, synchronous requests using the XMLHttpRequest object. Let's start with a very basic request:

var req = new XMLHttpRequest();
req.open("GET", "http://www.google.com/webhp", false);  // The last parameter determines whether the request is asynchronous.
req.send();

if (req.status == 200) {
  gadget.debug.trace("Google Webpage Loaded");
}

Example 1: Basic synchronous GET request

This small example doesn't do much. It opens a connection to http://www.google.com/webhp and loads the webpage.
If it finishes correctly, it displays the text "Google Webpage Loaded" in the debug console of the Google Desktop Gadget Designer.
Now let's add a query parameter to our request.
The Google website uses the parameter q for the search query. We send a query for "google desktop gadgets":

var query = "google desktop gadgets";
var req = new XMLHttpRequest();
req.open("GET", "http://www.google.com/webhp?hl=en&q="+escape(query), false);
req.send();

if (req.status == 200) {
  gadget.debug.trace("Search Completed");
}
Example 2: Synchronous GET request with parameters

Since this is a GET request, the parameters are appended to the URL. For URL escaping, we pass the query value through the JavaScript escape function.
When the request completes, the gadget shows the response text in the debug console.
I have also added a parameter to specify English language content.
As you can see, the first parameter is delimited with a ?, while additional parameters are separated by &.
Keep in mind that there is a restriction on the length of the URI. If you want to submit significant amounts of data, you must use a POST request.
Let's pretend Google accepts the POST method. The request would look like this:



var query = "google desktop gadgets";
var req = new XMLHttpRequest();
req.open("POST", "http://www.google.com/webhp", false);
req.send("&hl=en&q="+escape(query));

if (req.status == 200) {
  gadget.debug.trace("Search Completed");
}
Example 3: Synchronous POST request with parameters

As promised earlier, this is an example of the send() method with post data.
To assemble the data, you just create a string combining all the "key=value" pairs using an &.
There is usually no limit to the length of the post string. You can even use it to transmit lengthy blog posts or computer files.
Your only limiting factor is time, as a large upload might take a long while.
If the request is synchronous, execution will halt until the request completes. To state the obvious, this would greatly impact the usability of your gadget.
This is where asynchronous requests come in.


Creating Asynchronous Requests


XMLHttpRequest Diagram


Figure 2: Synchronous and Asynchronous Requests

Asynchronous requests, as you probably figured out by now, do not stop the code execution.
Figure 2 shows a sequence diagram. The top sequence is of a synchronous request while the lower one demonstrates an asynchronous request.
In the synchronous example, the requestData() function runs until send() has completely finished and returned.
For an asynchronous request, the requestData() method returns immediately after the request is sent out.
The XMLHttpRequest object will then notify the callback function assigned to onreadystatechange whenever the state of the request changes. It thereby notifies us as soon as our request is completed (when the readyState is 4 - remember?)

For a very basic asynchronous example we create a new request based on Example 1.

var req = new XMLHttpRequest();
req.open("GET", "http://www.google.com/webhp", true);
req.onreadystatechange = function() {
    if (req.readyState == 4) {
      if (req.status == 200) {
        gadget.debug.trace("Google Webpage Loaded");
      }
    }
  };
req.send();
Example 4: Basic asynchronous GET request


How To Use The Response Data


In Example 4 we have assigned an anonymous function to the onreadystatechange attribute. This function will be called whenever the readyState changes.
We first check if the readyState is indeed 4, indicating that the request has loaded. Then we check if the status is "OK" (status code 200).
In this very basic example, we display a trace message in the debug log.

Let's send out a request to Google and count how many results a query returns.

function sendRequest() {
  var req = new XMLHttpRequest();
  req.open("GET", "http://www.google.com/search?hl=en&q=benjamin+schirmer", true);
  req.onreadystatechange = function() {
      if (req.readyState == 4) {
        if (req.status == 200) {
          printResultCount( req.responseText );
        }
      }
    };
  req.send();
}

function printResultCount(data) {
  var str = data.match(/of about <b>(.+?)<\/b> for <b>(.+?)<\/b>/i);
  gadget.debug.trace( str[1]+" results found" );
}

Example 5: Asynchronous GET request to Google which displays result count

Since responseText is a regular string object, you can use all the usual JavaScript string functions.
Using the responseText attribute is only one of several ways to
access the response data. If the request was made to XML data, such as an RSS
or ATOM feed, you can use the Simple XML Parser to parse the data into JavaScript objects.

Another alternative is responseStream, which holds the binary data of the request. This is useful when loading binary files such as images.


Use Scenario: Loading Image With ResponseStream


Using responseStream to load an image is very simple.

function ajaxPicture(url)
{
  var req = new XMLHttpRequest();
  req.open("GET", url, false); 
  req.send(null);
  if(req.status == 200) {
    return req.responseStream;
  }
}
Example 6: Function to load the image from an URL

The function ajaxPicture() creates a GET request to the specified URL and returns the responseStream. To use this function, we call it with the URL of our image and assign the returned image to the src attribute of our image.

image.src = ajaxPicture( "http://www.google.com/intl/en_ALL/images/logo.gif" );



Extended Use Scenario: Uploading Files


Another use case for the XMLHttpRequest object is uploading a file to a website.
This is a bit more complex since it requires custom request headers and a specially formatted post string.
Let's tackle this step by step.

The very first helper function loads a file into a string. This example works with a text file, so we can get by with the filesystem object.

function loadFile( filename ) {
  var fp = system.filesystem.OpenTextFile( filename, 1, false);
  var s = fp.ReadAll();
  fp.close();
  return s;
}


The next routine is called uploadFile and has two parameters: the URL of the page that receives the upload and the complete path to the local file.

function uploadFile( url, filename ) {
  var boundaryString = "AaBbCcX30";
  var boundary = "--"+boundaryString;

  var fileData = loadFile( filename );

  var postContent = "\r\n"+boundary+"\r\n"+
          "Content-Disposition: form-data; name=\"comment\"\r\n"+
          "\r\n"+
          "Comment is another input\r\n"+
          boundary+"\r\n"+
          "Content-Disposition: file; name=\"uploadedfile\"; filename=\"test.txt\"\r\n"+
          "Content-Type: text/plain\r\n"+
          "\r\n"+
          "%FILECONTENT%\r\n"+
          boundary+"\r\n";
  postContent = postContent.replace("%FILECONTENT%", fileData);
  gadget.debug.trace( postContent );

  var req = new XMLHttpRequest();
  req.open("POST", url, true); 
  req.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundaryString);
  req.onreadystatechange = function() {
    gadget.debug.trace("ReadyState: "+req.readyState);
    if (req.readyState == 4) {
      if (req.status == 200) {
        gadget.debug.trace( req.responseText );
      }
    }
  };
  req.send(postContent);
}
Example 7: Uploading a text file to a server

The uploadFile method first assembles the boundary string. This string will be used to separate the post string into different sections.
Our example will create a post string containing a comment field and the content of the uploaded file.
Notice I used a placeholder called %FILECONTENT%, which is later filled using JavaScript's replace.
The boundary string is also sent and indicated to the server in the content-type header. This header specifies the content type of the data. In our case it is multipart/form-data as that is the standard for file uploads on the Web. If you were to send an XML file, the content type would be text/xml.



Conclusion


As you can see, the XMLHttpRequest object is a very useful and versatile tool. You can use it to retrieve simple information from the Web or to perform complex tasks such as file uploads or SOAP communication.
I hope this article has helped you in understanding how the XMLHttpRequest object works.


Author Bio


Benjamin Schirmer
Benjamin Schirmer holds a diploma in engineering from Albstadt-Sigmaringen University and is an enthusiastic gadget programmer.
He loves to explore new technologies. In his spare time, he likes watching movies, TV series,
and going out with his friends. In the future, he wants to be a Googler himself. You can visit
his gadgets page for a list of all his cool
Google Desktop gadgets.

_________________________
ESPAÑOL
_________________________
Interacción con la Web: El objeto XMLHttpRequest
Este artículo fue escrito y presentado por un desarrollador externo.El equipo de Google Desktop gracias Benjamin Schirmer por su tiempo y experiencia.
Benjamin Schirmer, Programador de gadgetsOctubre 2007

    
* Introducción
    
* El objeto XMLHttpRequest
    
* Creación de solicitudes sincrónicas
    
* Creación de solicitudes asincrónicas
    
* Cómo utilizar los datos de respuesta
    
* Utilice Escenario: Cargando Imagen Con ResponseStream
    
* Escenario de uso extendido: Carga de archivos
    
* Conclusión
    
* Autor Bio

Introducción

Como seguramente usted ha visto, gadgets de Google Desktop son capaces de entregar contenido del sitio Web directamente en el escritorio del usuario. Si encuentro las últimas noticias o datos en línea del usuario, estos aparatos necesitan una manera de comunicarse a través de Internet.Aquí es donde el objeto XMLHttpRequest entra en juego le permite establecer fácilmente una conexión con un sitio web para solicitar o enviar información.Este artículo es una mirada en profundidad a todas las funcionalidades que proporciona XMLHttpRequest.

El objeto XMLHttpRequest

Antes de empezar, debe estar familiarizado con los atributos y los métodos del objeto XMLHttpRequest:

Vamos a empezar con los atributos. Se utilizan principalmente para consultar el estado de las solicitudes pendientes y el propio objeto XMLHttpRequest.
readyState

    
El atributo readyState le indica el estado del objeto XMLHttpRequest. Los valores posibles para este atributo son:

        
* 0 - El objeto XMLHttpRequest es sin inicializar
        
* 1 - open () se realiza correctamente
        
* 2 - La solicitud se ha enviado correctamente
        
* 3 - En la actualidad la recepción de datos
        
* 4 - La solicitud completado con éxito
onreadystatechange

    
Este atributo se entiende que se define como una función de devolución de llamada. La función será llamada cada vez que el readyState de los cambios objeto XMLHttpRequest. Si usted está haciendo una petición larga, esta función se puede llamar varias veces con un readyState de 3. Tan pronto como la llamada se completa, la función de devolución de llamada se llama con un readyState de 4.estado

    
Si el readyState del objeto XMLHttpRequest es de 3 (recibiendo) o 4 (carga), este atributo contendrá el código de estado HTTP de la solicitud. Por ejemplo, si la solicitud ha finalizado correctamente, esto es por lo general 200.statusText

    
Al igual que el atributo de estado, sino que contendrá el texto actual de estado HTTP. Por ejemplo, el código de estado 404 por lo general responde con "Not Found" y 200 devuelve "OK".responseXML

    
Si el servidor responde con un documento en el formato XML, puede utilizar el atributo responseXML para analizar la estructura del documento XML. Echa un vistazo a la simple artículo de análisis de XML si necesita ayuda para analizar XML.responseText

    
El atributo responseText es una cadena que contiene todo el documento devuelto por la solicitud.responseStream

    
Si usted está solicitando datos binarios, el atributo responseStream contiene los datos de respuesta en una secuencia binaria.


El objeto XMLHttpRequest proporciona una poderosa algunos métodos para la gestión de las solicitudes.
Uno de los métodos más importantes está abierta (), que inicializa el objeto XMLHttpRequest.Los parámetros que envíe a este método son esenciales para controlar el comportamiento del objeto XMLHttpRequest.

El método open () dispone de un total de 5 parámetros, pero sólo los dos primeros son obligatorios.

Autenticación HTTP


Figura 1: autenticación HTTP en Firefox

método de solicitud (se requiere)

    
El primer parámetro es el método HTTP que desea utilizar para la solicitud. Los más comunes son "GET" o "POST", pero existen otros métodos como la "cabeza", "PUT", o "BORRAR".URI completo (requerido)

    
El segundo parámetro es el URI completo a la página donde se envía la solicitud. No se puede utilizar una ruta relativa. Este URI debe ser absoluta y debe resolver.asíncrono (opcional)

    
Este es un parámetro booleano opcional. Si establece este parámetro en true, la petición es asíncrona y no se bloqueará. Si es false, la petición será síncrona y no volverá hasta que se complete.nombre de usuario (opcional)

    
Si la página web utiliza autenticación HTTP (Figura 1), se utiliza este parámetro para proporcionar la credencial de usuario.contraseña (opcional)

    
La contraseña se utiliza generalmente junto con el parámetro nombre de usuario para autenticación HTTP (Figura 1). Proporciona la contraseña de las credenciales a la página.

El método send () ejecuta la solicitud. Acepta un parámetro opcional, que puede ser una cadena o un objeto de documento. El parámetro sólo es necesario cuando se desea transmitir información en la solicitud, que suele ser el caso de las solicitudes POST o PUT. La estructura de estos datos de transmisión varía según el método de petición HTTP seleccionada. Habrá un ejemplo de esto más adelante.

Si está utilizando una solicitud sincrónica, el método send () devuelve sólo después de la solicitud completa. Esto puede congelar el gadget, si una solicitud tarda demasiado tiempo. Usted siempre debe tratar de usar una solicitud asincrónica.

Si su solicitud requiere encabezados especial, usted puede configurar utilizando el método setRequestHeader. Este método tiene dos parámetros requeridos. El primero es el nombre del encabezado HTTP, y el segundo parámetro es el valor.
req.setRequestHeader ("Content-Type", "text / xml");



Cuando su solicitud haya terminado, usted puede leer los encabezados de respuesta, además del contenido del documento. Para acceder a los encabezados, puede utilizar getAllResponseHeaders (), que devuelve todas las cabeceras en una cadena. Otro método, getResponseHeader (), le permite solicitar el contenido de un encabezado específico:
contentType var = req.getRequestHeader ("Content-Type");


El objeto XMLHttpRequest también proporciona un aborto () método. Puede utilizar este método para cancelar una solicitud.

abort () sólo puede ser utilizado para las consultas asincrónicas (recuerde cuadras solicitud sincrónica).

Creación de solicitudes sincrónicas

Ahora debe estar familiarizado con todos los atributos y los métodos del objeto XMLHttpRequest proporciona, pero ¿cómo se utilizan? Esta sección le mostrará cómo crear las solicitudes simples, sincrónicos con el objeto XMLHttpRequest. Vamos a empezar con una petición muy básicos:

var req = new XMLHttpRequest ();req.open ("GET", "http://www.google.com/webhp", false); / / El último parámetro determina si la petición es asíncrona.req.send ();
if (req.status == 200) {
  
gadget.debug.trace ("Google Página web Loaded");}

Ejemplo 1: Básica sincrónica solicitud GET

Este pequeño ejemplo no hace mucho. Se abre una conexión con http://www.google.com/webhp y carga la página web.Si termina correctamente, se muestra el texto "Google Cargado página web" en la consola de depuración del Diseñador de gadgets de Google Desktop.Ahora vamos a añadir un parámetro de consulta a nuestra solicitud.El sitio web de Google utiliza el parámetro q para la consulta de búsqueda. Enviamos una consulta para "gadgets de escritorio Google":

var query = "gadgets de Google Desktop";var req = new XMLHttpRequest ();req.open ("GET", "http://www.google.com/webhp?hl=en&q =" + escape (consulta), false);req.send ();
if (req.status == 200) {
  
gadget.debug.trace ("Búsqueda efectuada");}
Ejemplo 2: síncronas solicitud GET con los parámetros

Como se trata de una petición GET, los parámetros se añaden a la URL. Para escapar de URL, se pasa el valor de la consulta a través de la función de escape de JavaScript.Cuando la solicitud completa, el gadget muestra el texto de respuesta en la consola de depuración.También he añadido un parámetro para especificar el contenido de idioma Inglés.Como puede ver, el primer parámetro está delimitado con una?, Mientras que otros parámetros se separan por &.Tenga en cuenta que existe una restricción de la longitud de la URI. Si desea enviar grandes cantidades de datos, debe utilizar una petición POST.Google pretende Vamos acepta el método POST. La solicitud se vería así:


var query = "gadgets de Google Desktop";var req = new XMLHttpRequest ();req.open ("POST", "http://www.google.com/webhp", false);req.send ("& hl = es & q =" + escape (consulta));
if (req.status == 200) {
  
gadget.debug.trace ("Búsqueda efectuada");}
Ejemplo 3: síncronas petición POST con los parámetros

Como había prometido antes, este es un ejemplo de la método send () con datos post.Para reunir los datos, que acaba de crear una cadena de combinar todas las "clave = valor" pares utilizando un &.Generalmente no hay límite a la longitud de la cadena de correos. Usted puede incluso utilizarlo para transmitir mensajes largos blog o archivos informáticos.Su único factor limitante es el tiempo, como una gran carga podría tomar un tiempo largo.Si la petición es síncrona, la ejecución se detendrá hasta que la solicitud completa. Para decir lo obvio, esto sería de gran impacto en la usabilidad de tu gadget.Aquí es donde viene pulg solicitudes asincrónicas

Pide la creación asincrónica

Diagrama XMLHttpRequest


Figura 2: Las solicitudes sincrónicas y asincrónicas

peticiones asíncronas, como probablemente descubierto por ahora, no detener la ejecución de código.La figura 2 muestra un diagrama de secuencia. La secuencia de arriba es de una solicitud sincrónica, mientras que la inferior muestra una solicitud asincrónica.En el ejemplo sincrónica, el RequestData () la función se ejecuta hasta que send () ha terminado completamente y regresó.Para obtener una solicitud asincrónica, el RequestData () devuelve inmediatamente después de la solicitud se envía.El objeto XMLHttpRequest continuación, notificará a la función de devolución de llamada asignado a onreadystatechange cada vez que el estado de la solicitud de cambios. Es lo que nos notifique lo antes nuestra petición se ha completado (cuando el readyState es 4 -? Recordar)

Para ver un ejemplo muy básico asincrónica creamos una nueva solicitud basada en el ejemplo 1.

var req = new XMLHttpRequest ();req.open ("GET", "http://www.google.com/webhp", true);req.onreadystatechange = function () {
    
if (req.readyState == 4) {
      
if (req.status == 200) {
        
gadget.debug.trace ("Google Página web Loaded");
      
}
    
}
  
};req.send ();
Ejemplo 4: Básico asincrónica solicitud GET

Cómo utilizar Los datos de respuesta

En el Ejemplo 4 se ha asignado una función anónima al atributo onreadystatechange. Esta función se llamará cada vez que cambia readyState.En primer lugar, comprobar si el readyState es de hecho 4, indicando que la solicitud se ha cargado. Luego comprobamos si el estado es "OK" (código de estado 200).En este ejemplo muy básico, se muestra un mensaje de seguimiento en el registro de depuración.

Vamos a enviar una solicitud a Google y el recuento de los resultados de cómo muchos devuelve la consulta.

ma's sendRequest function () {
  
var req = new XMLHttpRequest ();
  
req.open ("GET", "http://www.google.com/search?hl=en&q=benjamin+schirmer", true);
  
req.onreadystatechange = function () {
      
if (req.readyState == 4) {
        
if (req.status == 200) {
          
printResultCount (req.responseText);
        
}
      
}
    
};
  
req.send ();}
printResultCount función (de datos) {
  
var str = data.match (/ de unos (.+?)< \ / b> para (.+?)< \ / b> / i);
  
gadget.debug.trace (str [1] + "resultados");}

Ejemplo 5: Asíncrono solicitud GET a Google que muestra conteo resultado

Desde responseText es un objeto de cadena regular, usted puede utilizar todas las funciones habituales cadena de JavaScript.Usando el atributo responseText es sólo una de varias manerasacceder a los datos de la respuesta. Si la solicitud se hizo a los datos XML, como una fuente RSSo Atom, puede utilizar el simple XML Parser para analizar los datos en objetos JavaScript.

Otra alternativa es responseStream, que contiene los datos binarios de la solicitud. Esto es útil cuando se cargan archivos binarios como imágenes.

Escenario de uso: Imagen de carga con ResponseStream

Usando responseStream para cargar una imagen es muy simple.

ajaxPicture función (url){
  
var req = new XMLHttpRequest ();
  
req.open ("GET", url, false);
  
req.send (null);
  
if (req.status == 200) {
    
volver req.responseStream;
  
}}
Ejemplo 6: Función para cargar la imagen desde una URL

El ajaxPicture function () crea una solicitud GET a la URL especificada y devuelve el responseStream. Para utilizar esta función, lo llamamos con la dirección de nuestra imagen y asignar la imagen regresó al atributo src de nuestra imagen.

image.src = ajaxPicture ("http://www.google.com/intl/en_ALL/images/logo.gif");


Escenario extendido uso: Carga de archivos

Otro caso de uso para el objeto XMLHttpRequest es subir un archivo a un sitio web.Esto es un poco más complejo ya que requiere encabezados personalizados petición y una cadena de mensaje con formato especial.Vamos a hacer frente a este paso a paso.

La primera carga de ayuda la función de un archivo en una cadena. En este ejemplo se trabaja con un archivo de texto, por lo que puede pasar con el objeto de sistema de archivos.

loadFile función (nombre) {
  
fp = var system.filesystem.OpenTextFile (nombre de archivo, 1, false);
  
var s = fp.ReadAll ();
  
fp.close ();
  
retorno s;}


La rutina del día, se llama UploadFile y tiene dos parámetros: la URL de la página que recibe la carga y la ruta completa al archivo local.

UploadFile función (URL, nombre de archivo) {
  
boundaryString var = "AaBbCcX30";
  
límite var = "--"+ boundaryString;

  
fileData var = loadFile (nombre de archivo);

  
postContent var = "\ r \ n" + frontera + "\ r \ n" +
          
"Content-Disposition: form-data; nombre = \" comentario \ "\ r \ n" +
          
"\ R \ n" +
          
"Comentario es otra entrada \ r \ n" +
          
límite + "\ r \ n" +
          
"Content-Disposition: archivo, nombre = \" uploadedfile \ ", nombre de archivo = \" prueba.txt \ "\ r \ n" +
          
"Content-Type: / texto \ r \ n" +
          
"\ R \ n" +
          
"%% FileContent \ r \ n" +
          
límite + "\ r \ n";
  
postContent = postContent.replace ("% FileContent%", fileData);
  
gadget.debug.trace (postContent);

  
var req = new XMLHttpRequest ();
  
req.open ("POST", url, true);
  
req.setRequestHeader ("Content-Type", "multipart / form-data; boundary =" + boundaryString);
  
req.onreadystatechange = function () {
    
gadget.debug.trace ("ReadyState:" + req.readyState);
    
if (req.readyState == 4) {
      
if (req.status == 200) {
        
gadget.debug.trace (req.responseText);
      
}
    
}
  
};
  
req.send (postContent);}
Ejemplo 7: Carga de un archivo de texto a un servidor

El método UploadFile primera monta la cadena de frontera. Esta cadena se utiliza para separar la cadena de mensaje en diferentes secciones.Nuestro ejemplo va a crear una cadena de mensaje que contiene un campo de comentarios y el contenido del archivo cargado.Que he empleado un marcador de posición llamada FileContent%%, que luego se llena con JavaScript de reemplazar.La cadena de frontera también se envía y se indica al servidor en el encabezado Content-Type. Este encabezado indica el tipo de contenido de los datos. En nuestro caso es multipart / form-data ya que es el estándar para la carga de archivos en la Web. Si usted fuera a enviar un archivo XML, el tipo de contenido se text / xml.

Conclusión

Como puede ver, el objeto XMLHttpRequest es una herramienta muy útil y versátil. Se puede utilizar para recuperar información sencilla desde la web o para realizar tareas complejas, tales como envío de archivos o la comunicación SOAP.Espero que este artículo te ha ayudado a entender cómo funciona el objeto XMLHttpRequest.

Biografía del autor

Benjamin Schirmer
Benjamin Schirmer posee un diploma en ingeniería de la Universidad Albstadt-Sigmaringen y es un gadget del programador entusiasta.Le encanta explorar nuevas tecnologías. En su tiempo libre, le gusta ver películas, series de televisión,y salir con sus amigos. En el futuro, que quiere ser él mismo un Googler. Usted puede visitarsus aparatos de página para una lista de todos sus frescosGoogle Desktop gadgets.

1 pensamientos:

Post a Comment

feedback!