JQuery tiene una amplia gama de funciones relacionadas con el
Anuncio
JQuery Ajax
JQuery Ajax
JQuery tiene una amplia gama de
funciones relacionadas con el uso
de Ajax
JQuery load
The jQuery load() es un método simple y poderoso. Nos permite accesar datos del servidor y
agregarlos al elemento seleccionado:
load(url[,data][,callback])
url:
String que especifica el url del recurso que se va a accesar.
data:
Datos que serán enviados al servidor (opcional)
callback: Función que se invoca después de completar la llamada Ajax (opcional).
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
Los métodos $.get() y $.post()
A veces no queremos solamente inyectar la información que
regresa el servidor en uno ó mas elementos. Podemos
requerir analizar primero los datos y entonces decidir lo que
queremos hacer con ellos. Para esto podemos utilizar los
métodos $.get() y $.post().
El método $.get()
$.get(url [, data][, callback][, type])
url:
data:
callback:
type:
String que especifica el url del recurso que se va a accesar.
Datos que serán enviados al servidor (opcional).
Función que se invoca después de completar la llamada Ajax (opcional).
String que especifica como se interpreta el contenido de la respuesta: html, text, xml, json, ... (opcional).
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("demo_test.asp", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<button>Send an HTTP GET request to a page and get the result back</button>
</body>
</html>
El método $.post()
$.post(url [, data][, callback][, type])
url:
data:
callback:
type:
String que especifica el url del recurso que se va a accesar.
Datos que serán enviados al servidor (opcional).
Función que se invoca después de completar la llamada Ajax (opcional).
String que especifica como se interpreta el contenido de la respuesta: html, text, xml, json, ... (opcional).
Ejemplo
<!DOCTYPE html>
<html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("demo_test_post.asp",
{
name: "Donald Duck",
city: "Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script></head><body>
<button>Send an HTTP POST request to a page and get the result back</button>
</body></html>
El método $.ajax()
A veces se requiere mas control sobre las llamadas Ajax. Por ejemplo,
quisiéramos especificar que hacer en caso de error o especificar un límite
de tiempo para recibir la respuesta. En estos casos se puede recurrir a la
función $.ajax().
El método $.ajax()
$.ajax({name:value, name:value, ... })
async
beforeSend(xhr)
cache
complete(xhr,status)
contentType
context
data
dataFilter(data,type)
dataType
error(xhr,status,error)
global
ifModified
jsonp
jsonpCallback
password
processData
scriptCharset
success(result,status,xhr)
timeout
traditional
type
url
username
xhr
Ejemplo
<!DOCTYPE html>
<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "wrongfile.txt", error: function(xhr){
alert("An error occured: " + xhr.status + " " + xhr.statusText);
}});
});
});
</script>
</head>
<body>
<p>Artists</p>
<div></div>
<button>Get CD info</button>
</body></html>
