¿Cómo puedo usar AJAX para obtener datos y almacenarlos en variables javascript?

Este es un ejemplo de gráfico actualizado dinámicamente: http://www.highcharts.com/demo/dynamic-update

El gráfico se actualiza cada segundo con la fecha como el valor x y un número aleatorio como el valor y.

load: function() { // set up the updating of the chart each second var series = this.series[0]; setInterval(function() { var x = (new Date()).getTime(), // current time y = Math.random(); series.addPoint([x, y], true, true); }, 1000); } 

¿Cómo reescribiría la load para obtener y de otra página web utilizando AJAX, en lugar de generar los valores dentro de la función?

Supongo que lo que desea es el método de load muestra, pero con las líneas que establecen y reemplazan con una llamada AJAX. Deberá realizar una transformación de código de paso de continuación bastante básica, convirtiendo el código después del punto en el que desea que la llamada asíncrona se convierta en una función que pase a la llamada asíncrona. ” Continuación ” simplemente significa “el rest del cálculo, desde un punto dado hacia adelante”. En el ejemplo de código, esa es la llamada a series.addPoint . El patrón para esto es que transformas:

 function f(...) { (1) result = sync(...); (2) } 

dentro:

 function f(...) { (1) async(..., function (result) { (2) }); } 

Si (2) devolvió un valor en la función original, entonces la llamada a f también debe reescribirse utilizando el estilo de paso de continuación, agregando un parámetro adicional para mantener la continuación.

La otra cosa que debe hacer es asegurarse de que la secuencia de comandos PHP genere el par numérico como JSON válido, ya sea como una matriz de dos números (que se puede pasar directamente a la llamada series.addPoint después de analizar) o como un objeto con propiedades ” X y Y”.

Tenga en cuenta que, debido a la naturaleza de la comunicación de red, es posible que los datos no lleguen de manera oportuna, lo que resulta en un gráfico con intervalos irregulares.

Aquí está la esencia, envolviendo las tuercas y los pernos de la llamada asíncrona en una función llamada ajaj . La muestra asume que el navegador admite los estándares necesarios para XMLHttpRequest y el analizador JSON .

 /* Asynchronous Javascript And Json */ function ajaj(url, succeed, fail) { if (! fail) { fail = function() {}; } var xhr = new XMLHttpRequest; xhr.open('GET', url); xhr.onreadystatechange = function() { if (xhr.readyState==4) { if (200 <= xhr.status && xhr.status < 300) { succeed(JSON.parse(xhr.responseText)); } else { // error fail(xhr.status, xhr.statusText, xhr.responseText); } } }; xhr.send(); return xhr; } ... url: '...', load: function() { // ensure only one data load interval is running for this object if (this.updateInterval) { return; } // set up the updating of the chart each second var series = this.series[0]; this.updateInterval = setInterval(function() { ajaj(this.url, function(point) { // success series.addPoint(point, true, true); }, function(status, statusText, response) { // failure ... } ); }, 1000); } 

Las bibliotecas JS proporcionan su propia versión de ajaj , a menudo con más funciones. Si está haciendo algo de complejidad para un sitio de producción, considere adoptar uno. Si está utilizando jQuery (como sugiere la etiqueta), puede, por ejemplo, usar jQuery.get :

  load: function() { if (this.updateInterval) { return; } // set up the updating of the chart each second var series = this.series[0]; this.updateInterval = setInterval(function() { jQuery.get(this.url, function(point, textStatus, jqXHR) { // success series.addPoint(point, true, true); }, 'json' ); }, 1000); } 

El lado del servidor de las cosas es muy simple. time() devuelve una marca de tiempo de Unix, rand() devuelve un número pseudoaleatorio (aunque no es muy bueno) (aunque es lo suficientemente bueno para una demostración), y json_encode() , bueno, puedes averiguarlo.

  

Creo que quieres una llamada recursiva a setTimeout :

 function update(series){ var x = (new Date()).getTime(), // current time y = Math.random(); series.addPoint([x, y], true, true); setTimeout(function() { update(series); }, 1000); } 

Y entonces:

 load: function() { var series = this.series[0]; update(series); } 

O mejor aún, intente algo como esto:

 function update(){ var series = yourChart.series[0]; var x = (new Date()).getTime(), // current time y = Math.random(); series.addPoint([x, y], true, true); setTimeout(update, 1000); } 

Y entonces:

 load: update 

EDITAR

Si desea obtener un número aleatorio como un entero, algo como esto debería hacerlo (dependiendo del rango del número que desee)

 Math.floor(Math.random() * 10) 

random devolverá un número en el rango [0, 1), y floor cortará cualquier punto decimal.

Ver documentos al azar