въведение

AJAX означава Aсинхронен JavaScript и XML, а ключът към AJAX е обектът XMLHttpRequest. От MDN:

XMLHttpRequest е API, който предоставя клиентска функционалност за прехвърляне на данни между клиент и сървър. Той предоставя лесен начин за извличане на данни от URL адрес, без да се налага да правите пълно опресняване на страницата. Това позволява на уеб страницата да актуализира само част от страницата, без да прекъсва това, което прави потребителят.

Ето кратък урок, обясняващ как можете да настроите тази функционалност за себе си. Ако не ви се кодира, можете да клонирате моето GitHub repo. Ако искате да следвате, започнете със създаване на папка. В терминал тип mkdir php-xhr .

Инсталирайте PHP

Ако сте писали PHP преди, преминете към следващия раздел. Ако не, и сте потребител на Mac OS X като мен, просто използвайте едноредовия метод за инсталиране, както е показано тук. Ако не сте на Mac, вижте тази страница за подробни инструкции за инсталиране на няколко други платформи. След като го инсталирате, продължете и го тествайте с проста страница „Hello World“. Създайте файл, завършващ на .php, и копирайте следния код. (Забележете, че PHP кодът е обвит в тагове <?php и ?>.) След това стартирайте сървър, като напишете следното в командния ред: php -S localhost:8000. Отворете localhost:8000 в браузъра си и трябва да видите „Hello World“ да се появи. „Повече информация на php.net“.

<html>
 <head>
  <title>PHP Test</title>
 </head>
 <body>
   <?php echo '<p>Hello World</p>'; ?> 
 </body>
</html>

HTML

Нека създадем файл, наречен index.html. Необходимо е да има два компонента:

  1. button, който ще направи XML заявката
  2. a div за показване на съдържанието

Кодът:

// index.html
...
<body>
  <button onclick=refreshData()>Say Hello</button>
  <div id="content" />
</body>
...

Забележете, че бутонът съдържа манипулатор на събития onclick, който извиква функция с име refreshData. Ще се върнем към това скоро.

PHP

След това създайте файл с име hello.php.

// hello.php
<?php
print "<p>Hello World</p>";
?>

JavaScript

Ето къде се случва магията. Обратно в нашия index.html файл, нека създадем тази refreshData функция. Това ще изпълни нашата XML заявка.

// index.html
...
<head>
...
  <script type="text/javascript">
    function refreshData(){
      var display = document.getElementById("content");
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET", "hello.php");
      xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xmlhttp.send();
      xmlhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
          display.innerHTML = this.responseText;
        } else {
          display.innerHTML = "Loading...";
        };
      }
    }
  </script>
...
</head>
...

Нека разбием какво се случва. Първо избираме нашия div и го задаваме на променлива, наречена display. След това създаваме нова XML HTTP заявка, съхранявайки я катоxmlhttp.

След това инициализираме XML заявката с .open(). Първият аргумент е типът на заявката и в нашия случай ние правим заявка „получи“. Вторият аргумент е URL адресът, до който да се изпрати заявката; нашия PHP файл. След това искаме да зададем заглавка на заявка. Това не е технически необходимо за заявки за „получаване“, но ще ни трябва, ако искаме да направим заявка за „публикуване“ и като цяло е добра практика. След това извикваме .send()to — познахте — изпращане на заявката. (Имайте предвид, че когато правите заявка за „публикуване“, .send() може да приеме данни като аргумент, който да изпрати със заявката.)

onreadystatechange е манипулатор на събития, който се активира всеки път, когато „състоянието на готовност“ се промени. Задаваме го равно на функция, която проверява readyState. Когато достигне 4, знаем, че операцията е приключила. (Повече информация за readyState тук.) Също така искаме да сме сигурни, че ще получим отговор 200 (OK). След като успешно получим нашия отговор, искаме да настроим нашия дисплей div равен на текста, който получаваме обратно. В рамките на нашата клауза else, ние задаваме дисплея div на „Зареждане…“, което ще се покаже, преди заявката ни да завърши. В нашия случай заявката ще се извърши бързо, така че може дори да не видите съобщението „Зареждане“ да се появи.

Тествайте го!

В терминала въведете php -S localhost:8000, за да стартирате сървър. Отидете до localhost:8000 в избрания от вас браузър и нашият бутон трябва да се появи. Щракнете върху бутона, за да активирате XML заявката и ако всичко върви добре, под бутона ще се появи „Hello World“.

Това е! Вече можете да добавяте AJAX заявки към вашите проекти.