ОК, так что вам нужен AJAX. Ну, не часть «X», вам просто нужна асинхронная часть Javascript. Сервер может возвращать XML или JSON, но в вашем случае проще всего просто вернуть двоичный объект HTML, который вы хотите поместить в div.
Но вам нужно совершить поездку на сервер, потому что в браузере ничего не изменилось, изменилось только содержимое страницы на сервере.
Вот 30-секундное руководство , которое объясняет все. Я адаптирую это к тому, что вы хотите здесь.
Во-первых, на стороне сервера у вас уже есть PHP-скрипт, назовем его «page.php», который возвращает всю HTML-страницу. Вам нужно будет сделать второй скрипт PHP, назовем его «div.php», который возвращает только содержимое div.
(Вы могли бы также заставить page.php искать параметр, например, $ _GET ['divonly'], и таким образом иметь только один скрипт PHP, который обрабатывает обе задачи. Это не имеет значения ... вы можете сделать это однако вы хотите, до тех пор, пока у вас есть второй URL, чтобы попасть на серверную часть, чтобы получить новый контент для div.)
В HTML-коде page.php вы уже получили:
<div id="target"> ... </div>
И теперь вы добавили div.php, который возвращает только «...», а не полную HTML-страницу.
Хорошо, теперь Javascript. Вам не нужно использовать библиотеку, если вы не хотите - что приятно в библиотеках, так это то, что они решают все проблемы, возникающие в браузерах.
Но вот что вы хотите, адаптированный из примера на чистом Javascript:
var refreshDelay = 10000;
/* Creates the XMLHTTPRequest object depending on the browser */
function createRequestObject() {
var ro;
if(navigator.appName == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
/* Makes the request back to /div.php ... change the URL to whatever
script you put on the server side to return the contents of the div only */
function sndReq() {
http.open('get', '/div.php');
http.onreadystatechange = handleResponse;
http.send(null);
}
/* Does the work of replacing the contents of the div id="target" when
the XMLHTTPRequest is received, and schedules next update */
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('target').innerHTML = response;
setTimeout(sndReq(), refreshDelay);
}
}
/* Schedules the first request back to the server. Subsequent refreshes
are scheduled in handleResponse() */
setTimeout(sndReq(), refreshDelay);