Многие 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:
<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.
