To jest w istocie, co AJAX jest za . Twoja strona ładuje się i dodajesz zdarzenie do elementu. Kiedy użytkownik wywołuje zdarzenie, powiedzmy, klikając coś, Twój JavaScript używa obiektu XMLHttpRequest do wysłania żądania do serwera.
Gdy serwer odpowie (prawdopodobnie z wyjściem), inna funkcja / zdarzenie Javascript daje ci miejsce do pracy z tym wyjściem, w tym po prostu umieszczając go na stronie, jak każdy inny element HTML.
Możesz to zrobić „ręcznie” za pomocą zwykłego JavaScript lub możesz użyć jQuery. W zależności od wielkości projektu i konkretnej sytuacji, prostsze może być użycie zwykłego JavaScript.
Zwykły JavaScript
W tym bardzo podstawowym przykładzie wysyłamy żądanie, myAjax.php
gdy użytkownik kliknie łącze. Serwer wygeneruje treść, w tym przypadku „hello world!”. Umieścimy w elemencie HTML z id output
.
Plik javascript
function getOutput() {
getRequest(
'myAjax.php',
drawOutput,
drawError
);
return false;
}
function drawError() {
var container = document.getElementById('output');
container.innerHTML = 'Bummer: there was an error!';
}
function drawOutput(responseText) {
var container = document.getElementById('output');
container.innerHTML = responseText;
}
function getRequest(url, success, error) {
var req = false;
try{
req = new XMLHttpRequest();
} catch (e){
try{
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try{
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
return false;
}
}
}
if (!req) return false;
if (typeof success != 'function') success = function () {};
if (typeof error!= 'function') error = function () {};
req.onreadystatechange = function(){
if(req.readyState == 4) {
return req.status === 200 ?
success(req.responseText) : error(req.status);
}
}
req.open("GET", url, true);
req.send(null);
return req;
}
The HTML
<a href="#" onclick="return getOutput();"> test </a>
<div id="output">waiting for action</div>
The PHP
<?php
echo 'hello world!';
?>
Try it out: http://jsfiddle.net/GRMule/m8CTk/
With a javascript library (jQuery et al)
Arguably, that is a lot of Javascript code. You can shorten that up by tightening the blocks or using more terse logic operators, of course, but there's still a lot going on there. If you plan on doing a lot of this type of thing on your project, you might be better off with a javascript library.
Using the same HTML and PHP from above, this is your entire script (with jQuery included on the page). I've tightened up the code a little to be more consistent with jQuery's general style, but you get the idea:
function getOutput() {
$.ajax({
url:'myAjax.php',
complete: function (response) {
$('#output').html(response.responseText);
},
error: function () {
$('#output').html('Bummer: there was an error!');
}
});
return false;
}
Try it out: http://jsfiddle.net/GRMule/WQXXT/
Don't rush out for jQuery just yet: adding any library is still adding hundreds or thousands of lines of code to your project just as surely as if you had written them. Inside the jQuery library file, you'll find similar code to that in the first example, plus a whole lot more. That may be a good thing, it may not. Plan, and consider your project's current size and future possibility for expansion and the target environment or platform.
If this is all you need to do, write the plain javascript once and you're done.
Documentation