Etant donné que la demande est pour une mise à jour de la réponse, voici ma solution à l'aide de HTML5 de l' Histoire de l'API avec jQuery. Il doit s'exécuter facilement en combinant le PHP et HTML parties en un seul fichier.
Ma solution permet d'AJAX pour retourner les éléments suivants:
- Un message par le biais de l'AJAX, ce qui met à jour un
<div> conteneur.
- Un URL, ce qui provoque le navigateur pour rediriger vers l'URL
- Complet de la page HTML qui appelle l'API de l'Histoire de l'
history.pushState() ajouter l'URL en cours à l'historique du navigateur et remplace l'ensemble de l'HTML de la page avec le code HTML renvoyé de l'AJAX.
PHP
Ceci est juste un échantillon de ce que le script PHP devrez retourner lorsqu'il est appelé par AJAX. Il montre comment encoder les drapeaux afin de déterminer si l'appel AJAX devrait mettre à jour le conteneur ou de charger une nouvelle page, et comment renvoyer son résultat via JSON par json_encode. Pour être complet, j'ai nommé ce script test.php.
<?php
// Random messages to return
$messages = array(
'Stack Overflow',
'Error Message',
'Testing'
);
// If the page was requested via AJAX
if( isset( $_POST['ajax']))
{
$response = array(
'redirect' => // Flag to redirect
( rand() % 2 == 0) ? true : false,
'load_html' => // Flag to load HTML or do URL redirect
( rand() % 2 == 0) ? true : false,
'html' => // Returned HTML
'<html><head><title>AJAX Loaded Title</title></head><body>It works!</body></html>',
'title' => 'History API previous title',
'message' => // Random message
$messages[ (rand() % count( $messages)) ]
);
echo json_encode( $response);
exit;
}
JS
Depuis que je suis à l'aide de jQuery, permet de commencer avec ça. La suite présente un AJAX POST au serveur, au-dessus de script PHP à l'adresse URL test.php. Notez qu'il définit également le paramètre POST ajax être true, permettant le script PHP pour détecter qu'il a reçu une requête AJAX. L' dataType champ indique jQuery que la réponse du serveur sera en JSON, et qu'il doit décoder que JSON d'un objet JSON dans la réponse de rappel. Enfin, l' success de rappel, qui est déclenché lorsque l'AJAX réponse est reçue avec succès, détermine sur la base des indicateurs envoyés à partir du serveur.
$.ajax({
type: 'POST',
url: "/test.php",
data: {ajax : true},
dataType: "json",
success: function( json) {
if( json.redirect) {
if( json.load_html) {
// If the History API is available
if( !(typeof history.pushState === 'undefined')) {
history.pushState(
{ url: redirect_url, title: document.title},
document.title, // Can also use json.title to set previous page title on server
redirect_url
);
}
// Output the HTML
document.open();
document.write( json.html);
document.close();
}
else {
window.location = redirect_url;
}
}
else {
$('#message').html( json.message);
}
},
});
HTML
Voici le source HTML complète de mes testé fichier. Je l'ai testé dans FF4 - FF8. Notez que jQuery fournit l' ready méthode pour empêcher le JS de l'exécution jusqu'à ce que le DOM est chargé. J'ai aussi utilisé Google hébergement de jQuery, vous n'avez pas besoin de télécharger une copie de jQuery pour votre serveur pour tester cela.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<title>Default Page</title>
<script type="text/javascript"">
$( document).ready( function() {
$('#ajax_link').click( function() {
var redirect_url = "/test.php";
$.ajax({
type: 'POST',
url: "/test.php",
data: {ajax : true},
dataType: "json",
success: function( json) {
if( json.redirect) {
if( json.load_html) {
// If the History API is available
if( !(typeof history.pushState === 'undefined')) {
history.pushState(
{ url: redirect_url, title: document.title},
document.title, // Can also use json.title to set previous page title on server
redirect_url
);
}
document.open();
document.write( json.html);
document.close();
}
else {
window.location = redirect_url;
}
}
else {
$('#message').html( json.message);
}
},
});
})
});
</script>
</head>
<body>
<div id="message">The default contents of the message</div>
<a id="ajax_link" href="#">Fire AJAX</a>
</body>
</html>
