Използване на Ajax с PHP и Sajax
Преди започване на работа
Относно това ръководство
Ще научите за Ajax и предизвикателствата при използването му. Също така ще създадете приложение PHP Ajax, което показва панелите с раздели на предварително написания урок. Избирането на връзка към панел ще изтегли само съдържанието на раздела и ще го замени със съдържанието на избрания панел, спестявайки честотна лента и намалявайки времето за зареждане на страницата. След това интегрирате Simple Ajax Toolkit (Sajax) в приложението Ajax, което ще синхронизира използването на Ajax, опростявайки разработката.
Предпоставки
За работа с ръководството са необходими следните инструменти:
уеб сървър
Изберете всеки уеб сървър и операционна система. Можете да използвате Apache 2.X или HTTPServer от IBM.
PHP
Можете да продължите без PHP, но ако се интересувате от взаимодействие с примерното приложение, изтеглете PHP V5.
Саякс
Имате нужда от Sajax. Това е еднофайлова PHP библиотека с функции, използвана в този урок.
уеб браузър
Преди да се потопите в детайлите, запознайте се с Ajax, примерно приложение за PHP и Sajax.
Ajax дава възможност на уеб разработчиците да създават интерактивни уеб страници, които актуализират съдържанието им, без да се налага да ги презареждат напълно. Използвайки Ajax, можете да създавате приложения, които с едно щракване на бутон променят съдържанието на един раздел на уеб страница. Не е необходимо да чакате цялата страница да се зареди - зарежда се само съдържанието на този един раздел. Погледнете например Google Maps: можете да изберете и преместите картата, без да чакате зареждане на страници.
Проблеми с Аякс
Примерно PHP приложение
Да предположим, че искате да създадете приложение на Ajax, без да мислите за сложните детайли на Ajax. Имате нужда от Sajax. Sajax абстрахира детайлите на Ajax на високо ниво от уеб разработчика, като използва библиотека, разработена от екипа на ModernMethod. По принцип Sajax работи по подобен начин на Ajax. Въпреки това, използвайки функциите на високо ниво, предоставени в библиотеката на Sajax, техническите подробности за Ajax могат да бъдат игнорирани.
Какво е Ajax?
Зад сцената
CSS кодът се използва за създаване на връзки с span тагове
Кодът CSS е необходим в примерното приложение, за да накарат маркерите на span да се показват като реални връзки, създадени от обикновения котва на маркера () и да кликват като реални връзки.
Листинг 1. Посочване на информация за дисплея за обхвати
Тези обхвати се използват в примерното приложение и цветът съвпада, който се използва за връзки във всеки урок на IBM developerWorks. Първият ред в стила на маркера показва, че след щракване върху връзката цветът му остава същият. Когато преместите курсора на мишката върху връзка, тя се подчертава и курсорът приема формата на указател, използван за обикновени закотвени тагове (). Нека разгледаме процеса на създаване на връзки с помощта на този CSS код.
Създаване на връзки с помощта на span tag
XMLHttpRequest обект
Ако използвате Mozilla, Opera или други браузъри от това семейство, съдържанието на страницата ще бъде извлечено динамично с помощта на вградения обект XMLHttpRequest. Internet Explorer на Microsoft използва различен обект, който ще обсъдим следващото. Тези обекти се използват по същия начин и са необходими няколко допълнителни реда код, за да се поддържат и двата обекта.
Листинг 2. Инициализиране и използване на обекта XMLHttpRequest
Заглавието на страницата ще бъде заглавие на раздел от предварително написаното ръководство. Методът на кодиране е посочен с помощта на мета таг и вие сте конфигурирали вашия HTML документ да използва тагове за обхват като връзки. След това ще дефинирате тези връзки.
Създайте връзки в страничната лента
Преди да създадете връзки, трябва да персонализирате страничната лента. Включете заглавен файл, който можете да изтеглите, заедно с всички останали файлове на приложението:
Листинг 7. Създаване на 10 връзки
