Статьи

Как делать AJAX-запросы с помощью необработанного Javascript

Декабрь 29, 2018

Среды Javascript превратили простые функции AJAX в однострочные. Это совершенно невероятно, учитывая тот факт, что для достижения той же цели с помощью необработанного Javascript потребуется более двадцати. Тем не менее, важно узнать, что находится «под капотом».


Screencast

Получить запрос

Финальный сценарий

Это относительно простой скрипт, который позволит вам асинхронно запрашивать страницы с помощью функции «load (URL, CALLBACK)».

01
02
03
04
05
06
07
08
09
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
// Our simplified «load» function accepts a URL and CALLBACK parameter.
load(‘test.txt’, function(xhr) {
    document.getElementById(‘container’).innerHTML = xhr.responseText;
});
 
function load(url, callback) {
        var xhr;
         
        if(typeof XMLHttpRequest !== ‘undefined’) xhr = new XMLHttpRequest();
        else {
            var versions = [«MSXML2.XmlHttp.5.0»,
                            «MSXML2.XmlHttp.4.0»,
                            «MSXML2.XmlHttp.3.0»,
                            «MSXML2.XmlHttp.2.0»,
                            «Microsoft.XmlHttp»]
 
             for(var i = 0, len = versions.length; i < len; i++) {
                try {
                    xhr = new ActiveXObject(versions[i]);
                    break;
                }
                catch(e){}
             } // end for
        }
         
        xhr.onreadystatechange = ensureReadiness;
         
        function ensureReadiness() {
            if(xhr.readyState < 4) {
                return;
            }
             
            if(xhr.status !== 200) {
                return;
            }
 
            // all is well
            if(xhr.readyState === 4) {
                callback(xhr);
            }
        }
         
        xhr.open(‘GET’, url, true);
        xhr.send(»);
    }
 
// or with jQuery…
$(‘#container’).load(‘test.txt’);
Свойства объекта

Несколько замечаний для рассмотрения во время просмотра

onreadystatechange сработает пять раз, когда запрашивается указанная вами страница.

  • 0: неинициализированный
  • 1: загрузка
  • 2: загружен
  • 3: интерактивный
  • 4: завершено

Значение «4» — это то, что мы ищем. Как только это будет достигнуто, мы знаем, что мы можем выполнить действие с возвращенными данными.

XMLHttpRequest и ActiveXObject

Современные браузеры используют объект «XMLHttpRequest» для выполнения асинхронных запросов. Это означает, что если вы хотите игнорировать IE6, вы можете удалить проверку ActiveXObject — этот раздел.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
if(typeof XMLHttpRequest !== ‘undefined’) xhr = new XMLHttpRequest();
else {
    var versions = [«Microsoft.XmlHttp»,
                    «MSXML2.XmlHttp»,
                    «MSXML2.XmlHttp.3.0»,
                    «MSXML2.XmlHttp.4.0»,
                    «MSXML2.XmlHttp.5.0»];
      
     for(var i = 0, len = versions.length; i < len; i++) {
        try {
            xhr = new ActiveXObject(versions[i]);
            break;
        }
        catch(e){}
     } // end for
}

Вместо этого вы можете просто написать «var xhr = new XMLHttpRequest ();». Будьте осторожны с этим методом. После того, как абстрагируясь от своей собственной функции «загрузки», легко сохранить проверку IE как есть.

Выйти из глобального пространства

Если вы делаете несколько запросов, вы можете рассмотреть возможность перемещения вашего кода в его собственный объект. Затем вместо непосредственного вызова функции load вы используете myObject.load (); Основное руководство для достижения этой цели будет:

01
02
03
04
05
06
07
08
09
10
11
var ajax = {
   load : function() {
// paste here
   },
 
   otherMethod : someFunction() {
// paste here
   }
}
 
ajax.load();

Вывод

Я не сомневаюсь, что некоторые из вас оставят комментарий, в котором говорится что-то вроде: «Зачем мне это делать, если это можно сделать всего одной строкой jQuery?» Ответ в том, что вам нужно узнать, что находится под капотом вашего автомобиля, так сказать. Такие фреймворки, как Mootools и jQuery, сделали Javascript невероятно доступным для дизайнеров. Если вы попадаете в эту категорию, я настоятельно рекомендую вам также взять сырую книгу по Javascript. Нет ничего плохого, на мой взгляд, в обучении одновременно. Просто будьте уверены, что вы изучаете оба!


Это похоже на работу с WordPress, если вы не знаете PHP. Конечно, это возможно — но вы бы действительно этого хотели?

Надеюсь, это поможет вам начать работу! Я хотел бы услышать ваши мысли! Хороших выходных. Увидимся в понедельник или в твиттере!

40
Share: