Ajax на сайте без заморочек

Уроки по PHP, Javascript и т.п.
Ответить
Alazaur
Разработчик
Разработчик
Сообщения: 1001
Зарегистрирован: 16 окт 2011, 20:25

Ajax на сайте без заморочек

Сообщение Alazaur »

Это не совсем урок, но другого подходящего раздела на форуме не нашлось. В обсуждениях топик потеряется, а может быть кому-то полезным.
Итак для людей, которые не очень сильны в JavaScript и фреймворках, а заюзать Ajax страсть как охота я написал небольшую функцию, которая позволит использовать эту технологию довольно легко.

Код: Выделить всё

function Ajax(variables, success, error){    var request;    var method = variables.method || 'GET';    var data = variables.data || null;    var url = variables.url || null;    var success = success || null;    var error = error || null;        function setrequest()    {        request = (window.XMLHttpRequest && new XMLHttpRequest()) || (window.ActiveXObject && activeX());    }        function activeX()    {        var xhttp;        try {xhttp = new ActiveXObject("Microsoft.XMLHTTP");}         catch (CatchException){xhttp = new ActiveXObject("Msxml2.XMLHTTP");}        return xhttp;    }        this.send = function()    {        setrequest();        request.onreadystatechange = function(){            if (request.readyState == 4){                if (request.status == 200) {                    if(success) success(request.responseText);                } else {                    if(error) error(request.statusText);                }            }        }        if(method == 'GET') {            url += '?'+data;            data = null;        }        request.open(method, url, true);        request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8");        request.send(data);    }}
Как использовать:
Поскольку на этом форуме подавляющее большинство знакомы с вконтактовским API то я решил сделать ее использование приблизительно похожим на вызов методов вконтакта.

Код: Выделить всё

variable = new Ajax({fields list}, CallBackSuccess, CallBackError);
Где
variable - любая создаваемая вами переменная
fields list - список полей необходимых для выполнения запроса. Это:
  • url - URL на который делается запрос.
  • data - данные, которые будут передаваться серверу. Формируется по аналогии GET-параметров в URL, например user_id=777 так же передается и несколько параметров user_id=777&user_name=Alazaur. Разумеется методом POST вы можете и передавать и большие объемы информации, например содержимое TEXTAREA.
  • method - метод передачи данных GET или POST (если не передается то по умолчанию используется GET).
(Поля можно передавать в любом порядке)

CallBackSuccess - функция, которая будет вызвана после ответа сервера. Должна принимать ответ от сервера
CallBackError - функция, которая будет вызвана в случае ошибки. Должна принимать сообщение об ошибке.
Если вам не нужно знать ответ сервера, то можно функции коллбэка не прописывать. Однако делать этого я не рекомендую, поскольку в этом случае вы не будете на 100% уверены отправился ли ваш запрос.

После создания объекта отправляем его вызвав метод send().

Итак пример отправки запроса на сервер:

Код: Выделить всё

 var ajax = new Ajax({method:'POST', data:'user_id=777', url:'http://mysite.ru'}, success, error);ajax.send(); //функции принимающие ответfunction success(input){    alert(input); } function error(input){    alert(input);} 
Пример GET запроса:

Код: Выделить всё

var ajax = new Ajax({data:'user_id=777', url:'http://mysite.ru'}, success, error);ajax.send(); //функции принимающие ответfunction success(input){    alert(input); } function error(input){    alert(input);}
Без CallBack:

Код: Выделить всё

var ajax = new Ajax({data:'user_id=777', url:'http://mysite.ru'});ajax.send();
Рекомендации:
  • Работайте с кодировкой UTF-8 во избежании косяков с передачей кириллических символов. Если же вам по каким-либо причинам нужно работать с другой кодировкой, замените в скрипте:
    request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8");
  • Во избежании косяков, особенно при передаче большого объема данных обрабатывайте передаваемые значения encodeURIComponent(), например:

    Код: Выделить всё

    var ajax = new Ajax({data:'user_id='+encodeURIComponent(777), url:'http://mysite.ru'}, success, error);
Кода в скрипте постарался сделать по минимуму оставив только жизненно необходимое. Протестировано в Firefox, Opera, IE.
Я закончил можете кидаться тапками :D
Alazaur
Разработчик
Разработчик
Сообщения: 1001
Зарегистрирован: 16 окт 2011, 20:25

Re: Ajax на сайте без заморочек

Сообщение Alazaur »

Да, кстати, кому не нужна отложенная отправка по send() вместо кода из первого поста можно использовать этот:

Код: Выделить всё

function ajax(variables, success, error){    var method = variables.method || 'GET';    var data = variables.data || null;    var url = variables.url || null;    var success = success || null;    var error = error || null;    var request = (window.XMLHttpRequest && new XMLHttpRequest()) || (window.ActiveXObject && activeX());    send();        function activeX()    {        var xhttp;        try {xhttp = new ActiveXObject("Microsoft.XMLHTTP");}         catch (CatchException){xhttp = new ActiveXObject("Msxml2.XMLHTTP");}        return xhttp;    }        function send()    {        request.onreadystatechange = function(){            if (request.readyState == 4){                if (request.status == 200) {                    if(success) success(request.responseText);                } else {                    if(error) error(request.statusText);                }            }        }        if(method == 'GET') {            url += '?'+data;            data = null;        }        request.open(method, url, true);        request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8");        request.send(data);    }}
Его использование будет еще проще:

Код: Выделить всё

ajax({data:'user_id=777', url:'http://mysite.ru'}, success, error); function success(input){    alert(input); } function error(input){    alert(input);}
Ответить