Загрузить часть веб-страницы с помощью AJAX - без JQuery - PullRequest
Новая
       26

Загрузить часть веб-страницы с помощью AJAX - без JQuery

1 голос
/ 07 сентября 2011

Я знаю, что есть способ JQuery, но сейчас это не то, что мне нужно.

У меня есть следующий javascript, который тянет содержимое страницы в div, однако мне не нужна вся страница, только содержимое DIV с этой страницы: 

function ahah(url, target) {
document.getElementById(target).innerHTML ='<img src="ajax-loader.gif"/>';
 if (window.XMLHttpRequest) {
 req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
 req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {ahahDone(url, target);};
req.open("GET", url, true);
req.send("");
}
}  

function ahahDone(url, target) {
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML=" Error:\n"+ req.status + "\n" +req.statusText;
    }
  }
}

function load(name, div) {
ahah(name,div);
return false;
}

А потом я называю это так: 

<a href="page.php" onclick="load('page.php','ajaxcontent');return false;" class="slide_more">LOAD</a>

Где следует указать селектор, который я хочу загрузить из page.php?

1 Ответ

2 голосов
/ 07 сентября 2011

Обычно в приложении AJAX для получения фрагмента HTML сервер возвращает тот фрагмент, который не был выбран на стороне клиента. Например, см. Простой пример в Разделе 4. Классный пример AJAX. Код с сайта приведен ниже для справки: 

<?php
function validate($name) {
  if($name == '') {
    return '';
  }

  if(strlen($name) < 3) {
    return "<span id=\"warn\">Username too short</span>\n";
  }

  switch($name) {
    case 'bob':
    case 'jim':
    case 'joe':
    case 'carol':
      return "<span id=\"warn\">Username already taken</span>\n";
  }

  return "<span id=\"notice\">Username ok!</span>\n";
}

echo validate(trim($_REQUEST['name']));
?>

Обратите внимание, что страница PHP просто возвращает фрагмент HTML, содержащий только <span> вместо полного HTML. Это одно из преимуществ вызова AJAX в том, что вам не нужно возвращать полную страницу, тем самым сохраняя стоимость полосы пропускания, поскольку полезная нагрузка меньше

...