JavaScript Ajax 请求 vs jQuery $.ajax [英] JavaScript Ajax request vs jQuery $.ajax
问题描述
注意:我粘贴了比 ajax 调用更多的代码，以防代码是(部分)导致问题的原因.但是，我不认为是这样，因此您最好将注意力集中在 ajax 和 jAjax 函数上.
另请注意，由于对此问题的评论(带有赞成票)说我的代码难以破译，我很乐意澄清需要澄清的内容，如果这可以证明是找到问题的关键.
谢谢.
NOTE: I've pasted more code than just the ajax calls, on the off chance that code is (part of) what's causing the problem. I don't think it is, however, so you're probably better off focussing on the ajax and jAjax functions a bit further down.
Also note that, since there's a comment (with upvote) on this question saying my code is hard to decipher, I'd happily clarify what needs clarifying if that could prove to be the key in finding the problem.
Thanks.
事情就是这样.我正在尝试放弃 jQuery，因为我唯一使用的是 $.ajax() 方法，并且包括像 jQuery 这样的整个库仅用于 1 个功能是 IMO 疯狂的.我什至不需要 $.ajax 方法的全部功能，因此我编写了自己的 ajax 函数.
Here's the thing. I'm trying to ditch jQuery, since the only thing I use is the $.ajax() method, and including an entire lib like jQuery for just 1 feature is IMO crazy. I don't even need the full functionality of the $.ajax method anyway, hence I wrote my own ajax function.
问题是:它不起作用，我似乎无法弄清楚原因.我正在尝试将对象发送到服务器(特别是:控制器中的 ajaxAction - 使用 Zend FW).下面是 javascript 代码，以及 firebug 控制台告诉我的内容的摘要.
The problem is: it's not working, and I can't seem to figure out why. I'm trying to send objects to the server (specifically: ajaxAction in the controller - using Zend FW). Below is the javascript code, and a summary of what the firebug console tells me.
if (!String.prototype.trim)
{
String.prototype.trim = function()
{
"use strict";
return this.replace(/^ss*/, '').replace(/ss*$/, '');
};
}
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 请求的四种方式:
Four ways in which I've tried to make the Ajax request:
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
jAjax({data:{foo:'bar'}},getUrl());:这很好用:
[]{"ajax":true,"controller":"index","action":"ajax","module":"default","identity":{},"data":{"foo:酒吧"}}参数:data[foo] 'bar' 来源:data%5Bfoo%5D=Bar(来自 FB 控制台的 POST 选项卡)头文件:application/x-www-form-urlencoded；字符集=UTF-8
所有这些都发送到以下网址:http://www.foo.bar/index/ajax?data%5Bfoo%5D=bar
[]{"ajax":true,"controller":"index","action":"ajax","module":"default","identity":{},"data":{"foo":"Bar"}} Parameters: data[foo] 'bar' And Source: data%5Bfoo%5D=Bar (from POST tab in FB console) Header: application/x-www-form-urlencoded; charset=UTF-8
All of this was sent to the following url: http://www.foo.bar/index/ajax?data%5Bfoo%5D=bar
但是这不起作用:
This doesn't work, however:
[]{"ajax":true,"controller":"index","action":"ajax","module":"default","identity":{}} 是响应FB 中的 POST 选项卡:JSON 数据:{foo:'Bar'} 源:{"data":{"Foo":"Bar"}}(但相同的 url 是 case 1)标题:json；字符集=UTF-8
[]{"ajax":true,"controller":"index","action":"ajax","module":"default","identity":{}} is the response POST tab in FB: JSON data: {foo:'Bar'} source: {"data":{"Foo":"Bar"}} (but same url is case 1) Header: json; charset=UTF-8
这是最重要的:完整的请求 url 与案例 1 中的 url 相同，标题也是如此，但当我查看 POST 选项卡时在 FB 控制台中(检查请求)这是我能找到的唯一区别:
This is the big one: the full request url is identical to url from case 1, as are the headers BUT when I look at the POST tab in the FB console (inspect the request) This is the only difference I can find:
case 1: 参数:data[foo] 'bar' 来源:data%5Bfoo%5D=Bar
在这种情况下，我看不到参数部分，只有:来源:data%5Bfoo%5D=Bar
case 1: Parameters: data[foo] 'bar' Source: data%5Bfoo%5D=Bar
In this case, I can't see the Parameters section, only: Source: data%5Bfoo%5D=Bar
与 case2 相同，除了 url，我想我忘记通过 encodeURI 传递.这个案子现在不太重要.我想/希望我能在弄清楚案例 3 有什么问题的那一刻开始工作.
Identical to case2, except for the url, which I think I forgot to pass through encodeURI. This case is less important for now. I think/hope I'll get this working the moment I figure out what's wrong with case 3.
在所有 4 种情况下，请求都被发送和接收.控制器动作如下:
In all 4 cases, the request is sent, and received. The controller action is as follows:
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 不起作用?
Since I'm receiving a JSON string, I'm sure the request is posted, and has the correct XMLHttpRequest header. Why then, can't I post JSON objects? Even more to the point: why is case 3 not working? What is jQuery doing that I'm not aware of? What is it, that makes case 1 to work, but not case 3?
PS:这可能无关紧要，但在疯狂的时刻我尝试添加:ret.setRequestHeader('Connection','close'); 到 ajax 函数，但我注意到，在发送的标头中，Connection 设置为保持活动状态.也许这可以让某人知道出了什么问题?
PS: It might be irrelevant, but in a moment of madness I tried adding this: ret.setRequestHeader('Connection','close'); to the ajax function, but I noticed that, in the header that got sent out, Connection was set to keep-alive all the same. Perhaps this gives someone a clue as to what went wrong?
提前致谢
推荐答案
如果有人想知道出了什么问题:
In case anybody wonders what was wrong:
ret.setRequestHeader('Content-type', 'application/x-www-form-urlencode');
应该是x-www-form-urlencoded"，最后是d":
Should have been "x-www-form-urlencoded", with a "d" in the end:
ret.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
发送一个形式化对象现在可以工作了，我可以摆脱 jQuery :-)
sending a formalized object is now working, and I can get rid of jQuery :-)
这篇关于JavaScript Ajax 请求 vs jQuery $.ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
