Поскольку запрос на получение обновленного ответа, вот мое решение с использованием HTML5 History API с jQuery .Он должен легко работать, объединяя части PHP и HTML в один файл.
Мое решение позволяет AJAX возвращать следующее:
- Сообщение через AJAX, которое обновляет
<div> container. - URL-адрес, который заставляет браузер перенаправить на URL-адрес
- Полная HTML-страница, которая вызывает API-интерфейс History *
history.pushState(), чтобы добавить текущий URL в историю браузера изаменяет весь HTML-код на странице HTML-кодом, возвращаемым из AJAX.
PHP
Это всего лишь пример того, что PHP-скрипт должен будет возвращать при вызове через AJAX.,В нем показано, как кодировать флаги, чтобы определить, должен ли вызов AJAX обновить контейнер или загрузить новую страницу, и как вернуть его результат через JSON через json_encode .Для полноты я назвал этот скрипт 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
Поскольку я использую jQuery, давайте начнем с этого.Следующее передает AJAX POST на сервер, к вышеуказанному PHP-скрипту по адресу URL test.php .Обратите внимание, что он также устанавливает для параметра POST ajax значение true, что позволяет сценарию PHP обнаруживать, что он получил запрос AJAX.Поле dataType сообщает jQuery, что ответ сервера будет в JSON и что он должен декодировать этот JSON в объект JSON в ответном обратном вызове.Наконец, обратный вызов success, который запускается при успешном получении ответа AJAX, определяет, что делать на основе флагов, отправленных с сервера.
$.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
Здесьполный исходный HTML-код моего проверенного файла.Я проверял это в FF4 - FF8.Обратите внимание, что jQuery предоставляет метод ready для предотвращения выполнения JS до загрузки DOM.Я также использовал хостинг Google jQuery, поэтому вам не нужно загружать копию jQuery на ваш сервер, чтобы проверить это.
<!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>