Is it possible to set HTTP POST request body message via Javascript? - javascript

I'm building REST web app and my server side Java code expects request body to have pure JSON string.
My goal is to use regular HTTP POST method (not ajax) and set JSON into request body message.
If I use ajax, it is very simple. Something like:
var jsonInput = '{"foo":"bar"}';
ajaxRequest.setRequestHeader("Content-Type", "application/json");
ajaxRequest.send(jsonInput)
But I want to use regular HTTP POST.
Looking at the thread below, the answer is to create a form with hidden input field and put JSON in to the input field and have server side code handle the rest.
JavaScript post request like a form submit
I tried that and it works just fine but do I really have to bother creating new form and input field to accomplish this? Or is there any other way available?
NOTE: I don't want to use JQuery or Prototype framework. Just simple Javascript.

FORMs only allow for name-value pairs to be submitted, and so your JSON needs to be inserted into one such pair.
Yout can read about this at w3.org
As a solution, what about using xhr to send the data to the server, exchange it for some token, and then direct the user via a regular GET to a url passing the token?
This should fit with the REST paradigm too.

Related

Is it safe to make a POST request with JSON data using ajax?

I'm working on web application where I need to send some data using ajax with post method. So I have two choices to send data whether in JSON format or query prams. I'm confused which should I use? and is it safe to send data in JSON format?
As #lucasreta mentioned, if you use HTTPS, it doesn't really matter either way.
Both methods are widely used. I know that Google accepts a Post request with query params and responds with a JSON object for ReCaptcha Server side validation.
Sometimes, the decision to use one or the other (or both) is dependent on how easy your chosen back-end technology makes it for you to either parse out query params or serialize JSON.
I will say that there is a general trend in using JSON in the request body as opposed to query params.
I found a couple of SO questions that are more down the lines of what you are asking...
REST API Best practices: args in query string vs in request body
REST API Best practices: Where to put parameters?

Why is it safe to send Array of File Objects via Ajax but not via a regular Http Request?

I use an HTML form to allow the user to upload files.
In order to make adding attachments more user friendly, I added client side code to allow the user to add/remove files (I basically did this as outlined in this answer).
Because I don't want to adjust too much of my server side code, I'd still like to send the form in a regular request, handle it on my server, and return an Http Response (ie: no Ajax, send request from same thread as main page and then redirect or forward the response on my Servlet).
However, the only way to submit the FormData Object is via Ajax.
When I look for ways to send the FormData Object via a regular Http Request (eg: by attaching it to the form), I hear that this is not allowed because it is not safe.
Why can the FormData be submitted via XMLHttpRequest but submitting via regular Http Request (like a regular form submit) is considered not safe to the user? What's the difference?
To phrase this another way: You can mess with attachments if you're submitting them via Ajax but not via a regular request. Why?
If there is a way to submit the FormData in a regular request, I would be interested to hear what it is.
Thanks.
Extra clarification (motivated by comments):
The input element on the form does not accurately represent the user's selections. I allow the user to add/remove files. I do this by creating my own Array of File Objects in the client side code. This new array of File Objects needs to be sent with the request. This is possible with Ajax (ie: by creating a FormData Object), not with regular form submit; why?
The only way to submit the FormData Object is via Ajax
This is not true.
A FormData object is simply a way of encoding binary data before transfer (see MDN for a full outline of its purpose). It is only really required when sending files (ie. binary data) to the server.
If you want to do that without AJAX, add the enctype="multipart/form-data" attribute to your form element and submit it as usual.
Also note that the use of FormData has nothing to do with security, as your question title implies.

Is there a way to get the form data easily with JavaScript?

I was looking on how to get values of form data that are passed with POST requests and found this answer.
I know you you can get GET query parameters quite easily in JavaScript doing window.location.search but is there a way to do similar for POST request or document.forms is my only option?
To expand on what RUJordan said:
When you do a POST, the information is sent to the server using an entirely different method and does not show up in the URL or anywhere else that JavaScript can get access to it.
The server, and only the server, can see it.
Now, it is possible to take some of the form data and fill JavaScript variables and/or hidden form fields so the server can pass data back down to the client.
If you need more help, you'd be better off opening another question explaining exactly what problem you are trying to solve.
Do you want javascript to see the data was POSTed to load the current page?
JavaScript does not have access to the request body (where the POST content is) that loaded the page. If you want to be able to interact with the POSTed parameters, the server that received the request would need to respond with the necessary data written back out on the page where javascript can find it. This would be done after the form was submitted, as part of the response to that POST request.
Or do you want to know what your page could POST form the forms that are on it?
Inspecting document.forms will let you see what could be POSTed later if those forms were submitted. This would be done before the form was submitted, without a request being made.

detecting if a request is a post in jQuery

I'm trying to load a page differently if it is a post or a get, and seems like jQuery would have something so I could do
if (isPost())
{
// do something if this page was a post
}
I'm showing/hiding something based on the request type and want to do it specifically with javascript. I can easily do it with the framework I'm using, but don't want to.
The problem here is that you are confusing client-side with server-side.
GET, POST, PUT, DELETE, etc are all HTTP 'methods' that are sent to a server from the client (e.g.: the browser). The server then responds with the appropriate HTTP response, normally in the form of content that contains HTML.
POST/GET/etc have no context at the client side outside of dictating how a request should be sent to the server.
Think of the browser being your postal mailbox and POST/GET/etc being the method it was delivered. When someone sends you a piece of mail, they specify the method, such as first-class mail, overnight express, or same-day delivery. The Post Office handles the mail based on how it was received and sends the mail using the appropriate action. When you pick up your mail in the mailbox, you don't know if it got there via standard mail, overnight express, or same-day delivery. The only way you would know is any information that is on the envelope itself.
The solution to your problem would would follow this same principal. To resolve it, what you will need to do is include a hidden value that jQuery can pull in, either in the query-string, a special element, or as a hidden textbox that contains the HTTP method used to get the page.
This requires that server-side code be changed accordingly to push that information back to the client.
Hope that helps clear it up a bit.
i don't know if this is really possible in javascript. But you can check if there is a query string which is GET in the URL
if (location.search.length > 1) {
// your code.
}
location.search returns the query string in the URL
http://example.com/index.html?id=1&value=3
in this case location.search will be ?id=1&value=3 including the question mark.
so if it is present then you have a GET

Is it possible to send non POST data with javascript?

I'm trying to submit a postscript print job directly to printer on port 9100. I tried submitting a form directly to the IP and port, but it includes a lot of header information which obviously messes it up.
Is there a way to do this with jQuery or AJAX (or some other term I don't know about)?
You can't do it with Javascript, it'll only do HTTP requests (e.g. POST/GET), which means you get the full HTTP headers included.
Once WebSockets get more widespread, you could use those and send arbitrary data without the HTTP overhead/payload, but at present, that's only in 'bleeding edge' browsers.
This means you're stuck using a Flash or Java applet at present.
You can create a proxy php script which will accept your POST data from the form, format this data and send it to the printer
If you'd like to submit data to this script in background - please see my answer to the following post:
JavaScript: How do I create JSONP?

Categories

Resources