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

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

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

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

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

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

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

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

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

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

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

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

Ajax

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

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(); }

Категории

ПрограммированиеJavaScriptAjax

Читайте также

Комментарии