Recently I found very strange behavior of IE8/9 when sending XHR data. I'd like to ask you if you have ever seen such behavior? Is it IE bug? How can I protect my server from "empty" request generated by IE? Here are more details:
I found out that when your page tries to send XHR data and JavaScript freezes or lags browser, IE lags sending POST data to server. To make it clear, here are steps to reproduce:
Create simple server which dumps POSTs received. I've used Node.JS for tests. You can find corresponding codes at the bottom of the post.
Open localhost:8080 in IE, open debug window and start debuging scripts with breakpoint set in line 51 of file localhost:8080
Hit Send by JQuery. You should have your javascript waiting on the breakpoint and server logged message:
--------------------------------------
14:04:19
REQUEST: /
HTTP HEADER:
accept = text/html, application/xhtml+xml, */*
accept-language = pl-PL
user-agent = Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
accept-encoding = gzip, deflate
host = localhost:8080
connection = Keep-Alive
--------------------------------------
14:04:35
REQUEST: /test
HTTP HEADER:
accept = */*
content-type = application/json
x-requested-with = XMLHttpRequest
referer = http://localhost:8080/
accept-language = pl
accept-encoding = gzip, deflate
user-agent = Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
host = localhost:8080
content-length = 24
connection = Keep-Alive
cache-control = no-cache
When you release JavaScript from the breakpoint server reports incoming data by new line:
POST: {"data1":10,"data2":123}
I've done the same test on Opera 12.15 and Chrome 27.0.1453.94 m and, as expected, POST data are sent immediately.
-- source codes --
Code for node.js server:
var http = require('http');
var qs = require('querystring');
var fs = require('fs');
http.createServer(function (req, res) {
console.log('--------------------------------------');
console.log(new Date().toLocaleTimeString());
console.log('REQUEST: ' + req.url);
console.log('HTTP HEADER: ');
for (var header in req.headers) {
console.log(' ' + header + ' = ' + req.headers[header]);
}
switch (req.method) {
case 'POST':
var body = '';
req.on('data', function (data) {
body += data;
});
req.on('end', function() {
console.log('POST: ' + body);
});
res.writeHead(200, {'Content-type': 'application/json'});
res.end(JSON.stringify({ succeeded: true, value: 'Hello world!' }));
break;
case 'GET':
fs.readFile('./servertest.html', function (err, data) {
if (err) {
throw err;
}
res.writeHeader(200, {'Content-type': 'text/html'});
res.end(data);
});
break;
}
}).listen(8080, 'localhost');
console.log('listening on localhost:8080');
Code for servertest.html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<button onclick="send()">Send by JQuery</button>
<button onclick="sendXHR()">Send by XHR</button>
</body>
<script type="text/javascript">
var _xhr;
function sendXHR() {
_xhr = new XMLHttpRequest();
new XHRStateChangeListener();
var url = '/testXHR';
var method = 'POST';
_xhr.open(method, url);
_xhr.setRequestHeader("Content-Type", "application/json");
_xhr.send(JSON.stringify({test: 'this is a test', aoawiejf:23423}));
}
function XHRStateChangeListener() {
callback = function() {
var msg;
if (_xhr.readyState == 4 && /200|304/.test(_xhr.status)) {
alert('ready: ' + _xhr.responseText);
}
};
_xhr.onreadystatechange = callback;
}
function send() {
$.ajax({
url: '/test',
type: 'POST',
data: JSON.stringify({data1: 10, data2: 123}),
contentType: 'application/json',
error: function(xhr, status, err) {
alert('Error: ' + err + '\nStatus: ' + status);
},
success: function (data) {
alert('succeeded! data: ' + data);
}
});
}
</script>
</html>
You are using sync-mode, right is async-mode:
replace
_xhr.open(method, url);
by
_xhr.open(method, url, true);//Async mode
Note: Remember "onreadystatechange" is only for async-mode
the problem may also be in this function (just a guess):
JSON.stringify
try sending empty data, ie: data:""
Related
Hello I want to upload photo from my computer to https://generated.photos/anonymizer , I keep getting alert error in bodyz "Empty message body supplied with multipart form-data", Please help me with coding.
I want it to work like that https://i.imgur.com/CE6i4pE.png
var request = require("request");
var upfile = 'src/All/1.jpeg';
fs.readFile(upfile, function(err, content){
if(err){
console.error(err);
}
let url = "https://api.generated.photos/api/frontend/v1/images/similars";
let data = "";
data += "------WebKitFormBoundaryVIBbTfQEhARYeJqm" + "\r\n";
data += "Content-Disposition: form-data; name=\"file\"; filename=\"zeta\"\r\n";
data += "Content-Type: image/jpeg\r\n\r\n";
let payload = Buffer.concat([
Buffer.from(data, "utf8"),
new Buffer(content, 'binary'),
Buffer.from('\r\n------WebKitFormBoundaryVIBbTfQEhARYeJqm\r\nContent-Disposition: form-data; name=\"per_page\"\r\n\r\n1\r\n------WebKitFormBoundaryVIBbTfQEhARYeJqm--', "utf8"),
]);
let options = {
method: 'post',
url: url,
headers: {"Authorization": "API-Key Cph30qkLrdJDkjW-THCeyA", "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36","Content-Type": "multipart/form-data; boundary=----WebKitFormBoundaryVIBbTfQEhARYeJqm" , "Content-Length": content.length },
body: payload,
};
request(options, function(error, response, bodyz) {
alert(bodyz);
// after i make it work i will do
// var response_data_parsed = JSON.parse(bodyz);
// alert(response_data_parsed.images.thumb_url)
});
});
Remove
"Content-Length": content.length
And all working. Thanks anyway
My webpage is able to get ajax data with the following code
$.ajax({
type: 'POST',
url: "/get_cache_transactions",
async: true,
data:
JSON.stringify({
a: 11,
b: 22,
c: 33
}),
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function (data) { process_cache_changes(data) },
error: function (xhr, ajaxOptions, thrownError) { }
})
but on the node express server can't read the parameter a, b, or c from the web page.
The nodejs express code is as follows
var express = require('express');
var app = express();
var handlebars = require('express-handlebars').create({ defaultLayout: 'main' });
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');
app.use(require('body-parser').urlencoded({ extended: true }));
app.post('/get_cache_transactions', function (req, res) {
console.log("************************************************************************************************")
>>> how to I get value of a, b, c ?????
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify(pic_cache.cache, null, 2));
});
I tried printing out all of the attributes of req and nothing appears to contain a,b,or c. I tried to look at req.body and again nothing.
for (i in req.body){console.log(i)}
Also, my dependencies for this project are
"dependencies": {
"body-parser": "^1.15.1",
"cookie-parser": "^1.4.3",
"express": "^4.13.4",
"express-handlebars": "^2.0.1",
"express-session": "^1.13.0",
"formidable": "^1.0.17",
"fs": "0.0.2",
"parseurl": "^1.3.1"
},
in the chrome debugger (f12), i select network and see the following for the Post
General
Request URL:http://localhost:1662/get_cache_transactions
Request Method:POST
Status Code:200 OK
Remote Address:[::1]:1662
Response Headers
view source
Response Headers
Connection:keep-alive
Content-Length:631
Content-Type:application/json; charset=utf-8
Date:Sun, 26 Jun 2016 20:31:40 GMT
ETag:W/"277-PiWC2Y6iMvjEI1tGjkMrcw"
Request Headers
view source
Request Headers
Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:22
Content-Type:application/json; charset=UTF-8
Cookie:connect.sid=s%3AOgJ3NCHzZpte0fSsxdLRDHK6Dggql1nC.entV9uoy%2BAHG5C3rNmt%2BrzdbZ9RDwDr%2B2FAqdx5%2BZKk
Host:localhost:1662
Origin:http://localhost:1662
Referer:http://localhost:1662/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payload
view source
{a: 11, b: 22, c: 33}
a
:
11
b
:
22
c
:
33
So we know the a,b,c are being sent.
You are sending the data in JSON format. Try below code snippet for using the body-parser middleware & accessing the required values
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.post('/get_cache_transactions', function (req, res) {
var a = req.body.a;
var b = req.body.b;
var c = req.body.c;
//Rest of the code
})
Client
$.ajax({
type: 'POST',
url: "/get_cache_transactions",
data: {
a: 11,
b: 22,
c: 33
},
dataType: 'json',
success: function (successResponse) { },
error: function (errorResponse) { }
});
Server
app.post('/get_cache_transactions', function (req, res) {
var a = req.body.a; // same for b and c
res.json(pic_cache.cache);
});
I am using dataUrl to populate my dropdown in form edit of jqGrid, but i am not getting any response from server. what am i missing? fiddler shows no error
editoptions: {
dataUrl: "CurrencySetting.aspx/GetDet",
buildSelect: function (response) {
alert(response.responseText);
var data = typeof response === "string" ?
$.parseJSON(response.responseText) : response;
s = "<select>";
s += '<option value="0">------</option>';
$.each(data, function () {
s += '<option value="1">' + this.CurrencyCd +
'</option>';
});
return s + "</select>";
}
}
server code:
public static string GetDet()
{
SysDataContext db = new SysDataContext();
var query = (from SC in db.SysCurrencySettings
select new
{
SC.CurrencyCd
}).ToList();
return JsonConvert.SerializeObject(query);
}
HTTP response
HTTP/1.1 200 OK
Server: ASP.NET Development Server/10.0.0.0
Date: Thu, 22 Oct 2015 11:10:23 GMT
X-AspNet-Version: 4.0.30319
Cache-Control: private
Content-Type: text/html; charset=utf-8
Content-Length: 15497
Connection: Close
I am having a web application which is sending a request to my node.js. Node module is calling my Spring REST module.
My web application to node call is as below
$.ajax({
type : "POST",
url : "http://localhost:9090/module",
dataType : 'json',
data : msgDetails,
xhrFields : { withCredentials : true },
success : function(data) {
console.log("getInbox" + JSON.stringify(data.message));
}, error : function(data) {
alert("Error in the AJAX response." + data);
} });
my node is as below
var express = require("express"),
app = express(),
http = require("http").createServer(app);
var requestObj = require('request');
responseBody = "";
indexresponseBody = null;
app.use(express.bodyParser());
app.post('/module', function(req, res){
var tempInbox = "";
var tmp = req;
var authKey = req.body.pubKey;
var reqBody = req.body;
console.log("POST"+" - "+JSON.stringify(reqBody)+" - "+authKey);
restCMCall("http://ip:port/restmodule/controller/call", req, res,authKey,reqBody);
//res.end(JSON.stringify(body));
res.header('Content-Type', 'application/json');
//resp.header('Charset', 'utf-8');
res.send({"name1":"name"});
});
function restCMCall(resturl, req, res, authKey,reqBody){
var i = 0;
console.log("reqBody :- "+reqBody+" resturl "+resturl+" "+i++);
requestObj({
url : resturl,
method : "POST",
headers : { "Content-Type" : "application/json","pubKey":authKey},
body : JSON.stringify(reqBody)
},
function (error, resp, body) {
tempInbox = body;
console.log(resp+" inbox body :- "+" -------- "+i++);
//resp.writeHead(200, {'Content-Type':'application/json','charset':'UTF-8'});
//res.write(JSON.stringify({"hello":"xxx"}));
//res.end(JSON.stringify(body));
res.header('Content-Type', 'application/json');
//resp.header('Charset', 'utf-8');
res.send(body);
}
);
console.log(i++);
}
Till now I am able to get the response from the spring module and is able to print on node console. But when I am trying to add this response in response of request made by web application then it is not sent.
In Firefox Browser firebug it shows as
Response Headers
Connection keep-alive
Content-Length 21
Content-Type application/json
Date Mon, 07 Oct 2013 16:13:38 GMT
X-Powered-By Express
but response tab as blank.
I am using express module to call spring rest web service calls node.js.
Please let me know if I am missing anything. I have also tried using
response.json(body)
But this is also not working.
I believe you should be making the request to url : "http://localhost:9090/getInbox" because you have not created an endpoint in your Node app that matches POST: /module
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript">
function funcSendSMS(numbers, smsmessage)
{
alert(numbers);
var num = numbers;
var msg = smsmessage;
$.ajax({
type: "GET",
url: "http://sms.vrksolutions.com/messageapi.asp",
data: "username=xxxxxx&password=xxxxxx&sender=xxxxxx&mobile="+num+"&message="+msg,
async: false,
cache: false,
success: function(resp){
// we have the response
alert("Server said:\n '" + resp + "'");
},
error: function(e){
alert('Error: ' + e);
}
});
}
</script>
<script language="javascript">
funcSendSMS('<?php echo $phnos ?>', '<?php echo $smsmsg;?>');
</script>
I got below error in IE
Webpage error details
User Agent: Mozilla/4.0 (compatible;
MSIE 7.0; Windows NT 6.1; Trident/4.0;
GTB6.6; SLCC2; .NET CLR 2.0.50727;
.NET CLR 3.5.30729; .NET CLR
3.0.30729; Media Center PC 6.0; InfoPath.2) Timestamp: Tue, 12 Apr
2011 13:22:58 UTC
Message: Access is denied.
Line: 138
Char: 355
Code: 0
URI: https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
at this lane i found
below code in min.js file
A.src=b.url;if(!d){var C=false;A.onload=A.onreadystatechange=function(){
if(!C&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete"))
{C=true;c.handleSuccess(b,w,e,f);c.handleComplete(b,w,e,f);
A.onload=A.onreadystatechange=null;r&&A.parentNode&&r.removeChild(A)}}}
r.insertBefore(A,r.firstChild);return B}var J=false,w=b.xhr();
if(w){b.username?w.open(h,b.url,b.async,b.username,b.password)
:w.open(h,b.url,b.async);try{if(b.data!=null&&!l||a&&
a.contentType)w.setRequestHeader("Content-Type",
try this:
$(function(){
funcSendSMS('<?php echo $phnos ?>', '<?php echo $smsmsg;?>');
});
or
function Load() {
var a = false;
try {
var test = $('*');
if(test == null)
throw 1;
}
catch (e) { a = true; }
if (a){setTimeout(Load, 300);return;}
funcSendSMS('<?php echo $phnos ?>', '<?php echo $smsmsg;?>');
}
setTimeout(Load, 300);
Make sure you are not doing a cross domain request through AJAX.
http://sms.vrksolutions.com/messageapi.asp
I'm going to guess that it's a cross domain scripting issue. You can't do a regular AJAX call from one domain to another for security reasons. This article should set you straight on the security issues and how to get started with JSONP.