как сделать веб-страницу, которая не загружается

Question

Я смотрел на этом сайте http://bountii.com/search.php?item=router

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

На странице предусмотрено много фильтров, например: диапазон цен, популярность и т. Д. Но когда эти фильтры выполняются, похоже, загружается только какой-то раздел веб-страницы, а не вся страница. Похоже, что он не использует ajax, поскольку отправляет весь запрос обратно на сервер (страница search.php).

Кажется, он не использует технику, упомянутую на этой странице http://nettuts.s3.amazonaws.com/196_jquery/index.htm, где они просто редактируют CSS, чтобы не отображать некоторые ссылки.

Мне любопытно, как это работает. Есть мысли?

Answer 1

Просто очень быстро перезагружается. На всей этой странице нет Javascript. HTML-код хорошо сформирован, а страница очень упрощенная.

Answer 2

Если вы хотите увидеть, что происходит, сделайте это:

1. Установите Firefox, если вы его еще не используете
2. Установить расширение firebug
3. Перейдите на интересующий вас веб-сайт и нажмите маленький значок firebug (в строке состояния в правом нижнем углу это небольшая ошибка) и включите все параметры firebug для этого сайта
4. Перезагрузите веб-страницу и щелкните вокруг
5. Посмотрите на различные панели пожарных. Он будет отслеживать все сетевые запросы (XHR или другие), и вы можете посмотреть и посмотреть.

Answer 3

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

Только что попробовал в IE и каждый клик я вижу видимую перезагрузку. В Chrome это не выглядит как обновление, я думаю, из-за оптимизации браузера. Я знаю в Chrome, если вы переключаетесь между двумя вкладками с одинаковым содержимым, он даже ничего не перерисовывает.

Answer 4

вероятно, он использует Javascript XMLhttprequest. Facebook и многие другие сайты используют это. Это делает поездку на сервер без перезагрузки всей страницы.

Вот пример с w3schools.com:

<script type="text/javascript">

var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

Answer 5

Это может быть запрос новых данных через Ajax, заполнение скрытого элемента <div>, а затем замена видимого <div> скрытым.