2010-07-16 22 views
5

Descargo de responsabilidad: ¡Soy bastante nuevo en AJAX!Método de buena práctica para cargar JavaScript mediante ajax

He mirado alrededor, y no estoy seguro de qué método usar para cargar javascript con ajax.

Estoy usando ajax para solicitar páginas que requieren sus propios 6-10 métodos cortos. En total, habrá tal vez 5-6 de estas páginas, por lo que un total aproximado de más de 35 métodos.

Preferiría acceder al javascript necesario ya que cada página que lo requiere se carga.

he visto algunos métodos, y no estoy seguro de cuál se adapta mejor a mis necesidades:

  1. incluir un elemento de script vacío en la cabeza, y manipular el atributo src vía. el DOM.

  2. Cree un nuevo elemento de script mediante. el DOM y añádalo al document.body (esto suena igual que # 1).

  3. jQuery (que ya estoy usando) tiene un método ajax getScript().
  4. No he leído nada al respecto, pero ¿puedo incluir un elemento de script como parte de la respuesta de Ajax?

Como soy nuevo en ajax y en el desarrollo web en general, tengo curiosidad por los altibajos de cada método, así como por los métodos que he omitido.

Algunas preocupaciones son: -Utilizará una copia en caché o se descargará el script cada vez que se realice una solicitud de AJAX. Tenga en cuenta que los scripts serán estáticos. - Compatibilidad del navegador. Uso Chrome, pero esta aplicación se usará en todas las versiones de IE> = 7 y Firefox.

+2

¿Por qué no tener un archivo externo? Si estos son métodos muy cortos, un solo archivo se almacenará en antememoria y será insignificante para el cliente, y simplificará su mantenimiento hasta una etiqueta '

0

Vaya con getScript. Básicamente, hace lo mismo que el segundo método, pero no tiene que preocuparse por cómo escuchar la carga en varios navegadores (principalmente IE).

La respuesta de AJAX es simplemente texto en lo que se refiere al DOM. No tiene ningún efecto a menos que inserte eso en el DOM de alguna manera.

+0

Recomendaría * en contra de * esto, '$ .getScript()' intencionalmente no guarda en caché, puede verlo aquí: http://github.com/jquery/jquery/blob/master/src/ajax.js#L265 –

+0

Estoy de acuerdo con Nick, vaya a la forma $ .ajax con un script dataType. –

+0

@Nick @Julian - buenos puntos, no estaba al tanto de jQuery a escondidas en las marcas de tiempo en la URL :). Digo solo 'ajaxSetup' para tener un caché permanente en todo, o incluso mejor [sobrescribir] (http://jamiethompson.co.uk/web/2008/07/21/jquerygetscript-does-not-cache/) el getScript nativo 'método para permitir opcionalmente el almacenamiento en caché, y aún ser compatible con versiones anteriores. Si jQuery se lo perdió, entonces no lo haremos. ¿No es eso de lo que se trata JavaScript? : P – Anurag

1

Como todas las otras respuestas aquí sólo decir "usar jQuery" sin más detalles/explicación/justificación, probablemente vale la pena realmente mirando las otras opciones que mencionaste

  • Opción # 1

    podría ser un poco complicado, ya que requiere que espere hasta que un guión tiene descargue y ejecute antes de ir a buscar la siguiente (como se haya solamente un elemento de script).

  • Opción # 2

    es mejor, ya que puede añadir un segundo elemento de secuencia de comandos para DOM antes de que el primero haya terminado la descarga, sin afectar a la descarga/ejecución.

  • Opción # 3

    recomendado por todos antes de mí, está bien si estás en un entorno de jQuery y ya cargar la biblioteca (bastante pesado) jQuery para otros usos - cargarlo sólo por esto es obviamente superfluo . También vale la pena señalar que $.getScript() y $.ajax() ambos usan eval() para ejecutar el script. eval() no es "malo" en este contexto, ya que es una fuente confiable, pero en mi experiencia en ocasiones puede ser un poco más difícil depurar el código eval() - ed.

  • Opción # 4

    no es posible afaik.

  • Opción # 5

    recomendado por Nick Craver en el primer comentario OP es lo que me gustaría ir con TBH - si los scripts son estáticas como usted dice, el almacenamiento en caché será más eficiente que múltiples peticiones HTTP. También podría mirar en el uso de un cache.manifest para almacenar en caché agresivo si usted está especialmente preocupado por el ancho de banda: http://www.html5rocks.com/tutorials/appcache/beginner/

Cuestiones relacionadas