javascript - with - Error XMLHttpRequest(Ajax)
xmlhttp send() error 500 (3)
Estoy usando XMLHttpRequest
en JavaScript. Sin embargo, me da un error y no sé cuál es mi problema.
Tengo que analizar un archivo XML y asignar sus contenidos a la página web; aquí está mi código:
<script = "text/javascript">
window.onload = onPageLoad();
var questionNum = 0;
function onPageLoad(questionNum) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","quiz.xml");
try {
xmlhttp.send(null); // Here a xmlhttprequestexception number 101 is thrown
} catch(err) {
document.getElementById("body").innerHTML += "/nXMLHttprequest error: " + err.description; // This prints "XMLHttprequest error: undefined" in the body.
}
xmlDoc = xmlhttp.responseXML;
parser = new DOMParser(); // This code is untested as it does not run this far.
}
</script>
Mi archivo XML está dentro del mismo directorio.
<question>
<query>what is 2+2?</query>
<option>4</option>
<option>5</option>
<option>3</option>
<answer>4</answer>
</question>
Solo como referencia, normalmente programo en C # o Java, y estoy ejecutando mi sitio web en Google Chrome.
Así que puede haber algunas cosas malas aquí.
Primero, empiece por leer cómo usar XMLHttpRequest.open()
porque hay un tercer parámetro opcional para especificar si se realiza una solicitud asincrónica, por defecto es verdadera . Eso significa que está realizando una solicitud asincrónica y necesita especificar una función de devolución de llamada antes de send()
. Aquí hay un ejemplo de MDN :
var oXHR = new XMLHttpRequest();
oXHR.open("GET", "http://www.mozilla.org/", true);
oXHR.onreadystatechange = function (oEvent) {
if (oXHR.readyState === 4) {
if (oXHR.status === 200) {
console.log(oXHR.responseText)
} else {
console.log("Error", oXHR.statusText);
}
}
};
oXHR.send(null);
En segundo lugar, dado que obtiene un error 101, puede usar la URL incorrecta. Por lo tanto, asegúrese de que la URL con la que realiza la solicitud sea correcta. Además, asegúrese de que su servidor pueda servir su archivo quiz.xml
.
Probablemente deba depurar simplificando / reduciendo el problema. Así que comenzaría haciendo una solicitud síncrona fácil para que no tenga que preocuparse por la función de devolución de llamada. Así que aquí hay otro ejemplo de MDN para hacer una solicitud sincrónica:
var request = new XMLHttpRequest();
request.open(''GET'', ''file:///home/user/file.json'', false);
request.send(null);
if (request.status == 0)
console.log(request.responseText);
Además, si recién está empezando con Javascript, puede consultar la documentación / ejemplos / tutoriales de la API de Javascript de MDN .
El problema es probable que mienta con la línea:
window.onload = onPageLoad();
Al incluir los corchetes que está diciendo onload
debe ser igual al valor de retorno de onPageLoad()
. Por ejemplo:
/*Example function*/
function onPageLoad()
{
return "science";
}
/*Set on load*/
window.onload = onPageLoad()
Si imprime el valor de window.onload
en la consola, será:
ciencia
La solución es eliminar los corchetes:
window.onload = onPageLoad;
Entonces, estás usando onPageLoad
como referencia a la función llamada así.
Finalmente, para obtener el valor de respuesta necesitará un listener de readystatechange
para su objeto XMLHttpRequest
, ya que es asincrónico:
xmlDoc = xmlhttp.responseXML;
parser = new DOMParser(); // This code is untested as it doesn''t run this far.
Aquí agrega el oyente:
xmlHttp.onreadystatechange = function() {
if(this.readyState == 4) {
// Do something
}
}
Veo 2 posibles problemas:
Problema 1
- el objeto XMLHTTPRequest no ha terminado de cargar los datos en el momento en que intentas usarlo
Solución: asigne una función de devolución de llamada a los objetos "onreadystatechange" -event y maneje los datos en esa función
xmlhttp.onreadystatechange = callbackFunctionName;
Una vez que el state ha alcanzado DONE (4), el contenido de la respuesta está listo para ser leído.
Problema 2
- el objeto XMLHTTPRequest no existe en todos los navegadores (con ese nombre)
Solución: utilice un try-catch para crear el objeto correcto para el navegador correcto (ActiveXObject en IE) o use un framework, por ejemplo jQuery ajax-method
Nota: si decide utilizar jQuery ajax-method, asigne la función de devolución de llamada con jqXHR.done ()