У домаинтернетДинамично зареждане на данни на страницата. Мързеливо зареждане на съдържание на целевата страница
Динамично зареждане на данни на страницата. Мързеливо зареждане на съдържание на целевата страница
AJAX и jQuery. Актуализация на динамично съдържание. Основи (промени от 01.03.2012 г.)
Тази статия ще обсъди какво представляват AJAX и jQuery и ще разгледа примери как да ги използвате.
AJAX е инструмент за изграждане на уеб приложения, които комуникират със сървъра във фонов режим. В този случай потребителят получава приложение с динамична актуализация на съдържанието, без да презарежда цялата страница.
jQuery - JavaScript-рамка, библиотека, която ви позволява по-удобно да използвате някои от функциите на Javascript, като например: създаване визуални ефекти, обработка на събития, манипулиране на DOM и поддръжка на AJAX.
Изтегли последна версия jQuery и научете подробно всички функции на уебсайта на разработчика: http://www.jquery.com/
В тази статия ще разгледаме само една функция в библиотеката jQuery, а именно функцията $.ajax(). Тази функция ни позволява както да изпращаме данни към сървъра, така и да получаваме отговори от сървъра, всичко това във фонов режим, без да презареждаме страницата. Настройката за получаване или предаване на данни зависи от параметрите, с които се извиква функцията $.ajax(). Основните ще бъдат разгледани по-долу. Можете да прочетете повече за параметрите в ръководството за jQuery.
Да преминем към примерите.
важно! За да работят правилно примерите, трябва: 1. Всички файлове трябва да бъдат написани в UTF-8 кодировка. 2. Скриптовете трябва да се изпълняват на уеб сървъра, а не да се изпълняват в браузъра като файл.
Пример 1: Актуализация на динамично съдържание на таймер
Нека създадем проста програма, която показва текущо време, актуализиран веднъж в секунда от таймера. Характеристика на тази програма ще бъде получаването на информация за текущото време от друг външен файл.
Съдържанието на файла index.html.
Има няколко функции в кода, нека ги обясним.
1. Библиотеката jQuery е включена в заглавката HTML файл, този ред е написан за това.
Самият файл jquery.js се намира в същата папка като примерните файлове.
2. В тялото на документа се създава контейнер, в който ще заредим съдържанието.
3. Странно на пръв поглед, функцията $(document).ready() е необходима за правилното jQuery работи, освен това в него можем да извършим цялата подготовка, за да работи програмата. В нашия случай извикваме функцията show(), която има механизъм за получаване на съдържание от друг файл, и настройваме таймер, така че функцията show() да се извиква веднъж в секунда.
4. Функцията show() се състои от извикване на функцията $.ajax() с определен брой параметри, което ни позволява да получаваме информация от външен файл на сървъра във фонов режим.
Помислете за параметрите на използваната функция $.ajax().
Url: "time.php" Препраща към файла time.php за получаване на съдържанието. кеш: невярно Резултатите от заявката не се кешират. успех: функция(html)( $("#content").html(html); ) Ако заявката е успешна, управлението преминава към функция, която получава съдържанието като параметър и записва своя контейнер. Записването в контейнера се извършва в този ред: $("#съдържание").html(html);
Съдържанието на файла time.php.
Целта на файла time.php е да покаже текущия час на екрана.
Пример 2: Динамично актуализиране на съдържанието по избор на потребителя
Програма, която динамично зарежда съдържание по избор на потребителя.
Съдържанието на файла index.html.
Коя страница искате да отворите?
В тялото на документа се създава форма, която има два бутона, чрез които потребителят избира желаното съдържание. И контейнер за зареждане на съдържание.
Събитието за щракване върху бутон на страница 1 се обработва от функцията $("#btn1").click(), а събитието за щракване върху бутон на страница 2 се обработва от функцията $("#btn2").click().
Съдържанието на файловете page1.html и page2.html, които се зареждат динамично в областта на съдържанието, е прости html странициили текстови файловесъс съдържание.
Изтеглете примерни изходни файлове (18,4 kb):
Пример 3: Изпращане на данни към сървъра във фонов режим и получаване на съдържание
Помислете за пример, който изпраща въведеното потребителско име към сървъра. Сървърът при получаване на име издава поздрав и отчита броя на символите във въведеното име.
Съдържанието на файла index.html.
В тялото на документа е създадена форма за въвеждане на потребителско име. И контейнер за зареждане на динамично съдържание.
Имайте предвид, че самият формуляр няма обичайните полета за действие и метод. Функцията $("#myForm").submit() действа като манипулатор на събития за щракване върху бутона "Изпращане". Нека разгледаме тази функция.
Както виждаме, основната работа отново е свързана с функцията $.ajax(). Този път се появяват Допълнителни опции, които не са разгледани в примери 1 и 2. А именно:
Тип: "POST" Вид на трансфер на данни. данни: "username="+$("#username").val() Параметри, предадени на сървъра. В този случай ние предаваме съдържанието на полето за потребителско име - потребителското име. Като цяло параметрите се записват по същия начин, както в GET метод, в един ред, например: данни: "потребителско име=Вася&възраст=18&пол=мъж"
Имайте предвид, че в края е написан редът:
връща невярно; Това се прави, за да не се опитва формата да прехвърли данни във файла, от който се стартира и страницата да не се презарежда.
Съдържание на файла greetings.php.
".$_REQUEST["потребителско име"]."! "; echo "Името ви има букви: ".strlen($_REQUEST["username"])."."; ?>
Извеждаме поздрав на екрана и броим броя на знаците в името.
Изтеглете примерни изходни файлове (16,8 kb):
Струва си да се каже в заключение, че в допълнение към очевидните предимства на създаването на страници с динамично актуализирано съдържание, има редица недостатъци, които трябва да се имат предвид при разработването на сайт, а именно:
1. На страници с динамично обновяване на съдържанието бутонът "Назад" в браузъра не работи правилно.
2. Страниците с динамични актуализации на съдържанието не променят URL въз основа на тяхното съдържание, така че не могат да бъдат маркирани.
3. Страниците с динамично обновяване на съдържанието не се индексират търсачки, защото те не изпълняват JavaScript команди.
Тези недостатъци могат да бъдат отстранени програмно. Тази статия не обхваща такива методи.
Здравейте всички. Днес искам да говоря с вас за това как да организирате отложено зареждане на съдържание на целевите страници.
Често се нарича още "безкрайно превъртане". Със сигурност сте виждали подобен ефект, когато съдържанието първоначално не присъства на сайта и докато страницата се превърта, тя се зарежда плавно.
Преди много време те писаха в секцията „Вашите предложения“ с молба да напишат статия за това как да приложат такъв ефект:
Затова реших да започна да прилагам. Благодаря за идеите. Да започваме...
Както в повечето случаи, започваме с включването на библиотеката jQuery:
А сега трябва да се отклоните малко и ще ви обясня същността на метода. Всичко това се стартира, за да не се зареждат всички елементи на сайта (вашето портфолио или ревюта), а да се зареждат според нуждите. Например, когато потребителят щракне върху бутона "Покажи повече". Така страницата ще се зарежда много по-бързо. И сега същността, с помощта на технологията ajax ще заредим желания елемент (div) и файл на трета странакъм нашата целева страница. Всичко е толкова просто, както на теория, така и на практика, и скоро ще се убедите в това.
Сега нека създадем основния блок, например със снимки на нашата работа. Да предположим, че рисуваме икони и ще ги заредим, когато бутонът бъде щракнат. Създадох структура като тази:
Портфолио
Покажи повече...
Както можете да видите, всичко е просто. Но на какво трябва да обърнете внимание? И трябва да обърнете внимание на div с id="smartPortfolio", id="moreButton" и id="loadingDiv", тъй като те се използват в скрипта, който ни помага да зареждаме съдържание от други страници. SmartPortfolio е "контейнер" за нашето портфолио. MoreButton - това ще бъде нашият бутон, при натискане върху който се зарежда друга част от портфолиото. LoadingDiv - областта, в която ще се показва текстът, когато портфолиото е напълно отворено или възникне някаква грешка.
Например, някои от читателите все пак ще се опитат да тестват този скрипт не на сървъра, а просто ще отворят индексния файл в браузъра. В този случай те ще видят съобщение за грешка. Освен това при много бавна връзка, може да отнеме време за изтегляне на файлове и за да разбере потребителят, че процесът е в ход, можете да въведете там съобщение, че данните се зареждат или поставят (картина, индикатор за напредък или нещо друго).
Не съм написал сценария сам, но го намерих на един от сайтовете, авторът е посочен в изходния код, за тези, които се интересуват, погледнете. Тъй като не е твърде голям, ще го дам целия, но ако планирате да използвате същите имена на ID и пътеки към файловете като моите, можете дори да не го разглеждате, а просто да го включите преди затварящия етикет body (в долен колонтитул).
За тези, които планират да направят промени, ето самия скрипт:
var lazyload = lazyload || (); (функция($, lazyload) ( "използване на строг"; var page = 2, buttonId = "#moreButton", loadingId = "#loadingDiv", container = "#smartPortfolio"; lazyload.load = function() ( var url = "./pages/" + page + ".html"; $(buttonId).hide(); $(loadingId).show(); $.ajax(( url: url, успех: функция(отговор) ( if ( !response || response.trim() == "NONE") ( $(buttonId).fadeOut(); $(loadingId).text("Портфолиото е напълно заредено"); return; ) appendContests(response); ), error : function(response) ( $(loadingId).text("Съжаляваме, нещо се обърка със заявката. Моля, опреснете страницата."); ) )); var appendContests = function(response) ( var id = $ (buttonId); $(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(container)); страница += 1; ); ))(jQuery, lazyload) ;
Така че сега си струва да говорим за тези файлове, от които ще заредим информация. Скриптът предполага, че това ще бъдат файлове с имена 2.html…5.html и т.н. който съдържа нашата информация. Например моят 2.html файл се зарежда първи и има следното съдържание:
В структурата на моя сайт страниците, от които ще бъде взета информация за последващо зареждане при щракване, се намират в папката страници. Има три файла, два от които са пълни, а последният е празен. Той приема логиката на сценария.
Пътят в скрипта е посочен, както следва:
Var url = "./страници/" + страница + ".html";
Ако планирате да използвате различен път, не забравяйте да го замените в скрипта. Освен това, ако сте използвали други идентификатори, те ще трябва да бъдат предефинирани в скрипта. Точно тук:
И, както казах, преди затварящия етикет body включваме самия скрипт:
Като това на целева страницаМожете да приложите мързеливо зареждане. Изпратете повече теми, по които бихте искали да прочетете статия в блога. Доколкото е възможно, ще се опитам да публикувам не планирания материал, а този, за който питате в раздела „Вашите предложения“. И за днес това е всичко. Чао!
Измина известно време, откакто публикувах код. Днес ще коригирам ситуацията и ще дам някои полезни jQuery фрагменти, които определено ще ви трябват на вашите сайтове.
Няма да навлизам в теорията, цялата документация на jQuery е на официалния уебсайт на библиотеката. Само ще ви напомня какво е jQuery.
jQuery е JavaScript библиотекафокусиране върху взаимодействие с JavaScriptи HTML. Библиотеката jQuery улеснява достъпа до всеки DOM елемент, достъп до атрибутите и съдържанието на DOM елементите и манипулирането им. Библиотеката jQuery предоставя и удобен API за работа с AJAX.
Така че да тръгваме!
1. Плавно превъртане до горната част на страницата
Никой уебсайт не е завършен без него. Само 4 реда код ще позволят на вашите посетители плавно да превъртат цялата страница нагоре с едно кликване.
За да подобрите възприемането и четливостта на вашите таблици, можете да дублирате заглавията им под таблицата. Изглежда дреболия, но е много удобно в сложни и големи маси, които не се побират на един екран.
$tfoot = $("
"); $($("thead").clone(true, true).children().get().reverse()).each(function()( $tfoot.append($(this)); ) $tfoot.insertAfter("реклама на таблица");
3. Зареждане на външни данни
СЪС jQueryМного е лесно да качвате външно съдържание на уеб страници. Може да се покаже директно в DIV блок, както в примера по-долу.
Известно е, че за подравняване на блоковете по височина стандартни средства HTML и CSS не е толкова лесно. Само няколко реда код по-долу ще ви позволят да направите височината на всички блокове равна на височината на по-големия блок.
Както знаете, възприемането и четливостта на таблицата ще бъдат значително по-високи, ако направите редуване на многоцветни редове. Това е много лесно за изпълнение с jQuery.
С jQuery е много лесно да се приложи блоково (частично) опресняване на страницата. Например кодът по-долу ще ви позволи автоматично да актуализирате блока #refresh на всеки 10 секунди.
SetInterval(function() ( $("#refresh").load(location.href+" #refresh>*",""); ), 10000); // милисекунди за изчакване
7. Предварително зареждане на изображението
Този код ви позволява да зареждате изображения във фонов режим, без да се зареждат, докато преглеждате страницата. Просто избройте в ред 7 изображенията, които трябва да заредите предварително.
$.preloadImages = function() ( for(var i = 0; i ").attr("src", arguments[i]); ) ) $(document).ready(function() ( $.preloadImages("hoverimage1.jpg","hoverimage2.jpg"); ));
8. Отваряне на външни връзки в нови прозорци/табове
Този фрагмент принуждава всички външни връзки на страницата да се отварят в нов прозорец на браузъра. Скриптът банално определя текущия домейн на сайта и работи, ако не съвпада с адреса във връзката.
$("a").each(function() ( var a = new RegExp("/" + window.location.host + "/"); if(!a.test(this.href)) ( $(this ).click(function(event) ( event.preventDefault(); event.stopPropagation(); window.open(this.href, "_blank"); )); ) ));
9. Блокирайте в целия прозорец на браузъра
Този скрипт ще ви помогне да разтегнете блока, за да запълни екрана на браузъра. Чудесно за модални прозорци и диалози.
Ако позволявате на посетителите на вашия сайт да задават свои собствени пароли, би било добра идея да контролирате сложността им и да информирате посетителя за това.
Първо, нека напишем HTML частта от кода:
И с помощта на кода по-долу ще проверим въведената парола и ще покажем информация на посетителя: неговата парола е сложна, средна или слаба, а също така ще проверим дали е твърде кратка.
$("#pass").keyup(function(e) ( var strongRegex = new RegExp("^(?=.(8,))(?=.*)(?=.*)(?=.*) (?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.(7,))(((?=.*)(?=.*) )|((?=.*)(?=.*))|((?=.*)(?=.*))).*$", "g"); var enoughRegex = new RegExp("( ?=.(6,)).*", "g"); if (false == достатъчноRegex.test($(this).val())) ( $("#passstrength").html("Още знаци "); ) else if (strongRegex.test($(this).val())) ( $("#passstrength").className = "ok"; $("#passstrength").html("Strong!" ); ) else if (mediumRegex.test($(this).val())) ( $("#passstrength").className = "alert"; $("#passstrength").html("Medium!") ; ) else ( $("#passstrength").className = "error"; $("#passstrength").html("Weak!"); ) return true; ));
11. Преоразмеряване на изображение с jQuery
Разбира се, по-логично е да преоразмерявате изображения от страна на сървъра с помощта на PHP и GD, но има ситуации, когато това трябва да се направи от страна на клиента. И jQuery отново ще ни помогне с това.
$(window).bind("load", function() ( $("#product_cat_list img").each(function() ( var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $( this).width(); var height = $(this).height(); if(width > maxWidth)( ratio = maxWidth / width; $(this).css("width", maxWidth); $(this) .css("height", height * ratio); height = height * ratio; ) var width = $(this).width(); var height = $(this).height(); if(height > maxHeight)( съотношение = maxHeight / височина; $(this).css("height", maxHeight); $(this).css("width", width * ratio); width = width * ratio; ) )); //$( "#contentpage img").show(); // ПРЕОМЕРЕНИЕ НА ИЗОБРАЖЕНИЕТО ));
12. Зареждане на съдържание при превъртане надолу по страницата
Тази техника често се нарича безкрайно превъртане. Съдържанието се зарежда, докато потребителят превърта страницата. Това е достатъчно лесно за изпълнение с кода по-долу.
