We Keep Coding

XMLHttpRequest - Which format does request.send(data) expect for data?

I have to use a XMLHttpRequest, but I don't know which data format is expected by the function request.send(). I searched for too long now.
I tried to pass a JSON object but it does not work:
var request = new XMLHttpRequest();
request.open("GET","fileApi");
var data = {
action: "read",
targetFile: "testFile"
};
request.addEventListener('load', function() {
if (request.status >= 200 && request.status < 300) {
$("#messageOutput").html(request.responseText);
} else {
console.warn(request.statusText, request.responseText);
}
});
request.send(data);
I get updateFile:155 XHR finished loading: GET "http://localhost/cut/public/fileApi".
But no data is received on the server. I made this simple check to approve this:
PHP (server side):
$action = filter_input(INPUT_GET, "action");
$targetFile = filter_input(INPUT_GET, "targetFile");
echo ("action = '$action' | targetFile = '$targetFile'");
exit();
Returns: action = '' | targetFile = ''
Unfortunatelly I can't use jQuery in my application, since the target is a C# Webbrowser (Internet Explorer) and it detects errors in the jQuery file and stops my scripts from working...

I don't know which data format is expected by the function request.send()
It can take a variety of formats. A string or a FormData object is most common. It will, in part, depend on what the server is expecting.
I tried to pass a JSON object
That's a JavaScript object, not a JSON object.
request.open("GET","fileApi");
You are making a GET request. GET requests should not have a request body, so you shouldn't pass any data to send() at all.
GET requests expect data to be encoded in the query string of the URL.
var data = {
action: "read",
targetFile: "testFile"
};
var searchParams = new URLSearchParams();
Object.keys(data).forEach((key) => searchParams.set(key, data[key]));
var url = "fileApi?" + searchParams;
console.log(url);
// and then…
// request.open("GET", url);
// request.send();
Warning: URLSearchParams is new and has limited browser support. Finding a library to generate a query string is left as a (simple) exercise to any reader who wants compatibility with older browsers.

addEventListener is not working in IE11

Below javascript function uploads the chosen file and updates the grid. Its working perfectly in firefox but not in IE11.
Observed that its not executing "ESignature/Registration" function in addEventListener. I kept break point at Registration function. Its not getting hit and not refreshing the grid. Please guide me to fix this problem
$("#lnkAddAttachment").click(function (e) {
if (document.getElementById("txtFile").files[0] != null) {
oFiles = document.getElementById("txtFile").files[0];
nFiles = oFiles.size;
var selectedFile = document.getElementById("txtFile").files[0];
var xhr = new XMLHttpRequest();
var fd = new FormData();
var url = '#Url.Content("~/")' + "ESignature/getFile";
fd.append("file", document.getElementById('txtFile').files[0]);
$("#loadingwrapper").fadeIn();
xhr.open("POST", url, true);
xhr.send(fd);
xhr.addEventListener("load", function (event) {
var url = '#Url.Content("~/")' + "ESignature/Registration";
$('#gridAttachments').load(url + ' #gridAttachments');
$("#loadingwrapper").fadeOut();
}, false);
$('#txtDescription').val('');
$('#txtFile').val('');
return false;
}
});

The "addEventListener" method is supported in Firefox, but it may not be supported in IE. You'll need to use "onreadystatechange" to handle the event of completing the request. Also, you'll want to setup your "onreadystatechange" handler before calling "send"; otherwise it's possible the request to the server will finish before you setup the handler.
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest?redirectlocale=en-US&redirectslug=DOM%2FXMLHttpRequest#Properties

As you're clearly using jQuery already, I'd suggest using $.ajax rather than using XMLHttpRequest directly, which would almost certainly solve the problem.
But if you want to keep using XMLHttpRequest directly for some reason, you most likely need to use readystatechange rather than load; perhaps IE11 doesn't support load, or doesn't support it in whatever compatibility setting it decided to use for your page. If your page is being loaded in some older compatibility mode, it also won't have addEventListener on the XMLHttpRequest object.
As you're not sharing the XMLHttpRequest instance with anyone, the simple way to deal with both of those potential problems is:
xhr.onreadystatechange = function () {
if (xhr.readystate === 4) { // Also consider checking `status`
var url = '#Url.Content("~/")' + "ESignature/Registration";
$('#gridAttachments').load(url + ' #gridAttachments');
$("#loadingwrapper").fadeOut();
}
};
And as Chris points out, move that above the call to .send.
But again: You're using a library that handles these things for you. Use it.

I just changed url as below. it worked. Problem is whenever below url hits IE, it takes from cache and it won't hit Registration function. To make the url unique every time, added new variable called check to url. Its value will be unique everytime and hits Registration function.
var url = '#Url.Content("~/")' + "ESignature/Registration?check=" + new Date().getTime();
Complete code:
$("#lnkAddAttachment").click(function (e) {
if (document.getElementById("txtFile").files[0] != null) {
oFiles = document.getElementById("txtFile").files[0];
nFiles = oFiles.size;
var selectedFile = document.getElementById("txtFile").files[0];
var xhr = new XMLHttpRequest();
var fd = new FormData();
var url = '#Url.Content("~/")' + "ESignature/getFile";
fd.append("file", document.getElementById('txtFile').files[0]);
$("#loadingwrapper").fadeIn();
xhr.open("POST", url, true);
xhr.send(fd);
xhr.addEventListener("load", function (event) {
var url = '#Url.Content("~/")' + "ESignature/Registration?check=" + new Date().getTime();
$('#gridAttachments').load(url + ' #gridAttachments');
$("#loadingwrapper").fadeOut();
}, false);
$('#txtDescription').val('');
$('#txtFile').val('');
return false;
}
});
Thank you T.J. Crowder and Chris for your inputs.

Setting server response data to a variable to work with

Hey guys I am using a executePostHttpRequest function that looks exactly like the code posted below. Currently when I run the function I get a server response with the appropriate data but I am not sure how I can work with the response data? how do I store it in to a variable to work with?
Javascript executePostHttpRequest
function executePostHttpRequest(url, toSend, async) {
console.log("====== POST request content ======");
console.log(toSend);
var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
xmlhttp.open("POST", url, async);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.setRequestHeader("Content-length", toSend.length);
xmlhttp.send(toSend);
console.log("====== Sent POST request ======");
}
Here is what I am doing to execute it. Using Javascript
var searchCriteria = JSON.stringify({
displayName : search_term
});
console.log("Search: "+searchCriteria) //Search: {"name":"John, Doe"}
var response = executePostHttpRequest("/web/search", searchCriteria, true);
console.log(response) //undefined
So currently the console.log for response shows undefined. But if I take a look at the network tab on Chrome Dev Tools and look at the /web/search call I see a JSON string that came back that looks something like this.
[{"id":"1","email":"john.doe#dm.com","name":"John, Doe"}]
I'd like to be able to display the data from this response to a HTML page by doing something like this.
$("#id").html(response.id);
$("#name").html(response.name);
$("#email").html(response.email);
I tried taking another route and using Jquery POST instead by doing something like this.
var searchCriteria = JSON.stringify({
displayName : search_term
});
console.log("Search: "+searchCriteria) //Search: {"name":"John, Doe"}
$.post("/web/search", {
sendValue : searchCriteria
}, function(data) {
$.each(data, function(i, d) {
console.log(d.name);
});
}, 'json').error(function() {
alert("There was an error searching users! Please contact administrator.");
});
But for some reason when this runs I get the "There was an error" with no response from the server.
Could someone assist me with this? Thank you for taking your time to read it.

Your executePostHttpRequest function doesn't do anything with the data it's receiving. You would have to add an event listener to the XMLHttpRequest to get it:
function getPostData(url, toSend, async, method) {
// Create new request
var xhr = new XMLHttpRequest()
// Set parameters
xhr.open('POST', url, async)
// Add event listener
xhr.onreadystatechange = function () {
// Check if finished
if (xhr.readyState == 4 && xhr.status == 200) {
// Do something with data
method(xhr.responseText);
}
}
}
I've added the method parameter for you to add a function as parameter.
Here's an example of what you were trying to do:
function displayStuff(jsonString) {
// Parse JSON string
var data = JSON.parse(jsonString)
// Loop over data
for (var i = 0; i < data.length; i++) {
// Get element
var element = data[i]
// Do something with its attributes
console.log(element.id)
console.log(element.name)
}
}
getPostData('/web/search', searchCriteria, true, displayStuff)

How to load a text file in JavaScript?

I'm creating a simple WebGL project and need a way to load in models. I decided to use OBJ format so I need a way to load it in. The file is (going to be) stored on the server and my question is: how does one in JS load in a text file and scan it line by line, token by token (like with streams in C++)? I'm new to JS, hence my question. The easier way, the better.
UPDATE: I used your solution, broofa, but I'm not sure if I did it right. I load the data from a file in forEach loop you wrote but outside of it (i.e. after all your code) the object I've been filling data with is "undefined". What am I doing wrong? Here's the code:
var materialFilename;
function loadOBJModel(filename)
{
// ...
var req = new XMLHttpRequest();
req.open('GET', filename);
req.responseType = 'text';
req.onreadystatechange = function()
{
if (req.readyState == 4)
{
var lines = req.responseText.split(/\n/g);
lines.forEach(function(line)
{
readLine(line);
});
}
}
req.send();
alert(materialFilename);
// ...
}
function readLine(line)
{
// ...
else if (tokens[0] == "mtllib")
{
materialFilename = tokens[1];
}
// ...
}

You can use XMLHttpRequest to fetch the file, assuming it's coming from the same domain as your main web page. If not, and you have control over the server hosting your file, you can enable CORS without too much trouble. E.g.
To scan line-by-line, you can use split(). E.g. Something like this ...
var req = new XMLHttpRequest();
req.open('GET', '/your/url/goes/here');
req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.status == 200) {
var lines = req.responseText.split(/\n/g);
lines.forEach(function(line, i) {
// 'line' is a line of your file, 'i' is the line number (starting at 0)
});
} else {
// (something went wrong with the request)
}
}
}
req.send();

If you can't simply load the data with XHR or CORS, you could always use the JSON-P method by wrapping it with a JavaScript function and dynamically attaching the script tag to your page.
You would have a server-side script that would accept a callback parameter, and return something like callback1234(/* file data here */);.
Once you have the data, parsing should be trivial, but you will have to write your own parsing functions. Nothing exists for that out of the box.

post xml as a binary file using javascript

I'm trying to write something that can post xml, as a binary file to an external URL (which I have no control over) in JavaScript.
I have YUI3 available to me. And probably jQuery if I needed it.
Any ideas? Everything I've looked at seems to be about receiving xml, rather than posting it.
Edit: The external url is an advertising bot, the xml essentially describes what sort of ad I want to get back.
I'm forced to post as binary. I've tested using-
<form enctype="multipart/form-data" action="http://something.com" method="post">
<input name="anything" type="file">something</file>
<input type="submit">
</form>
and that works. I just need to implement in js.
Edit #2
My solution (couldn't get it formatted properly)-
var AdManager = {
getRandomBoundary : function(){
var today = new Date;
return '---' + today.getTime();
},
fetch : function(){
var boundary = this.getRandomBoundary();
var xhr = new XMLHttpRequest;
var CRLF = "\r\n";
xhr.open('POST', 'http://url.com', true);
xhr.onreadystatechange = function(){
if (xhr.readyState === 4)
{
//Parse xml(badly)
var splitter = xhr.responseText.split('<responsecontent>');
var allAds = '';
for (var i= 1; i< splitter.length; i++)
{
var tempAd = splitter[i].split('</responsecontent>');
allAds += tempAd[0];
}
//Html is returned encoded, so decode.
jQuery('#results').html(jQuery("<div/>").html(allAds).text());
}
};
xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
var mimeReq = "--" + boundary + CRLF;
mimeReq += 'Content-Disposition: form-data; name="arbitrary"; filename="arbitrary.xml"' + CRLF;
mimeReq += 'Content-Type: application/octet-stream' + CRLF + CRLF;
mimeReq += '<?xml version=\"1.0\" encoding=\"utf-8\"?><adrequestpacket responsemarkup=\"wml\" test=\"0\" xmlns=...'+ CRLF;
mimeReq += "--" + boundary + "--" + CRLF;
xhr.send(mimeReq);
}
};
`

I think I understand what your asking, but if I'm totally on the wrong track, the below may appear a little patronising, so apologies in advance...
If all you want to do is send an XML file to a known URL via AJAX its fairly simple in javascript with no lovelies like jQuery etc. I am assuming you have already generated the XML file and have it stored as string variable somewhere.
The below code is a bit messy and fairly basic, but hopefully it should point you in the right direction. There are probably better ways of fetching an AJAX object if you search for them, but this is a method I have used for ages and never really have any problems with.
You will need to write some code to parse the server response to determine whether data was accepted or not - see comments in code for where you would do this. The ajaxObj.status and ajaxObj.responseText properties will be your friends here.
function postXMLToServer (serverURL, xmlStr) {
// Declare some variables
var activeXModes, i, ajaxObj, aSync, contentType;
// Set this to false to perform the request synchronously (i.e. execution will block until request has completed)
aSync = true;
// 'application/octet-stream' is treated as raw binary data by any sensible server.
// It might make more sense to use 'text/xml' or some variant depending on your application
contentType = 'application/octet-stream';
// Fetch an AJAX object
activeXModes = ["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
if (window.ActiveXObject) { // Try ActiveX (for IE)
for (i = 0; i < activeXModes.length; i++) {
try {
ajaxObj = new ActiveXObject(activeXModes[i]);
} catch (e) {}
}
} else if (window.XMLHttpRequest) { // For Mozilla, Safari etc
ajaxObj = new XMLHttpRequest();
} else { // No AJAX
alert('AJAX is not supported in your browser');
return;
}
// Open connection to server
ajaxObj.open('POST',serverURL,aSync);
// Set some request headers - you might be able to get away with not doing this, but it
// should be considered good practice, especially when doing POST requests
ajaxObj.setRequestHeader('Content-Type',contentType);
ajaxObj.setRequestHeader('Content-Length',xmlStr.length);
// Set a callback for asynchronous requests (not called if aSync = false)
ajaxObj.onreadystatechange = function () {
if (ajaxObj.readyState == 4) {
// parse the server response here
}
};
// Send the request
ajaxObj.send(xmlStr);
// if aSync = false, parse the server response here
}
// Example of how to use the function
var myXMLStr = '<?xml version="1.0" encoding="iso-8859-1" ?>\n<toplevel>\n<lowerlevel anattribute="a value">An inner value</lowerlevel>\n</toplevel>';
var myURL = 'http://sub.domain.tld/path/to/document.ext?getparameter=somevalue';
postXMLToServer(myURL,myXMLStr);

It's not entirely clear what you want. Everything in the computer is represented in binary. So when you post an XML document over to http://something.com, the it's the binary representation of the characters in the XML file that is being transmitted.