Запрос JavaScript Ajax vs jQuery $ .ajax

ПРИМЕЧАНИЕ . Я вложил больше кода, чем просто вызовы ajax, во-вторых, этот код (часть) вызывает проблему. Я не думаю, что это так, поэтому вам, вероятно, лучше сосредоточиться на функциях ajax и jAjax немного дальше.
Также обратите внимание, что, поскольку есть комментарий (с повышением) по этому вопросу, говорящий, что мой код трудно расшифровать, я бы с радостью прояснил, что нужно уточнить, если это может оказаться ключом к поиску проблемы.
Благодарю.


Вот что. Я пытаюсь вырезать jQuery, так как единственное, что я использую, это метод $.ajax() , и в том числе целый lib, такой как jQuery только для одной функции, является IMO сумасшедшим. В любом случае мне даже не нужна полная функциональность метода $.ajax , поэтому я написал свою собственную функцию ajax .

Проблема в том, что она не работает, и я не могу понять, почему. Я пытаюсь отправить объекты на сервер (в частности: ajaxAction в контроллере – с помощью Zend FW). Ниже приведен код javascript и краткое описание того, что мне сообщает консоль firebug.

 if (!String.prototype.trim) { String.prototype.trim = function() { "use strict"; return this.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); }; } function getUrl(action,controller) { var base,uri; base = window.location.href.replace('http://'+window.location.host,''); if (base.length > 1) { base = base.substring(1,base.length).split('/'); controller = controller || base[0]; base[0] = controller || base[0]; base[1] = action || base[1]; return '/'+base.join('/'); } controller = controller || 'index'; action = action || 'ajax'; return base+controller+'/'+action; } function formalizeObject(obj,recursion) { recursion = recursion || false; if (typeof obj !== 'object') { throw new Error('no object provided'); } var ret = ''; for (var i in obj) { if (!obj.hasOwnProperty(i) || typeof obj[i] === 'function') { continue; } if (recursion) { ret +='['+i+']'; } else { ret += (ret.length > 0 ? '&' : '') + i.toString(); } if (typeof obj[i] === 'object') { ret += formalizeObject(obj[i],true); continue; } ret += '='+obj[i].toString(); } if (recursion) { return ret; } return encodeURI(ret); } function success() { if (this.readyState===4 && this.status===200) { console.log(this.responseText); } } function ajax(str,url,method,json) { var ret; json = json || false; str = str || {}; method = method || 'POST'; url = url || getUrl(); str = str = (typeof str === 'object' ? str : {data:str}); try { ret = new XMLHttpRequest(); } catch (error) { try { ret= new ActiveXObject('Msxml2.XMLHTTP'); } catch(error) { try { ret= new ActiveXObject('Microsoft.XMLHTTP'); } catch(error) { throw new Error('no Ajax support?'); } } } if (typeof ret !== 'object') { throw new Error('No Ajax, FFS'); } ret.open(method, url, true); ret.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); ret.setRequestHeader('Content-type', (json ? 'application/json' : 'application/x-www-form-urlencode')); ret.onreadystatechange = success; ret.send((json ? JSON.stringify(str) : formalizeObject(str))); return true; } function jAjax(str,url) { $.ajax( { url : url, data: str, type: 'POST', success: function(res) { console.log(res); } }); } 

Четыре способа, с помощью которых я пытался сделать запрос Ajax:

 jAjax({data:{foo:'bar'}},getUrl());//1 jAjax({data:{foo:'bar'}},getUrl(),true);//2 ajax({data:{foo:'bar'}},getUrl());//3 ajax({data:{foo:'bar'}},getUrl(),true);//4 
  1. jAjax({data:{foo:'bar'}},getUrl()); : Это прекрасно работает:

    [] { "Ajax": правда, "контроллер": "Указатель", "действие": "Ajax", "модуль": "по умолчанию", "идентичность": {}, "данные": { "Foo":» Bar "}} Параметры: data [foo] 'bar' И Источник: данные% 5Bfoo% 5D = Bar (со вкладки POST в консоли FB) Заголовок: application / x-www-form-urlencoded; кодировка = UTF-8
    Все это было отправлено по следующему URL: http://www.foo.bar/index/ajax?data%5Bfoo%5D=bar

  2. Однако это не работает:

    [] {"ajax": true, "controller": "index", "action": "ajax", "module": "default", "identity": {}} является ответной вкладкой POST в FB: данные JSON : {foo: 'Bar'} source: {"data": {"Foo": "Bar"}} (но тот же url – случай 1) Заголовок: json; кодировка = UTF-8

  3. Это большой : полный URL-адрес запроса идентичен URL-адресу из случая 1, также как и заголовки, но когда я смотрю вкладку POST на консоли FB (проверяйте запрос). Это единственное различие, которое я могу найти:

    case 1: Параметры: data [foo] 'bar' Источник: данные% 5Bfoo% 5D = Bar
    В этом случае я не вижу раздел «Параметры», только: Источник: данные% 5Bfoo% 5D = Bar

  4. Идентичен case2, за исключением URL-адреса, который, я думаю, забыл пройти через encodeURI . Этот случай сейчас менее важен. Я думаю / надеюсь, что я получу эту работу, когда выясню, что случилось с случаем 3.

Во всех 4 случаях запрос отправляется и принимается. Действие контроллера выглядит следующим образом:

 public function ajaxAction() { $this->_helper->layout->disableLayout(); $this->getHelper('viewRenderer')->setNoRender(); $this->_helper->getHelper('AjaxContext')->addActionContext( 'ajax' , 'json' ) ->initContext('json'); if($this->getRequest()->isPost() && $this->getRequest()->isXmlHttpRequest()) { echo json_encode(array_merge(array('ajax'=>true),$this->_getAllParams())); } else { throw new Exception('no ajax call made??'); } } 

Поскольку я получаю строку JSON, я уверен, что запрос отправлен и имеет правильный заголовок XMLHttpRequest . Почему же я не могу публиковать объекты JSON? Еще более важно: почему случай 3 не работает? Что такое jQuery, о котором я не знаю? Что это, что делает случай 1 работать, но не случай 3?

PS: Это может быть неуместно, но в момент безумия я попытался добавить это: ret.setRequestHeader('Connection','close'); к функции ajax , но я заметил, что в заголовке, который был отправлен, Connection был настроен на сохранение всех. Возможно, это дает кому-то подсказку о том, что пошло не так?

заранее спасибо

Если кто-то задается вопросом, что не так:

 ret.setRequestHeader('Content-type', 'application/x-www-form-urlencode'); 

Должна быть «x-www-form-urlencoded», в конце концов «d»:

 ret.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 

отправка формализованного объекта теперь работает, и я могу избавиться от jQuery 🙂