XMLHttpRequest

alexandr_v-vich · February 26, 2012

Код изменения контента страницы без перезагрузки страницы. Своего ничего практически, всё по примеру - http://htmlbook.ru/html5/history, за исключением только что асинхронности (в примере - синхронно). С pushstate проблем никаких. А вот по поводу самого изменения контента возникли некоторые вопросы:

1. responeText - как эта штука работает? я прописываю

document.getElementById("content").innerHTML = req.responseText;

А он мне меняет всю страницу...

Правда, по-моему, когда было синхронно, он мне вообще новую страницу полносью загружал вот в этот указанный див.

А менял я

function swapPhoto(href) {

var req = new XMLHttpRequest();

req.open("GET",

"http://achacha/chacha/" +

href.split("/").pop(),

false);

req.send(null);

if (req.status == 200) {

document.getElementById("content").innerHTML = req.responseText;

setupHistoryClicks();

return true;

}

return false;

}

На вот это

function swapPhoto(href) {

var req = new XMLHttpRequest();

req.open("GET",

"http://achacha/chacha/" +

href.split("/").pop(),

true);

req.onreadystatechange = function() {

if (req.readyState == 4) {

if(req.status == 200) {

document.getElementById("content").innerHTML = req.responseText;

setupHistoryClicks();

return true;

}

};

req.send(null);

return false;

}

Вкратце страница такая:

<body>

<a href="" id="ssylka">Ssylka</a>

</div>

</div>

</body>

А меняет мне оба дива..

2. Как проще всего сделать так, чтобы страница не дёргалась (не прибивалась к верху), когда меняем этот контент...ну так, чтоб всё плавно было..?

Great Rash · February 27, 2012

А что за урл такой странный? Может в нем дело? Это локалка чтоль?

alexandr_v-vich · February 27, 2012

=)))

Это просто, пример, не обращайте внимания))

Great Rash · February 27, 2012

Ну, на вскидку, все правильно. Сложно так сказать, надо смотреть на реальном проекте. Попробуйте создать страницу-песочницу, где можно будет потестить ответ сервера, и посмотреть по какой причине заменяется содержимое целиком.

K313 · February 27, 2012

2. Как проще всего сделать так, чтобы страница не дёргалась (не прибивалась к верху), когда меняем этот контент...ну так, чтоб всё плавно было..?

она и дёргается потому что производится не замена контента, а перезагрузка всей станицы с последуюшим подгоном скрола для удобства пользователя.

function swapPhoto(href) {
var req = new XMLHttpRequest();
req.open("GET",
"http://achacha/chacha/" +
href.split("/").pop(),
false);
req.send(null);
if (req.status == 200) {
document.getElementById("content").innerHTML = req.responseText;
setupHistoryClicks();
return true;
}
return false;
}
На вот это
function swapPhoto(href) {
var req = new XMLHttpRequest();
req.open("GET",
"http://achacha/chacha/" +
href.split("/").pop(),
true);
req.onreadystatechange = function() {
if (req.readyState == 4) {
if(req.status == 200) {
document.getElementById("content").innerHTML = req.responseText;
setupHistoryClicks();
return true;
}
}
};
req.send(null);
return false;
}

какой ваш вариант?

если верхний, то почему вы возвращаете тегу А true если ответ сервера 200, т.е. всё в порядке??? а если не 200, то false т.е. не переходить по ссылке???

а если нижний, то откройте консоль ошибок и смотрите что там вылазит

alexandr_v-vich · February 28, 2012

Ну тут дело какое - я новичок и совсем не чухаю тонкоскти кода... return`ы ставил по примеру, ну и по логике, как вы пишите, разве что-то не так?...

А вообще как. Сначала был верхний вариант (синхронный) - он мне в указанный контент засовывал всю новую страницу...

А теперь поменял на второй (асинхронный) - тут вообще перестал я что-либо понимать.

Дело в том, что он теперь просто загружает новую страницу. Причём это происходит даже еслия вовсе убираю событие onreadystatechange. Т.е. с одними open и send он мне перезагружает страницу. НО, если вообще убираю XMLHttpRequest (и всё, что с ним связано) и оставляю только pushstate - всё впоряде, никакого перехода, просто меняет адресную строку...

Вероятно, я где-то что-то путаю, может я и ещё что-то проделывал или не проделывал...Но даже, если все заморочки убрать, взять изначальный код с синхронным запросом - там что-то не так.

Вот с return мне интересно стало, к нему ещё не цеплялся, можно подробней что там не так в первом варианте? И почему он мне всю страницу в контент засовывает, точнее как сделать, чтобы "content" с ответа загружался(заменил) в настоящий "content"?

А ну и firebug я пока ещё плохо понимаю. Единственное, что углядел, в неработающем асинхронном примере мне возвращается страница с заголовками с указанием кодировки windows-1251, а у меня везде на страницах стоит utf-8. Мне ещё рекомендовали заголовки отправлять, но я не знаю как их правильно оформить и что именно там прописывать..

Edited February 28, 2012 by alexandr_v-vich

alexandr_v-vich · February 28, 2012

Вот ещё...

При асинхронном запросе firebug в ответе новой страницы (я не знаю как правильно формулировать это) выдаёт статус 304 Not Modified... и стили с ответом 200(ок)...не знаю важно ли это..

alexandr_v-vich · February 28, 2012

Ещё)

меняем req.onreadystatechange

делаем проще

req.onreadystatechange = function() {

if (req.readyState == 4) {

if(req.status == 200) {

alert("ryba");

}

return true;

}

};

выдаёт на доли секунды алерт, но тут же убирает и загружает страницу (может в другом порядке - не уследить). А консоль показывает ошибку - исключение...

alexandr_v-vich · February 28, 2012

Со статусом 304 Not Modified разобрался - это кеширование было...

K313 · February 28, 2012

Ваши методы самообразования - это как яйца топором брить. :facepalmxd:

Купите книгу по JavaScript и читайте её с самого начала и по порядку, а не методом "тык".

Играть в учителя у меня желания нет...

alexandr_v-vich · February 28, 2012

Нет желания - не играйте. У меня и желания играть в ученика нету. Ответы на форуме типа "Читай книги" очень полезные, спасибо. Думаю, чему то учиться, всегда нужно начинать с библиотеки. На форум пришёл как раз за тем, чтобы получить помощь по непрофессиональным и оперативным для меня вопросам.

К теме - проблема только с асинхронным методом...

alexandr_v-vich · February 28, 2012

Типа ура...всё закончилось...с асинхронностью вопрос решён, как-то скрипт неправильно прописан был, методом перебора и тыка написал как нужно....куча разных функций (а будут и ещё=( ), нужно было правильно собрать воедино...

Вытащить, кстати, из ответа страницы нужный элемент нельзя. Всмысле через responseText, приходиться всю страницу "загружать". Кто ж все эти примеры сочиняет...

Всем огромное спасибо за предоставленную помощь, хоть сколько, но помогли)

Sign In

XMLHttpRequest

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information