Данный пост посвящен «быстрому» методу взаимодействия клиент-сервер (со стороны пользователя) — Ajax. И основываясь на библиотеке — jQuery.
JQuery – это довольно удобный фреймворк, позволяющий упростить работу с DOM (Document Object Model) и Ajax. Он включает в себя разнообразные методы для работы с эффектами, формами и т.д. Плохой стороной jQuery можно назвать его вес, что влияет на скорость загрузки, но если у вас установлен на хостинге GZip, то все будет отлично, поскольку вес библиотеки будет уменьшаться в три раза.
Ajax Load
Метод «Load» предназначен для получения данных с сервера в определенный элемент.
Пример:
<script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">
$(document).ready(function(){
$("#myJSForm").load("/news/form.php", { formName : ‘Форма’ }, function(){
alert(‘Форма загружена!’);
});
});
</script>
Ajax Get
<script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">
$.get("/news/form.php", { name: "Даниэль", email: "deniel@..." },function(data){
alert("Ответ с сервера: " + data);
});
</script>
JQuery GetScript
«GetScript» – это метод динамической загрузки JavaScript-файла во время исполнения какой-либо функции.
<script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">
$.getScript("http://webering.ru/js/color.js ", function(){
$(".next").click(function(){
$(".scroll").animate( { backgroundColor: '#999999' }, 1000)
.animate( { backgroundColor: '#FFFFFF' }, 1000);
});
});
</script>
Ajax Post
<script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">
$.post("/news/form.php", { action: "/", method: "get" },function(data){
alert("Полученные данные: " + data);
});
</script>
JSON
«Java Script Object Network» — позволяет не просто возвращать информацию, а возвращать структурированную информацию в виде объекта. Для того чтобы преобразовать данные на сервере в JSON надо воспользоваться специальным для преобразования. А также вы можете прочитать по использованию данного объекта.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">
$(document).ready(function(){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?&ajax=true",
function(data){
$.each(data.items, function(i,item){
$("<img />").attr("src", item.media.m).appendTo("body");
if ( i == 3 ) return false;
});
});
});
</script>
