Отправка формы при помощи Ajax (XMLHttpRequest)

Данный набор функций позволяет отправлять данные на сервер при помощи XMLHttpRequest так, что на сервере они будут восприниматься как данные обычной POST-формы. Поскольку кодирование данных осуществляет функция escapeURIComponent(), всегда используется кодировка UTF-8.

/*
Создание XMLHttpRequest-объекта
Возвращает созданный объект или null,
если XMLHttpRequest не поддерживается
*/
function createRequestObject() {
    var request = null;
    try {
        request=new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e){}
    if(!request) try {
        request=new ActiveXObject('Microsoft.XMLHTTP');
    } catch (e){}
    if(!request) try {
        request=new XMLHttpRequest();
    } catch (e){}
    return request;
}

/*
Кодирование данных (простого ассоциативного массива вида
{ name : value, ...} в URL-escaped строку (кодировка UTF-8)
*/
function urlEncodeData(data) {
    var query = [];
    if (data instanceof Object) {
        for (var k in data) {
            query.push(encodeURIComponent(k) + "=" +
                    encodeURIComponent(data[k]));
        }
        return query.join('&');
    } else {
        return encodeURIComponent(data);
    }
}

/*
Выполнение POST-запроса 
url  - адрес запроса
data - параметры в виде простого ассоциативного массива
    { name : value, ...} 
callback - (не обяз.) callback-функция,
    которая будет вызвана после выполнения запроса
    и получения ответа от сервера
*/
function serverRequest(url, data, callback) {
    var request = createRequestObject();
    if(!request) return false;
    request.onreadystatechange  = function() { 
            if(request.readyState == 4 && callback) callback(request);
        };
    request.open('POST', url, true);
    if (request.setRequestHeader)
        request.setRequestHeader("Content-Type",
            "application/x-www-form-urlencoded");
    request.send(urlEncodeData(data));
    return true;
}

Если на сервере проверяется Referer, то надо учитывать, что Firefox при XMLHttpRequest не передает его в заголовках. В этом случае в код следует включить строчку:

request.setRequestHeader("Referer", location.href);

Читайте дальше: Области применения Ajax


.