AJAX без JavaScript.

^{27.4.2012 - 3137 просмотров ;)}

Многие SEOчнеги щас в голос скажут, мол тьфу, нам этот AJAX и вообще не нужен, ибо он Яндексами не едиться.

Но придет время, и Яндексы будут его есть. Дело в другом. Для многих AJAX — понимается как нечто сложное и непонятное, но наконец-то один умный паренек из буржунета написал библиотечку, которая тупо исключает написание кода на JavaScript для того чтобы сделать AJAX запрос.

И штука эта назыается: AjaxML

На морде проекта приводится пример:

<html>
  <head>
    <script src="jquery.js"></script>
    <script>
      function sayHello(){
        $("#target").html("<img src='ajax-loader.gif' />");
        $.ajax({url:"say_hello.html",
                success: function(data){
                  $("#target").html(data);
                }
        });
      }
    </script>
  </head>
  <body>
    <a href="javascript:sayHello()">
      Say Hello
    </a>
    <div id="target"></div>
  </body>
</html>

<html>
  <head>
    <script src="jquery.js"></script>
    <script src="jquery.hashchange.js"></script>
    <script src="ajaxml.js"></script>
  </head>
  <body>
    <a href="say_hello.html" into="target">
      Say Hello
    </a>
    <div id="target"></div>
  </body>
</html>

Суть примера в том что они делают одно и то же, загружают в HTML тэг с id=target некий текст. В первом случае стандартный пример с jQuery, во втором случае к jQuery добавляется прослоечка AjaxML, и дальнейший AJAX код прямо на HTML.

Что дает AjaxML ?

Меньше кода !
Легче понимания
Нет JavaScript
Быстрее скорость написания

Разбор AjaxML:

<a href="say_hello.html" into="target">

Вот, нажав на ссылку, подгружаются удаленные данные в нашу старничку. Куда уж прощще ?

Конечно этот плагин AjaxML не заканчивается на этом и позволяет массу другого:

передача параметров JSON:

<a href="say_hello.php" into="target3" 
    parameters="{first_name:'John', last_name:'Smith'}">
  Click Here
</a>
<div id="target3">Content To Be Replaced</div>

передача в качестве параметров результат функции JavaScript (куда ж без него родного)

<script type="text/javascript">
  function currentUser(){
    return {first_name:'John', last_name:'Smith'};
  }
</script>

<a href="say_hello.php" into="target4" parameters="currentUser()">
  Click Here
</a>
<div id="target4">Content To Be Replaced</div>

Передача параметров с данными из формы:

First Name: <input type="text" id="text1" value="John"/><br/>
Last Name: <input type="text" id="text2" value="Smith"/><br/>

<a href="say_hello.php" into="target5" from="{first_name:'text1',last_name:'text2'}">
  Click Here
</a>
<div id="target5">Content To Be Replaced</div>

С событием onStart, отлавливающим начало передачи:

<a href="say_hello.php" into="target6" onStart="alert('About To Be Sent')" 
    parameters="{first_name:'John', last_name:'Smith'}">
  Click Here
</a>
<div id="target6">Content To Be Replaced</div>

Кроме того есть события Конец передачи, Ошибка передачи

Подгружаться так же можно вместо, до и после указанного ID.

Можно в качестве ожидания показывать GIFчик, например как у FaceBook, вот код:

<a href="delay.php" into="target11">
  Facebook Hour Glass
</a>
<div id="target11" hourglass="<img src='facebook.gif' />">Content To Be Replaced</div>

<a href="delay.php" into="target12">
  Soccer Hour Glass
</a>
<div id="target12" hourglass="<img src='ball.gif' />">Content To Be Replaced</div>

Легко делается валидация данных формы перед отправкой:

<label>Link Enabled:</label> <input type="checkbox" id="check1"/>
<a href="delay.php" into="target14" validate="$('#check1').is(':checked')">
  Click Here
</a>
<div id="target14">Content To Be Replaced</div>

AjaxML умеет работать с историей браузера, сам я никогда этой проблемой не озадачивался, поэтому ничего умного тут не могу написать.

AjaxML так же умеет передавать файлы:

<label>Choose an Image to Upload:</label> 
<input type="file" name="profile-pic" action="file_upload.php" into="target22"/>
<div id="target22" insert="prepend"></div>

и много других штук, от которых я чуть сума не сошел. Вообщем обязательно поглядите, на плагин, если балуетесь с AJAX.

Что дает AjaxML ?

Похожие посты: