Как написать на чистом JavaScript е Ajax, get, post запросы

В данной статье я расскажу, как написать на чистом JavaScript е Ajax без использования библиотек.

Ajax — это технология, которая используется с помощью JavaScript. С помощью Ajax можно отправить GET, POST, запросы без обновления страницы.

Для начала нам нужно понять, как работает Ajax. Ajax работает в JavaScript с помощью стандартной функции XMLHttpRequest, но в IE нужно использовать функцию ActiveXObject («Microsoft.XMLHTTP»).

Покажу на примерах, как всё это работает.

Начнём.

Нужно сделать проверку Ajax объекта, чтобы сделать скрипт кроссбраузерно.

Вот код проверки:

var M = {}; // Здесь мы создаём объект для создания методов и свойства.
M._xhr = function(){try {this.a = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {this.a = new ActiveXObject("Microsoft.XMLHTTP");} catch (E) {this.a = false;}} if(!this.a && typeof XMLHttpRequest!='undefined') { this.a = new XMLHttpRequest();}return this.a;}

Потом нужно сделать несколько функций для упращения кода и его удобства. Вот код:

M._d = document;
M._func = function(obj) {return Object.prototype.toString.call(obj) === '[object Function]'; }
M._array = function(obj) { return Object.prototype.toString.call(obj) === '[object Array]'; }
M._ge_by_tag = function(id){ this.p =  M._d.getElementsByTagName(id); this.ct = this.p.length; this.count = 0;do{return this.p[this.count];this.count++;}while(this.count <this.ct)}
M._ge_by_class = function(id){this.p =  M._d.getElementsByClassName(id); this.ct = this.p.length; this.count = 0;do{return this.p[this.count];this.count++}while(this.count <this.ct)}
M._ge_by_id = function(id){return document.getElementById(id);}

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

text:hello world

Где text — это наименование, а hello world — значение запроса.

Вот код обработчика:

M._post = function(q){
var query = [], enc = function(str) {
 if (window._decodeEr && _decodeEr[str]) { return str;} try { return encodeURIComponent(str);} catch (e) { return str; }}; for (var key in q) {
if (q[key] == null || M._func(q[key])) continue; if (M._array(q[key])) {  for (var i = 0, c = 0, l = q[key].length; i < l; ++i) {
   if (q[key][i] == null || M._func(q[key][i])) { continue;} query.push(enc(key) + '[' + c + ']=' + enc(q[key][i]));++c;}
   } else {   query.push(enc(key) + '=' + enc(q[key]));}}query.sort();  return query.join('&');
}

Дальше нужно просто написать GET и POST обработчик. Вот код:

// post
M.post = function(link,d){ var q = (typeof(d.query) != 'string') ? M._post(d.query) : d.query; if(window.history){ 
M._xhr();
var r = M._xhr();
r.open("POST", link, true);r.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');r.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
r.send(q);r.onreadystatechange = function() {if (r.readyState == 4) { if (r.status >= 200 && r.status < 300) {
this.text =  r.responseText;if(d.onDone)  d.onDone(this.text, r); else if(d.onJsonDone)  d.onJsonDone(eval("("+this.text+")"),r); else if(d.onFail) d.onFail = '';			
}else {alert(r.status);}}}}}
// get
M.get = function(link,d){ var q = (typeof(d.query) != 'string') ? M._post(d.query) : d.query; if(window.history){ 
M._xhr();
var r = M._xhr();
r.open("GET", link+"?"+q, true);r.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');r.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
r.send(null);r.onreadystatechange = function() {if (r.readyState == 4) { if (r.status >= 200 && r.status < 300) {
this.text =  r.responseText;if(d.onDone)  d.onDone(this.text, r); else if(d.onJsonDone)  d.onJsonDone(eval("("+this.text+")"),r); else if(d.onFail) d.onFail = '';			
}else {alert(r.status);}}}}}

Сейчас нужно разобраться в коде:

r.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');r.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

Эта строка означает, что мы используем Ajax.
Дальше.

r.open("POST", link, true);
r.send(q);

А это обработчик открывает запрос с сервером, где send отправляет данные.
Этот код для POST запроса, а для GET нужно немного изменить. Нужно просто не отправлять данные с помощью send. Для отправки GET запроса и его данных нужно просто в open после link прибавить вот этот "+"?"+q". Здесь мы отправляем данные в открытом виде. Например:

r.open("GET", link+"?"+q, true);
r.send(null); // Здесь напишем null. поскольку ничего не нужно отправить.<b></b>

test.php?text=hello world

Вот с кодом всё. А теперь как использовать код.

Вот пример:

<!DOCTYPE html>
<html>
<head>
<title>demo test</title>
<script src="Mlib.js"></script>
<script>
window.onload = function(){
M.get("/test.php",{ // M.post or M.get
query:{text:"hello"}, // Значение запроса
onDone:function(a){ // Если всё нормально, то отобразить результат.
M._ge_by_id("result").innerHTML = a;
},
onFail:function(a){ // А если нет. то показать ошибку
alert("Error");
}
});
}
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>

Есть ещё возможность преобразовать результат в JSON.
Вот код:

onJsonDone

Вот и всё. Спасибо.

Полезная ссылка: xmlhttprequest.ru ^[1]