Вы можете авторизоваться через ВКонтакте, Фейсбук и оставить комментарий


Как правильно послать запрос (Ajax)

Лирическое отступление

Наверно каждый программист, который начал работать с аяксом, столкнулся с проблемой обработки возвращаемых данных.

Описание процесса

Весь процесс происходит следующим образом:

  1. Отправляется запрос серверу
  2. Запрос обрабатывается
  3. Скрипт/файл, к которому выполнялся запрос, выдает результат (обычно в XML-формате)
  4. JavaScript читает результат

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

Поэтому удобнее вынести обработку запроса в отдельную функцию-класс и передавать в нее нужную нам callback-функцию.

Пример использования

Простой вариант

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ajax = new Ajax();
ajax.setUrl('/somefile.xml'); // файл, который возвращает данные в виде XML
ajax.setMethod('GET'); // используем отправку данных методом GET

/**
 * callback-функция onReady
 *
 * Именно здесь выполняется обработка полученных данных
 *
 */


ajax.onReady = function(){return function(xml)
{
    alert('Мы получили XML-файл следующего содержания:'+xml);
}} ();

// выполняем запрос
ajax.connect();

Короткий вариант

Можно использовать совсем короткий вариант вызова класса Ajax

1
2
3
4
(new Ajax('/somefile.xml''get'null'utf-8'function(){return function(xml)
{
    alert('Мы получили XML-файл следующего содержания:'+xml);
}}())).connect();

Ajax

Сам код класса представлен ниже:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
Ajax = function(url, method, vars, encoding, callback, responsetype)
{
    this.xmlHttpRequest = null;

    this.ajax = this;
    this.buffer = null;

    this.url = url || false;
    this.method = method || 'GET';
    this.vars = vars || null;
    this.encoding = encoding || 'utf-8';
    this.onReady = callback || null;
    this.responseType = responsetype || 'xml';

    /**
     * type of return
     *
     */

    this.setResponseType = function(type)
    {
        this.responseType = type;
    }

    /**
     * To set url for ajax connection
     *
     */

    this.setUrl = function(url)
    {
        this.url = url;
    }

    /**
     * Set method: POST|GET
     *
     */

    this.setMethod = function(method)
    {
        this.method = method;
    }

    /**
     * Set vars
     *
     */

    this.setVars = function(vars)
    {
        this.vars = vars;
    }

    /**
     * Set encoding
     *
     */

    this.setEncoding = function(encoding)
    {
        this.encoding = encoding;
    }
    
    /**
     * Check for errors
     *
     */

    this.isError = function()
    {
        return false;
    }

    /**
     * Try to set url connection
     *
     */

    this.connect = function()
    {
        var url = this.url;
        var method = this.method;
        var vars = this.vars;
        var encoding = this.encoding;
        
        if (this.xmlHttpRequest != null)
        {
            this.xmlHttpRequest.open(method, url, true);
            this.xmlHttpRequest.onreadystatechange = function(ajax)
            {
                return function()
                {
                    ajax._progressResponse(ajax.xmlHttpRequest, ajax.responseType);
                }
            } (this);
            
            this.xmlHttpRequest.setRequestHeader("Content-Type""application/x-www-form-urlencoded; charset-"+encoding);
            this.xmlHttpRequest.send(vars);
        }
    }

    /**
     * To progress response to url
     *
     */

    this._progressResponse = function(xmlhttprequest, responsetype)
    {
        var value;
        if ( xmlhttprequest.readyState == 4 )
        {
            if (xmlhttprequest.status == 200 && this.onReady != null)
            {
                switch (responsetype)
                {
                    case 'text':
                        value = xmlhttprequest.responseText;
                        break;
                    
                    case 'xml':
                    default:
                        value = xmlhttprequest.responseXML;
                        break;
                    
                }
                
                this.onReady(value);
            }
            else
            {
                if (this.onReady == null)
                {
                    alert('Не определена функция Ajax.onReady');
                }
            }
        }
    }

    /**
     * Create http request
     *
     */

    this._createXmlHttpRequest = function()
    {
        if (window.XMLHttpRequest)
        {
            this.xmlHttpRequest = new XMLHttpRequest();
            if (this.xmlHttpRequest.overrideMimeType)
            {
                this.xmlHttpRequest.overrideMimeType('text/xml');
            }
        }
        else if (window.ActiveXObject)
        {
            try    {this.xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");}
            catch(e)
            {
                try    {this.xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");}
                catch(e){;}
            }
        }
    }

    this._createXmlHttpRequest();
}
Опубликовано: 16 февраля 2011  ·  Автор: Артём Фёдоров  ·  2679 просмотров

Категория

ГлавнаяПрограммированиеJavaScriptAjaxКак правильно послать запрос (Ajax)

Чтобы оставить комментарий нужно авторизоваться на сайте
или войти через ВКонтакте или Фейсбук

Войти через ФейсбукВойти через Твиттер

Комментарии

Ajax, JavaScript, Программирование

© 2010-2017 expange.ru
При полном или частичном копировании статей сайта, ссылка на источник обязательна.

Хотите узнать больше информации, пишите на: artem@expange.ru

Полезное онлайн  ·  Новости  ·  Изображения  ·  Статьи по датам

О проекте  ·  Правила пользования  ·  Представительства

Благодарности и пожелания