Главная > Простейший AJAX с большой совместимостью
На этой странице показано одно сообщение с комментариями к нему, самые новые комментарии снизу.

145 месяцев назад

Постоянная ссылка Vanav

Простейший AJAX с большой совместимостью

Итак, мы хотим послать небольшую строчку на сервер, получить от сервера ответ и показать пользователю. Что-то похожее на AJAX, но как можно проще, без килобайтных библиотек, вопросов совместимости и изучения XML-парсеров разных браузеров. Более того, хотелось бы чтобы способ был совместим с как можно большим числом браузеров, и занял не больше 10 минут на написание с нуля. Наше решение будет совместимо с IE5.0+, Mozilla 1.7+, FireFox 1.0+ и Opera 7.3+.

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

Итак, начнём с кода.

Страница, с которой происходит запрос. Здесь расположена форма, которую заполняет пользователь:

default.asp:

<script type="text/javascript">
  function test(email) {
    href = 'tester.asp?email=' + encodeURI(document.getElementById('in_email').value);
    span = document.body.appendChild(document.createElement("SPAN"));
    span.style.display = 'none';
    span.innerHTML = 'text<s'+'cript></'+'script>';
    setTimeout(function() {
      var s = span.getElementsByTagName("script")[0];
      s.language = "JavaScript";
      if (s.setAttribute)
        s.setAttribute('src', href); else
        s.src = href;
    }, 10);
  }
</script>

<input type="text" id="in_email" value="test@example.com" />

<a href="javascript:test()">Тест</a>
<div id="result"></div>

Скрипт, который получает своим аргументом проверяемый адрес, и отвечает посредством создания JavaScript кода:

tester.asp:

<%@LANGUAGE = JScript %>
<%
  var email = decodeURI(Request.QueryString("email"));
  // Здесь можно добавить проверку на уникальность адреса в базе пользователей
  var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  if (filter.test(email))
    msg = "Правильный адрес.";
  else
    msg = "Неправильный адрес!";
  Response.Write('document.getElementById("result").innerHTML = "' + msg + '"');
%>

Обратим внимание, что первый скрипт может быть простым HTML, без ASP или PHP. Второй же скрипт может быть на любом серверном языке ASP или PHP, но возвращать в браузер должен синтаксически правильный JavaScript. Собственно, послеполучения ответа браузер этот JavaScript и будет исполнять.

В нашем примере после нажатия кнопки создаётся новый невидимый элемент span в конце документа, в него добавляется script и источником JS-скрипта ставится ASP или PHP скрипт на сервере. Этому скрипту на сервере передаётся интересующий нас аргумент, он его проверяет, и выдаёт ответ в виде правильного JavaScript. Браузер не замечает, что работал скрипт на сервере, и получает сразу правильный JavaScript, который тут же и исполняет.

Итак, применять это можно в тех случаях, когда нужен простой и быстрый AJAX, в то же время максимально совместимый. Собственно, простота и совместимость — его главное преимущество перед XMLRequest.

Начальная идея — dklab, за что огромное спасибо.

Комментарии