LOGO AJAX учебник
Ajax быстрый старт, руководство, введение

Что такое AJAX?

AJAX расшифровывается Asynchronous JavaScript And XML (Асинхронный JavaScript и XML).

AJAX - это не новый язык программирования или разметки.
AJAX - это эффективный способ совместного использования HTML, CSS, JavaScript и DOM.

С помощью использования AJAX Вы можете заметно увеличить скорость реакции интерфейса и значительно уменьшить нагрузку на сервер.

Это становится возможным благодаря асинхронному обмену информацией и способностью перезагружать только "обновленную" часть страницы без необходимости перезагрузки страницы целиком.

AJAX используется многими известными веб-приложениями такими как: Facebook, Flickr, Gmail, Google Maps и Youtube и др.

GET запрос

Используется для запроса содержимого указанного ресурса.

Для передачи GET запроса используется

Структура URI
URI = [ протокол ":" ] [ ДОМЕН ] [ "?" запрос ] [ "#" фрагмент ]
На рисунке ниже показана аналогия с адресной строкой в браузере


Клиент может передавать параметры выполнения запроса в URI целевого ресурса после символа «?»:

/path/resource?param1=value1&m2=value2

GET запросы.

Во время обычной отправки формы браузер сам кодирует значения полей и составляет тело GET/POST-запроса для посылки на сервер.

При работе через XMLHttpRequest, это нужно делать самим, в javascript-коде.

Большинство проблем и вопросов здесь связано с непониманием, где и какое кодирование нужно осуществлять.

При работе с кодировкой UTF-8 кодирование всегда идет через encodeURIComponent()

Стандартное кодирование URL:

Пробел представляется как %20, русские буквы и большинство спецсимволов кодируются, английские буквы и дефис оставляются как есть.

Способ, которым следует кодировать данные формы при submit'е, задается в ее HTML-таге:
// метод GET с кодировкой по умолчанию
<form method="get"> 
// enctype явно задает кодировку
<form method="post" enctype="application/x-www-form-urlencoded"> 
// метод POST с кодировкой по умолчанию (urlencoded, как и предыдущая форма)
<form method="post"> 
Если форма отправляется обычным образом, то браузер сам кодирует (urlencode) название и значение каждого поля данных <input> и отсылает форму на сервер в закодированном виде.

Формируя XMLHttpRequest, мы должны формировать запрос "руками", кодируя поля функцией encodeURIComponent.

Например, для посылки GET-запроса с произвольными параметрами name и lastname, их необходимо закодировать вот так:
// Пример с GET

...

var name = 'Вася';
var lastname= 'Пупкин';

var params = 'name=' + encodeURIComponent(name) + '&lastname=' + encodeURIComponent(lastname);

var url = '/script.html?'+params;

alert(url);

// script.html?name=%D0%92%D0%B0%D1%81%D1%8F&lastname=%D0%9F%D1%83%D0%BF%D0%BA%D0%B8%D0%BD

Создание объекта XMLHttpRequest

В браузере IE, который сейчас постепенно эволюционирует и имеет 11 версию объект XMLHttpRequest является частью ActiveX, причем, что интересно, версии в разных ActiveX отличаются. Поэтому Объект приходится в каждой создавать по-разному.

Что касается более других браузеров таких как Mozilla Opera Chrome Safari.
Для них объект XMLHttpRequest является таким же стандартным как и любой другой объект в JavaScript.

Исходя из выше сказанного, функция образования XMLHttpRequest:
function createXMLHttp() {

    if (typeof XMLHttpRequest != "undefined") { // для браузеров аля Mozilla
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) { // для Internet Explorer (all versions) 

        var aVersions = [
            "MSXML2.XMLHttp.5.0",
            "MSXML2.XMLHttp.4.0",
            "MSXML2.XMLHttp.3.0",
            "MSXML2.XMLHttp",
            "Microsoft.XMLHttp"
        ];

        for (var i = 0; i < aVersions.length; i++) {

            try {
                var oXmlHttp = new ActiveXObject(aVersions[i]);
                return oXmlHttp;
            } catch (oError) {}
        }
        throw new Error("Невозможно создать объект XMLHttp.");
    }
}
Функция возвращает объект XMLHttpRequest.

Если внимательно посмотреть, то можно заметить, что идет проверка на существование объекта XMLHttpRequest в JavaScript браузера, если это не выходит, то производим вызов через ActiveX. Итак объект создан.

Надо будет сразу сказать, что все файлы и прочее должно быть в кодировке UTF-8.

Для преобразования символов в urlencoded формат будем использовать встроенную функцию encodeURIComponent()

Пишем функцию которая и выполняет все действия по отправке GET AJAX запроса.
function getAjax(url, callback) { // функция Ajax GET

    // создаем Объект

    var oXmlHttp = createXMLHttp();

    // подготовка, объявление заголовков
    oXmlHttp.open("GET", url, true);
    oXmlHttp.setRequestHeader("Content-Type", "text/html; charset=utf-8");

    // описание функции, которая будет вызвана, когда придет ответ от сервера
    oXmlHttp.onreadystatechange = function() {

        if (oXmlHttp.readyState == 4) {
            if (oXmlHttp.status == 200) {
                callback(oXmlHttp.responseText);
            } else {
                callback(oXmlHttp.statusText);
            }
        }
    }
    oXmlHttp.send(null);
}
url - это непосредственно адрес куда идет запрос плюс еще переменные которые дописываются.

например отправимся к адресу. http://site.ru/index.php?showforum=38 Получаем следующее:

-обращение идет к файлу по адресу http://site.ru/index.php
-передаваемый параметр, формат GET
-имя переменной - showforum
-значение - 38

и далее PHP получив такой расклад начинает выводить данные согласно запросу.

callback - параметр. тип function (функция)

Чтобы получить то что нам отправит сервер, надо организовать функцию в одним параметром. например:
//выведет нам полученный текст на экран в виде сообщения.
function printGet(text) { 
	alert(text); 
}
в функции getAjax, которую мы будем использовать, callback будет функцией.
getAjax('http://forums.avtograd.ru/index.php?showforum=38',printGet)
Если мы ответа от сервера не ждем, то вместо функции надо написать пустую функцию
getAjax('http://forums.avtograd.ru/index.php?showforum=38',function(e){})
Пример

Для компактности упакуем наши 2 функции в один JavaScript файл

ajax_GET_UTF8.js
function createXMLHttp() {
    if (typeof XMLHttpRequest != "undefined") { // для браузеров аля Mozilla
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) { // для Internet Explorer (all versions) 
        var aVersions = [
            "MSXML2.XMLHttp.5.0",
            "MSXML2.XMLHttp.4.0",
            "MSXML2.XMLHttp.3.0",
            "MSXML2.XMLHttp",
            "Microsoft.XMLHttp"
        ];
        for (var i = 0; i < aVersions.length; i++) {
            try {
                var oXmlHttp = new ActiveXObject(aVersions[i]);
                return oXmlHttp;
            } catch (oError) {}
        }
        throw new Error("Невозможно создать объект XMLHttp.");
    }
}

function getAjax(url, callback) { // функция Ajax GET
    // создаем Объект
    var oXmlHttp = createXMLHttp();
    // подготовка, объявление заголовков
    oXmlHttp.open("GET", url, true);
    oXmlHttp.setRequestHeader("Content-Type", "text/html; charset=utf-8");
    // описание функции, которая будет вызвана, когда придет ответ от сервера
    oXmlHttp.onreadystatechange = function() {
            if (oXmlHttp.readyState == 4) {
                if (oXmlHttp.status == 200) {
                    callback(oXmlHttp.responseText);
                } else {
                    callback(oXmlHttp.statusText);
                }
            }
        }
        // отправка запроса
    oXmlHttp.send(null);
}
Подключим этот файл к форме, на которой будет делать AJAX запрос

form.html
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>


<body>
    <SCRIPT LANGUAGE='JavaScript' src='ajax_GET_UTF8.js'></script>
    <script>
        function showResult(d) {
            document.getElementById('displayText').innerHTML = d;
        }

        function do_get_ajax() {
            var form_val = document.forms[0].ge.value;
            var url = 'pro_get.php?ge=' + encodeURIComponent(form_val);
            getAjax(url, showResult);
        }
    </script>
    <form> Проверка GET
        <br>напишите яблоко
        <input type=text name=ge>
        <p>
    </form><a href="JavaScript:do_get_ajax()">проверить GET</a>
    <p>
        <div id="displayText"></div>
    </p>
</body>

</html>
Роль файла приемника будет выполнять

pro_get.php
<?php

header("Content-Type: text/html;charset=utf-8");

if (!empty($_GET["ge"])) { 
	print '<b>'.$_GET["ge"].'</b> пришло'; 
} else {
	echo 'нет значения';
}
Результат

Откройте пример в новом окне и посмотрите исходный код

 Скачать ajax_get.zip