Початок роботи з AJAX

on November 25, 2008 Джоел на Рейеса на 25 листопада 2008 року

Це керівництво дає деяку довідкову інформацію про Ajax, а потім стрибки право і отримує ви почали з прикладами.

JavaScript був головним чином використовуються для XMLHttpRequest об'єктів на значне число років, але лише нещодавно вона почала отримувати деякі "слава". Багато шуму доводиться робити з багатьма передових веб-додатків з веб-розробників, які розглядають її, нести чепуху, і хочуть, щоб їх власний сайт, щоб мати ті ж самі точні передові додатки / функції. Але деякі з них також пов'язаний з групою людей на AdaptivePath, хто назвав цей додатків Ajax

Ajax для початківців: Що в світі Ajax?

У двох словах? Ну Ajax є рішенням для веб-інтерфейсів.

Як правило, веб-користувач вводить деякі дані або робить простим вибором, і натискає кнопку завершити цей вибір або введення даних і відправляє дані більш ніж на сервері. Сервер поспішно дотримується дані і відсилає назад всі нові веб-сторінки. Після перезавантажити сторінку кожен раз, коли ви хочете зробити що-то дуже дратує, альтернативне час і надзвичайно трудомістким для користувача. XMLHttpRequest resurfaces браузер-сервер для взаємодії позаду сцени, так що користувач може просто тримати в грі з тією же сторінці, навіть якщо елементи на сторінці йде на сервер!

У JavaScript ми завжди були здатні на стороні сервера сценарій, але не все відбувається в браузері за допомогою кількох класичних трюків наші рукава.

Кешування даних у вигляді файлу з JavaScript на сервері, це добре, але це, як правило, не повертає ніякої корисної інформації для JavaScript, яка вимагає, тому його ефективність досить обмежена. Ajax, однак, може отримати повний пакет даних від скрипта дзвінків. Таким чином, "XML" частина назви - яка дійсна тільки там виглядає свого роду, роду, як "Java" частина JavaScript, тому що повернувся даних може бути простий текст або як вам подобається, якщо XML не є вашою бажаної для вибору.

Це тільки відкриває так багато цікавих можливостей. Кожна форма подання, кожне подія JavaScript, і незалежно від інших додатків, тепер може взаємодіяти з серверної бази даних і обробки владу! Дані пошуку, пароль, перевірка справжності, зображення покоління - ви просто назвіть його, Ajax можете активувати його.

Установка Ajax на практиці

Єдине, що обмежує Ajax-розширення веб-додатки вашої фантазії і в браузері підтримку. Mozilla на основі браузерів може це робити, Safari, а також нові версії Internet Explorer, Опера та 8, але не опера 7. Краще слот в альтернативний спосіб робити речі для користувачів, які не настільки дотепний, як потрібно сподіватися на них бути. Крім того, Internet Explorer робить речі дещо інакше (напевно) з усіх інших браузерах, тому дуже важливо працювати код до відповідальності за надоедлівий 80% населення, які покладаються на Explorer.

Зараз на захоплюючі частину! Давайте створювати простий додатків, які можуть приймати введення від користувача, передає його на деяких PHP на сервері, який перевіряє його з базою даних, і повертає результат у браузері використовується. Ми асимілювали її в трьох частинах.

По-перше, ми повинні HTML формі. Як ви можете бачити нижче:

 <html> 
  <head> 
   <title> звіт </ TITLE> 
   <script type='text/javascript' src='xhr.js'> </ SCRIPT> </ HEAD> <body> <form action="fallbackpage.php" method="post"> 
   <p> Ласкаво просимо, студент.  Будь-ласка, введіть свій нарис тут: <textarea name="essay" id="essay"> 
   </ Textarea> <= введення типу "Submit" NAME = "Submit" цінність = "Відправити" onClick = "повернення 
   класами (this.form.essay.value); "> 
   </ P> 
   </ FORM> 
   </ BODY> 
   </ HTML

xhr.js ), the form will just simply submit to the fallback page at fallbackpage.php . Ok, this is where the JavaScript comes in, we’ll take it slow. Примітка: Для користувачів без належної підтримки наших скриптів (найменування xhr.js), форма буде просто представити запасного сторінку на fallbackpage.php. Ок, це коли приходить в JavaScript, ми будемо вважати, повільно.

  функція класу (есе) (

Перше, що ми повинні робити це ініціалізувати об'єкт. Є два шляхи ми повинні зробити це, для різних браузерів.

  / / Mozilla версії 
      якщо (window.XMLHttpRequest) ( 
          xhr = новий XMLHttpRequest (); 
      ) 
      / / IE версії 
      інше, якщо (window.ActiveXObject) ( 
          xhr = новий ActiveXObject ( "Microsoft.XMLHTTP"); 
      )

Ми тоді бігти, що вводяться користувачем щоб зробити його URL-сейф:

      = EncodeURIComponent нарис (есе);

і використання відкритого методу об'єкта, щоб відкрити нове з'єднання з PHP скрипт:

      xhr.open ( "POST", "grade.php");

Цей метод вимагає два аргументи: по-перше, метод HTTP (GET або POST), по-друге, адресу скрипта. Бистрой HTTP заголовок стверджує, що сценарій для його отримання, а потім надіслати метод передає фактичного запиту:

   xhr.setRequestHeader ( 
        "Content-Type ', 
        "Застосування / X-WWW-форма-urlencoded; = кодування UTF-8 '); xhr.send (есе);

Це останній крок не є необхідним для GET запитів, в якому всі данні можуть бути включені до рядка запиту URL.

Отримання остаточних результатів

Ми, нарешті, готовий Чи HTTP запиту ми працювали. readyState property counts up from zero during the request, and shows 4 when the server page has been loaded successfully. ReadyState власності нараховує діяльність з нуля протягом запиту, а також показано, 4 сервери, коли сторінка була завантажена успішно.

  Xhr.onreadystatechange = функція () ( 
        якщо (xhr.readyState == 4) (

responseText property, which contains a string. Якщо фактичний запит працював, то ми можемо отримати результати на стороні сервера скрипт, запрашівая responseText власності, в якому міститься рядок. responseXML property, which can hold a full document object of XML data, is an option also accessible. Для більш складних сервер скрипт висновку, responseXML власності, які можуть провести повний документ об'єкта XML дані, опції також доступні.

  Клас = xhr.responseText; 
        сповіщення ( "Ніцца есе. Ваша оцінка є" + клас); 
      ) 
      повернутися хибним; 
   )

На закінчення слід зазначити, що третій компонент складається з PHP скрипт, який в основному живе на сервері, і терпляче чекає на JavaScript передати їй деякі дані, соковита з тим щоб вона могла процвітати. Цей приклад використовує PHP, але й на будь-якій мові ви хотіли - Ruby, Perl, C, ASP - можуть вирішувати ваші потреби, як добре. grade_essay() that grades student essays from 1 to 100, but I will redact that part to conserve space. Суть цього прикладу сценарію є природною мовою функція називається grade_essay (), що класи студентські есе від 1 до 100, але я буду redact, що частина для збереження простору.

   <? PHP 
   Функція grade_essay ($ есе) ( 
        повернутися strlen ($ есе); 
   ) 
   $ Есе = urldecode (підривати (файл ( 'PHP: / / введення'))); 
   $ Клас = grade_essay ($ есе); 
   відлуння $ класів; 
  ?>

php://input grabs the POST data, which gets put into a string, decoded and passed to the clever grading algorithm. PHP: / / введення вистачає POST дані, які отримує введено в рядок, декодіруются та передаються розумний алгоритм сортування. Алгоритм повертає числове класу. echo - ordinarily, this would display in the browser, but since the PHP script is running “behind the scenes,” the string output is simply returned to the JavaScript that called it. Нарешті, ми просто висновок класів з відлуння - звичайно, це буде відображатися в браузері, але оскільки PHP скрипт працює "за лаштунками", рядок виведення просто повертаються в JavaScript, що назвав його. text/xml . Якщо вам потрібно структурованих даних, XML документ повинен бути вихід з відлуння заяву лише в той же шлях, але зміст-типу виведення сторінок в основному повинні бути встановлені в текст / XML.

Те, що користувач бачить це так: він їх видів в есе, текст області в браузері, кліки уявити, і в мить готовності спливаюче вікно дає йому / їй остаточний клас з есе. Невидимо, есе були відправлені на сервер, читати і оцінювати команди PHP ельфов, і неминуче повернулася в клас, без ніколи не перезавантажити сторінку. Користувач може змінити її есе та повторіть це постійно.

І це загальне зміст майже магічний об'єкт XMLHttpRequest! Прикладом є досить простий і прямий вперед, але використання об'єкта може бути високою, багаторічних розумний.

Для подальшого натхнення і великих прикладів геніального Ajax додатків ви можете надіслати на мить від SimpleHelp.Net і відвідати iGoogle , Pageflakes , Netflix і Netvibes .