В данной статье я расскажу, как написать на чистом 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
