We Keep Coding

Ajax Post request get converted to GET [duplicate]

I am having a very hard time understanding the exact process of "post/redirect/get".
I have combed through this site and the web for several hours and cannot find anything other than "here's the concept".
How to understand the post/redirect/get pattern?

Wikipedia explains this so well!
The Problem
The Solution

As you may know from your research, POST-redirect-GET looks like this:
The client gets a page with a form.
The form POSTs to the server.
The server performs the action, and then redirects to another page.
The client follows the redirect.
For example, say we have this structure of the website:
/posts (shows a list of posts and a link to "add post")
/<id> (view a particular post)
/create (if requested with the GET method, returns a form posting to itself; if it's a POST request, creates the post and redirects to the /<id> endpoint)
/posts itself isn't really relevant to this particular pattern, so I'll leave it out.
/posts/<id> might be implemented like this:
Find the post with that ID in the database.
Render a template with the content of that post.
/posts/create might be implemented like this:
If the request is a GET request:
Show an empty form with the target set to itself and the method set to POST.
If the request is a POST request:
Validate the fields.
If there are invalid fields, show the form again with errors indicated.
Otherwise, if all fields are valid:
Add the post to the database.
Redirect to /posts/<id> (where <id> is returned from the call to the database)

I'll try explaining it. Maybe the different perspective does the trick for you.
With PRG the browser ends up making two requests. The first request is a POST request and is typically used to modify data. The server responds with a Location header in the response and no HTML in the body. This causes the browser to be redirected to a new URL. The browser then makes a GET request to the new URL which responds with HTML content which the browser renders.
I'll try to explain why PRG should be used. The GET method is never supposed to modify data. When a user clicks a link the browser or proxy server may return a cached response and not send the request to the server; this means the data wasn't modified when you wanted it to be modified. Also, a POST request shouldn't be used to return data because if the user wants to just get a fresh copy of the data they're forced to re-execute the request which will make the server modify the data again. This is why the browser will give you that vague dialog asking you if you are sure you want to re-send the request and possibly modify data a second time or send an e-mail a second time.
PRG is a combination of POST and GET that uses each for what they are intended to be used for.

Just so people can see a code example (this is using express):
app.post('/data', function(req, res) {
data = req.body; //do stuff with data
res.redirect('public/db.html');
});
So to clarify, it instantly refreshes the webpage and so on refresh of that webpage (e.g. if you updated an element on it) it won't repost the form data.
My code used to look like this:
app.post('/data', function(req, res) {
data = req.body;
res.sendFile('public/db.html');
});
So here the response is sending the html file at the /data address. So in the address bar, after pressing the submit button it would say for me: localhost:8080/data.
But this means that on refresh of that page, if you have just submitted the form, it will submit it again. And you don't want the same form submitted twice in your database. So redirecting it to the webpage (res.redirect) instead of sending the file (res.sendFile) , stops the resubmission of that form.

It is all a matter of concept, there is no much more to understand :
POST is for the client to send data to the server
GET is for the client to request data from the server
So, conceptually, there is no sense for the server to answer with a resource data on a POST request, that's why there is a redirection to the (usually) same resource that has been created/updated. So, if POST is successful, the server opiniates that the client would want to fetch the fresh data, thus informing it to make a GET on it.

Get reference of performance object corresponding similar url concurrent requests - Chrome Browser

I figured out I can get the timings of the any XHR request from chrome using the performance API like this below which gives an array as an result (shows ho many requests of this resource has been made):
performance.getEntriesByType('resource').filter(item => item.name.includes("https://myurl"))
If I make 20 XHR requests parallely/concurrently, how do I differentiate which request performance is which object. Is there a way to get specific reference? I am using plain XHR request and am planning to use a RXJS stream if I am able to get a reference. Any help is welcome, I am new to this API. I have attached the request and the result screenshot below:

maybe you can add a query param in the url you are getting with a random string and so you can use the query param to match the request with the performance, even this can create server side cache issue.

javascript - jquery $.post doesn't work

I just get started in Ajax and httpRequest. While I was playing around with the code, I noticed that $.get works fine but $.post doesn't work. Here's my code:
$(document).ready(function() {
$.post('hello.txt', function(data) {
alert(data);
}).fail(function() {
alert('fail');
});
});
It always gives me a fail, and I cannot figure it out.
Thanks

Barmar is correct in the comments, but for an answer, let's go over what it is these functions are doing.
When you're using the jQuery AJAX methods, they are performing HTTP requests to the resource you're providing in the url parameter for the function. As long as the value is something sitting on your server (an endpoint) the function will hit it.
$.get() performs an HTTP GET action which is how we'd fetch data over HTTP. In your example, you specify hello.txt as the url, which as long as that is a file sitting on your server, the application will make a GET request to that resource. If it is found, the contents of that resource are returned. This can be done with a text file, a JSON payload, HTML web pages, etc. As long as the resource has returnable content, it will return that content.
$.post(), on the other hand, performs an HTTP POST action which sends data up to a resource to be processed. A POST action is not intended to fetch a resource's data, but to push data into it. Canonically, you would use a POST to create something with the data you push to the resource (as opposed to PUT for modifying and DELETE for removal, but that's beyond this answer).
So, the GET works because the action is intended to fetch data and the resource you provided has data to return. The POST fails because it is intended to give data to the resource to process, which your text file is not equipped to handle.
Hope this sheds a bit of light on the problem.

Reading contents of an iframe with wikipedia source? [duplicate]

I am trying to implement a simple request to Wikipedia's API using AJAX (XMLHttpRequest). If I type the url in the address bar of Firefox, I get a neat XML, no sweat there. Yet, calling the exact same url with:
// this is my XMLHttpRequest object
httpObjectMain.open("GET", "http://en.wikipedia.org/w/api.php?action=query&format=xml&prop=langlinks&lllimit=500&titles=kaas", true);
httpObjectMain.send(null);
returns an empty response. According to FireBug, I get a 200 OK response, but the content is just empty.
I suspect I might be missing something on the header of the GET http request.
Help! (and thanks!)

The Wikipedia API does support JSONP.
Your query string'll become something like this:
http://en.wikipedia.org/w/api.php?action=query&format=json&callback=test&prop=langlinks&lllimit=500&titles=kaas
But you'll have to build the jsonp handler (or you can use your favorite library to do it), switch to json output format from the xml you choose and create the callback function to parse the result and do the stuff you need on the page.

The browser will not allow you to send an XHR to another domain other than the one the page is on. This is for security purposes.
One way around this that I have seen is to setup a proxy on the domain the page is hosted on that will pass requests through to the actual api server. See http://ajaxpatterns.org/Cross-Domain_Proxy

AJAX not handling 302 redirect

I have a database on an external server that I am trying to query. To do this, I am going on my local server (Tomcat) and creating an AJAX call (just the XMLHttpRequest object - I am not using any JavaScript libraries) to the page with a query appended. Pasting the exact same URL into Firefox causes it to try to download an XML document. My goal is to use AJAX to get that XML document.
The problem I am having is that when I make the call with AJAX, Firebug shows that the GET response returned 302 "Moved Temporarily" with a red X next to it. The header for the GET response has a Location parameter with OAuth authorization, and when I copy and paste the location parameter it takes me to the correct page (tells me to download the XML object).
EDIT: I tried it using jQuery's $.get("URL", function(data){alert(data)}); and the same thing happened - no alert, but a red GET request and 302 in Firebug.
Based on this information, I think that the database I am calling is first trying to redirect me to some OAuth thing, which then returns an authorized URL with which to access the database. This is what I should use to call the database, get the XML object back, and then do my thing. AJAX doesn't seem to be able to handle the redirect and is instead crashing.
I'm not sure this is correct, however, because I tried using the following code:
else if (xmlhttp.readyState == 4 && xmlhttp.status == 302){
alert("Hello 302!");
}
else {
document.getElementById("test").innerHTML = "On state: " + xmlhttp.readyState + "<br />HTTP Status: " + xmlhttp.status;
}
and it didn't give me an alert - instead it shows that it is on state 4 and status 0. I don't understand why it would return status 0. (Edit: Fixed the typo mentioned in answer 1 and nothing changed)
So my questions are:
What, exactly, is going on here?
What is the 0 status, why is Firebug giving me an X next to 302 in the console, and why isn't there a redirect?
How can I fix this?
Once I do fix it, will I be able to grab that XML file, or is there something else I need to do?
EDIT WITH UPDATE: It's a cross-site scripting issue. I went on the external server and ran the exact same script and was able to retrieve and parse an XML document containing the result of the query. The only obstacle is figuring out how to do this from an external server. I have access to the configuration of the external server and will be researching how to manipulate it to allow access via database queries from other sites.

Since it's an ajax request you can't pull data from another domain: http://en.wikipedia.org/wiki/Same_origin_policy
All you can do here really is request data from your own server (same domain) and have it pull data from the external db for you.
edit: this response is over 3 years old and now with modern browsers (not IE < 10) you can use Cross Origin Resource Sharing - https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

You have a syntax error readystate needs to be readyState. The way it is written, it will never be 4.
Another piece of advice would be to just check for a readyState of 4 and within that statement test for the status of 302. That way you will be able to troubleshoot whether or not it is the 302 that is causing your issue.

Try to do the redirection on the server side
Snapshot from FireBug
In this snapshot the Ajax request sent to server side (where there is the redirection)