14 марта 2008
Данный пост посвящен «быстрому» методу взаимодействия клиент-сервер (со стороны пользователя) — Ajax. И основываясь на библиотеке — jQuery.
JQuery – это довольно удобный фреймворк, позволяющий упростить работу с DOM (Document Object Model) и Ajax. Он включает в себя разнообразные методы для работы с эффектами, формами и т.д. Плохой стороной jQuery можно назвать его вес, что влияет на скорость загрузки, но если у вас установлен на хостинге GZip, то все будет отлично, поскольку вес библиотеки будет уменьшаться в три раза.
Ajax Load
Метод «Load» предназначен для получения данных с сервера в определенный элемент.
Пример:
[code] <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>[/code]
Ajax Get
[code] <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>[/code]
JQuery GetScript
«GetScript» – это метод динамической загрузки JavaScript-файла во время исполнения какой-либо функции.
[code] <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>[/code]
Ajax Post
[code] <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>[/code]
JSON
«Java Script Object Network» — позволяет не просто возвращать информацию, а возвращать структурированную информацию в виде объекта. Для того чтобы преобразовать данные на сервере в JSON надо воспользоваться специальным для преобразования. А также вы можете прочитать по использованию данного объекта.
[code] <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>[/code]
Наши клиенты
-
Звоните!
+7 (812) 318-40-34 +7 (499) 288-16-43
+7 (499) 288-15-30 -
Пишите!
info@webering.ru -
Приезжайте!
-
г. Санкт-Петербург, ул. Седова, д. 11, лит. А, оф. 642 БЦ «Эврика» г. Москва, ул. Бутлерова, д. 17, оф. 5115 БЦ «NEO GEO»
-
Наш офис расположен в 5 минутах от станции метро «Елизаровская» в бизнес-центре «Эврика».
