tiene - ¿Solicitud HTTP GET en JavaScript?

el sushi se come frio

Question

Necesito hacer una solicitud HTTP GET en JavaScript. ¿Cuál es la mejor manera de hacer eso?

Necesito hacer esto en un widget de dashcode de Mac OS X.

Answer 1

Aquí está el código para hacerlo directamente con JavaScript. Pero, como se mencionó anteriormente, estarías mucho mejor con una biblioteca de JavaScript. Mi favorito es jQuery.

En el caso a continuación, se llama a una página ASPX (que funciona como servicio REST de un hombre pobre) para devolver un objeto JSON de JavaScript.

var xmlHttp = null;

function GetCustomerInfo()
{
    var CustomerNumber = document.getElementById( "TextBoxCustomerNumber" ).value;
    var Url = "GetCustomerInfoAsJson.aspx?number=" + CustomerNumber;

    xmlHttp = new XMLHttpRequest(); 
    xmlHttp.onreadystatechange = ProcessRequest;
    xmlHttp.open( "GET", Url, true );
    xmlHttp.send( null );
}

function ProcessRequest() 
{
    if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) 
    {
        if ( xmlHttp.responseText == "Not found" ) 
        {
            document.getElementById( "TextBoxCustomerName"    ).value = "Not found";
            document.getElementById( "TextBoxCustomerAddress" ).value = "";
        }
        else
        {
            var info = eval ( "(" + xmlHttp.responseText + ")" );

            // No parsing necessary with JSON!        
            document.getElementById( "TextBoxCustomerName"    ).value = info.jsonData[ 0 ].cmname;
            document.getElementById( "TextBoxCustomerAddress" ).value = info.jsonData[ 0 ].cmaddr1;
        }                    
    }
}

Answer 2

El nuevo window.fetch API es un reemplazo más limpio para XMLHttpRequest que hace uso de las promesas de ES6. Hay una buena explicación here , pero se reduce a (del artículo):

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function() {
  console.log("Booo");
});

El soporte del navegador ahora es bueno en las últimas versiones (funciona en Chrome, Firefox, Edge (v14), Safari (v10.1), Opera, Safari iOS (v10.3), navegador de Android y Chrome para Android), sin embargo, IE Es probable que no obtenga apoyo oficial. GitHub tiene un polyfill disponible que se recomienda para que sea compatible con los navegadores más antiguos que todavía están en uso (especialmente las versiones de Safari antes de marzo de 2017 y los navegadores móviles del mismo período).

Supongo que si esto es más conveniente que jQuery o XMLHttpRequest o no depende de la naturaleza del proyecto.

Aquí hay un enlace a la especificación https://fetch.spec.whatwg.org/

Editar :

Usando ES7 async / await, esto se convierte en simple (basado en este Gist ):

async function fetchAsync (url) {
  let response = await fetch(url);
  let data = await response.json();
  return data;
}

Answer 3

En el archivo Info.plist de su widget, no olvide establecer su clave AllowNetworkAccess en true.

Answer 4

IE almacenará en caché las URL para que la carga sea más rápida, pero si, por ejemplo, está encuestando un servidor a intervalos tratando de obtener nueva información, IE almacenará en caché esa URL y probablemente devolverá el mismo conjunto de datos que siempre ha tenido.

Independientemente de cómo termine haciendo su solicitud GET (JavaScript de vainilla, Prototype, jQuery, etc.), asegúrese de poner un mecanismo para combatir el almacenamiento en caché. Para combatir eso, agregue un token único al final de la URL que va a golpear. Esto se puede hacer por:

var sURL = ''/your/url.html?'' + (new Date()).getTime();

Esto agregará una marca de tiempo única al final de la URL y evitará que ocurra cualquier almacenamiento en caché.

Answer 5

La mejor manera es usar AJAX (puede encontrar un tutorial sencillo en esta página Tizag ). La razón es que cualquier otra técnica que pueda usar requiere más código, no se garantiza que funcione en varios navegadores sin necesidad de volver a trabajar y requiere que use más memoria del cliente abriendo páginas ocultas dentro de cuadros que pasan urls analizando sus datos y cerrándolos. AJAX es el camino a seguir en esta situación. Que mis dos años de desarrollo pesado javascript hablando.

Answer 6

Muchos consejos excelentes anteriormente, pero no muy reutilizables, y con demasiada frecuencia están llenos de tonterías de DOM y otras cosas que ocultan el código fácil.

Aquí hay una clase de Javascript que creamos que es reutilizable y fácil de usar. Actualmente solo tiene un método GET, pero eso funciona para nosotros. Agregar un POST no debería gravar las habilidades de nadie.

var HttpClient = function() {
    this.get = function(aUrl, aCallback) {
        var anHttpRequest = new XMLHttpRequest();
        anHttpRequest.onreadystatechange = function() { 
            if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
                aCallback(anHttpRequest.responseText);
        }

        anHttpRequest.open( "GET", aUrl, true );            
        anHttpRequest.send( null );
    }
}

Usarlo es tan fácil como:

var client = new HttpClient();
client.get(''http://some/thing?with=arguments'', function(response) {
    // do something with response
});

Answer 7

No estoy familiarizado con los Widgets de Dashcode de Mac OS, pero si te permiten usar bibliotecas de JavaScript y admiten XMLHttpRequests , usaría jQuery y haría algo como esto:

var page_content;
$.get( "somepage.php", function(data){
    page_content = data;
});

Answer 8

Para actualizar la mejor respuesta de joann con la promesa, este es mi código:

let httpRequestAsync = (method, url) => {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = function () {
            if (xhr.status == 200) {
                resolve(xhr.responseText);
            }
            else {
                reject(new Error(xhr.responseText));
            }
        };
        xhr.send();
    });
}

Answer 9

Para aquellos que usan AngularJs , es $http.get :

$http.get(''/someUrl'').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

Answer 10

Para hacer esto, Fetch API es el enfoque recomendado, utilizando promesas de JavaScript. XMLHttpRequest (XHR), objeto IFrame o etiquetas dinámicas son enfoques más antiguos (y más complejos).

<script type=“text/javascript”> 
    // Create request object 
    var request = new Request(''https://example.com/api/...'', 
         { method: ''POST'', 
           body: {''name'': ''Klaus''}, 
           headers: new Headers({ ''Content-Type'': ''application/json'' }) 
         });
    // Now use it! 

   fetch(request) 
   .then(resp => { 
         // handle response }) 
   .catch(err => { 
         // handle errors 
    }); </script>

Aquí hay una gran demo y documentos de MDN.

Answer 11

Puede obtener una solicitud HTTP GET de dos maneras:

1. Este enfoque basado en el formato xml. Tienes que pasar la URL para la solicitud.

   xmlhttp.open("GET","URL",true);
   xmlhttp.send();

2. Este está basado en jQuery. Debe especificar la URL y el nombre de función al que desea llamar.

   $("btn").click(function() {
     $.ajax({url: "demo_test.txt", success: function_name(result) {
       $("#innerdiv").html(result);
     }});
   }); 

Answer 12

Puede utilizar las funciones proporcionadas por el entorno de alojamiento a través de javascript:

function httpGet(theUrl)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

Sin embargo, las solicitudes síncronas no se recomiendan, por lo que es posible que desee utilizar esto en su lugar:

function httpGetAsync(theUrl, callback)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null);
}

Nota: A partir de Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), las solicitudes síncronas en el hilo principal han quedado en desuso debido a los efectos negativos para la experiencia del usuario.

Answer 13

Puedes hacerlo con JS puro también:

// Create the XHR object.
function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// XHR for Chrome/Firefox/Opera/Safari.
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// XDomainRequest for IE.
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// CORS not supported.
xhr = null;
}
return xhr;
}

// Make the actual CORS request.
function makeCorsRequest() {
 // This is a sample server that supports CORS.
 var url = ''http://html5rocks-cors.s3-website-us-east-1.amazonaws.com/index.html'';

var xhr = createCORSRequest(''GET'', url);
if (!xhr) {
alert(''CORS not supported'');
return;
}

// Response handlers.
xhr.onload = function() {
var text = xhr.responseText;
alert(''Response from CORS request to '' + url + '': '' + text);
};

xhr.onerror = function() {
alert(''Woops, there was an error making the request.'');
};

xhr.send();
}

Ver: para más detalles: tutorial html5rocks

Answer 14

Si desea usar el código para un widget de Dashboard, y no desea incluir una biblioteca de JavaScript en cada widget que creó, entonces puede usar el objeto XMLHttpRequest que Safari admite de forma nativa.

Según lo informado por Andrew Hedges, un widget no tiene acceso a una red, de forma predeterminada; necesita cambiar esa configuración en la lista de información asociada con el widget.

Answer 15

Una solución compatible con navegadores antiguos:

function httpRequest() {
    var ajax = null,
        response = null,
        self = this;

    this.method = null;
    this.url = null;
    this.async = true;
    this.data = null;

    this.send = function() {
        ajax.open(this.method, this.url, this.asnyc);
        ajax.send(this.data);
    };

    if(window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
    }
    else if(window.ActiveXObject) {
        try {
            ajax = new ActiveXObject("Msxml2.XMLHTTP.6.0");
        }
        catch(e) {
            try {
                ajax = new ActiveXObject("Msxml2.XMLHTTP.3.0");
            }
            catch(error) {
                self.fail("not supported");
            }
        }
    }

    if(ajax == null) {
        return false;
    }

    ajax.onreadystatechange = function() {
        if(this.readyState == 4) {
            if(this.status == 200) {
                self.success(this.responseText);
            }
            else {
                self.fail(this.status + " - " + this.statusText);
            }
        }
    };
}

Tal vez un poco exagerado, pero definitivamente estás a salvo con este código.

Uso:

//create request with its porperties
var request = new httpRequest();
request.method = "GET";
request.url = "https://example.com/api?parameter=value";

//create callback for success containing the response
request.success = function(response) {
    console.log(response);
};

//and a fail callback containing the error
request.fail = function(error) {
    console.log(error);
};

//and finally send it away
request.send();

Answer 16

Una versión lista para copiar y pegar

var request = new XMLHttpRequest();
request.onreadystatechange = function() {
    if (request.readyState === 4) {
        if (request.status === 200) {
            document.body.className = ''ok'';
            console.log(request.responseText);
        } else if (!isValid(this.response) && this.status == 0) {
            document.body.className = ''error offline'';
            console.log("The computer appears to be offline.");                
        } else {
            document.body.className = ''error'';
        }
    }
};
request.open("GET", url , true);
request.send(null);

Answer 17

Una versión sin devolución de llamada.

var i = document.createElement("img");
i.src = "/your/GET/url?params=here";

Answer 18

En jQuery :

$.get(
    "somepage.php",
    {paramOne : 1, paramX : ''abc''},
    function(data) {
       alert(''page content: '' + data);
    }
);

Answer 19

Ajax

Lo mejor sería usar una biblioteca como Prototype o jQuery .

Answer 20

Prototipo lo hace muerto simple

new Ajax.Request( ''/myurl'', {
  method:  ''get'',
  parameters:  { ''param1'': ''value1''},
  onSuccess:  function(response){
    alert(response.responseText);
  },
  onFailure:  function(){
    alert(''ERROR'');
  }
});

Answer 21

Corto y puro

const http = new XMLHttpRequest()

http.open("GET", "https://api.lyrics.ovh/v1/shakira/waka-waka")
http.send()

http.onload = () => console.log(http.responseText)

Answer 22

function get(path) {
    var form = document.createElement("form");
    form.setAttribute("method", "get");
    form.setAttribute("action", path);
    document.body.appendChild(form);
    form.submit();
}


get(''/my/url/'')

Lo mismo se puede hacer para la solicitud de correos también.
Eche un vistazo a este enlace Solicitud de publicación de JavaScript como un formulario Enviar