博客讨论了一个AJAX代码片段，该代码在上传文件时遇到问题，导致HTTP请求被发送两次。作者注意到`onreadystatechange`事件处理程序在请求过程中触发多次，导致响应被处理两次。解决方案是修改事件处理程序，确保只在请求完成（`readyState === 4`）时执行相关操作。此外，还提到了与CORS（跨源资源共享）相关的OPTIONS请求和预检过程。
Http请求通过AJAX发送2次(Http request is sending 2 times through AJAX)
我的AJAX代码如下：
data = new FormData();
// data="";
paths = "";
// Create a new HTTP requests, Form data item (data we will send to the server) and an empty string for the file paths.
xhr = new XMLHttpRequest();
// Set how to handle the response text from the server
xhr.onreadystatechange = function(ev){
//console.debug(xhr.responseText);
// console.log("success"+xhr.responseText);
try{
console.log($.parseJSON(xhr.responseText));
var data=$.parseJSON(xhr.responseText);
if(data.success=="yes"){
projectCounter++;
var projectName=$.parseJSON(data.arguments);
console.log(projectName.projectName);
console.log('update table');
if(projectCounter==2){
UploadComplete(projectName.projectName);
}
}
}
catch(e){}
};
// Loop through the file list
for (var i in files){
// Append the current file path to the paths variable (delimited by tripple hash signs - ###)
paths += files[i].webkitRelativePath+"###";
// Append current file to our FormData with the index of i
data.append(i, files[i]);
};
// Append the paths variable to our FormData to be sent to the server
// Currently, As far as I know, HTTP requests do not natively carry the path data
// So we must add it to the request manually.
data.append('paths', paths);
// console.log(paths);
// Open and send HHTP requests to upload.php
xhr.open('POST', "upload.php", true);
console.log(data);
xhr.send(this.data);
我面临的问题是它发送http请求2次。 我收到2次Http响应。 我写了console.log(“更新表”)，它显示了2次。 我很困惑为什么我收到2次Http响应，而不是我只发送1个请求的事实？
My AJAX code is as follows:
data = new FormData();
// data="";
paths = "";
// Create a new HTTP requests, Form data item (data we will send to the server) and an empty string for the file paths.
xhr = new XMLHttpRequest();
// Set how to handle the response text from the server
xhr.onreadystatechange = function(ev){
//console.debug(xhr.responseText);
// console.log("success"+xhr.responseText);
try{
console.log($.parseJSON(xhr.responseText));
var data=$.parseJSON(xhr.responseText);
if(data.success=="yes"){
projectCounter++;
var projectName=$.parseJSON(data.arguments);
console.log(projectName.projectName);
console.log('update table');
if(projectCounter==2){
UploadComplete(projectName.projectName);
}
}
}
catch(e){}
};
// Loop through the file list
for (var i in files){
// Append the current file path to the paths variable (delimited by tripple hash signs - ###)
paths += files[i].webkitRelativePath+"###";
// Append current file to our FormData with the index of i
data.append(i, files[i]);
};
// Append the paths variable to our FormData to be sent to the server
// Currently, As far as I know, HTTP requests do not natively carry the path data
// So we must add it to the request manually.
data.append('paths', paths);
// console.log(paths);
// Open and send HHTP requests to upload.php
xhr.open('POST', "upload.php", true);
console.log(data);
xhr.send(this.data);
the issue i am facing is that it is sending http request 2 times. I am recieving Http response 2 times. I have written console.log("update Table") and it is showing 2 times. I am very confused why i am recieving 2 times Http response instead of the fact that i am sending only 1 request?
原文：https://stackoverflow.com/questions/20192142
更新时间：2020-01-06 04:28
最满意答案
您在请求过程中收到多个readyState事件。 您在此处想要的是仅在请求完成时收到通知。
用这个扩展你的处理程序：
if(xhr.readyState === 4 //ready) {
}
更新：原始问题通过简单的相等检查(无类型)解决，这导致假设在某些浏览器中，readyState是包含number的string typed field 。
if(xhr.readyState == 4 //ready) {
}
You are receiving multiple readyState events in the course of a request. What you want here is to only be notified when the request completes.
Extend your handler with this:
if(xhr.readyState === 4 //ready) {
}
UPDATE: The original problem was solved with simple equality check (untyped), which leads to the assumption that in some browsers the readyState is a string typed field containing a number.
if(xhr.readyState == 4 //ready) {
}
相关问答
与跨源资源共享一起使用的OPTIONS请求没有有效负载。 这是一个“预检”请求，以确定服务器是否允许来自您的来源的CORS。 一旦您使用正确的CORS标头响应OPTIONS请求，您将获得带有数据的PUT请求。 有关详细信息，请参阅链接，但基本上： 浏览器使用CORS请求标头发送OPTIONS 。 服务器决定该请求是否可以从该源接受，如果是，则响应适当的CORS响应头。 浏览器以实际PUT响应。 这对您的客户端ajax代码(但不是您的服务器代码)是透明的。 There's no payload to
...
如果您正在使用第三方库Richfaces a4j：jsFunction提供了使用javascript函数调用服务器端方法的功能，以及将序列化为json的对象传递回回调函数的功能：
name="submitApplication"
action="#{jsFunctionBean.actionMethod}"
data="#{jsFu
...
也许你已经预编译了你的资产(javascripts) http://guides.rubyonrails.org/asset_pipeline.html maybe you have precompiled your assets (javascripts) http://guides.rubyonrails.org/asset_pipeline.html
您在请求过程中收到多个readyState事件。 您在此处想要的是仅在请求完成时收到通知。 用这个扩展你的处理程序： if(xhr.readyState === 4 //ready) {
}
更新：原始问题通过简单的相等检查(无类型)解决，这导致假设在某些浏览器中，readyState是包含number的string typed field 。 if(xhr.readyState == 4 //ready) {
}
You are receiving multiple readySta
...
我已经看过很多次了，对我而言，它一直都是萤火虫。 尝试关闭firebug并再次提交请求。 使用fiddler或其他方法来验证请求只执行一次。 My issue was completely unrelated to AJAX. Instead, it was a simple (but obscure) issue where with two textboxes in my form, I was able to hit enter and not have the page reload, b
...
您可以从按钮取消绑定click事件 $(document).unbind('click').on("click", "#btn-main", function () {
//do stuff here
});
要么 $(document).off("click", "#btn-news").on("click", "#btn-news", function () {
});
如果您的表单提交两次，那么您需要稍微更改您的代码 $("#form_news_sort").submit(fun
...
使用$.ajax()返回的jqXHR对象http://api.jquery.com/jQuery.ajax/#jqXHR 编辑 请参阅此处的示例http://jsfiddle.net/mattydsw/j8TSg/我使用prettyprint.js来呈现对象。 Use jqXHR object returned by $.ajax() http://api.jquery.com/jQuery.ajax/#jqXHR EDIT See an example here http://jsfiddle.
...
对于最后2个标题，它们对于浏览器兼容性并不是强制性的。 这些标题用作首选项指示(Accept-Language)和内容优化(If-Modified-Since)。 request.setRequestHeader("Accept-Language", "en");
request.setRequestHeader("If-Modified-Since", lastRequestTime.toString());
在服务器端使用第一个标头来检测查询是从AJAX还是仅通过导航完成的。 较旧的浏览器
...
如果您查看渲染的HTML(浏览器中的“查看源代码”)，您会看到您的javascript看起来像： data:
{
user_1 : 1 ,
user_2 : 2,
user_username : someusername,
user_password : somepassword
},
既然这些是字符串(我假设)，你需要引用它们： data:
{
user_1 : <?php echo $l
...
扫一扫
1213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
