Is there a way that a MVC Action, initiated by an AJAX request, can redirect the response directly to another page/View without sending a JavaScript “window.location=…” to the client first? In other words, directly transferring the response on the server side and avoiding the roundtrip to the client.
This is a more general question about the possibility to transfer directly an AJAX call, but here is a more specific scenario:
The browser sends an AJAX request to the server and based on the request data the controller's logic performs some operations.
For the majority of the cases, the controller needs to return back a result (JSON) to the same page. However, for few cases it needs to redirect to another page and it returns back a script to redirect the page, but this causes another roundtrip to the browser. The flow is: Page – Server – Page – Server – New Page, and the question is if this can be optimized to Page – Server – New Page .
This isn't really possible, no.
The browser has two options to choose between:
Go to a page
Make an AJAX call to a page
It can't make an AJAX call and automatically redirect based on what the server decides because the client (browser) doesn't know what the server has decided on before the response is even received by the browser.
The traditional approach (which you're avoiding) is:
The browser makes an asynchronous request to the server
The server responds with data informing the client to redirect
The client makes a new request to the server via window.location
The server responds with the new page
However you want to skip a step by doing:
The browser makes an asynchronous request to the server
The client makes a new request to the server via window.location
The server responds with the new page
But the client doesn't know that it needs to redirect and/or it doesn't know how to.
One (ugly) possibility
One idea that comes to mind to pseudo-achieve what you want is to have MVC render the required view and send the whole thing back to the client via JSON rather than a redirection approach. Let me explain.
The browser makes an asynchronous request to the server
The server determines which page needs to be displayed and renders the view (Generating a view without a controller in MVC)
The server serialises the resulting HTML as JSON
The client receives the JSON, and re-renders the entire page with the new markup (i.e. completely replace)
You can also alter the URL and history of the browser to make it "feel" like a redirect by manipulating the browser history.
However I would like to point out that this "solution" is more of an amusing/interesting approach. This isn't really a good way to go about the problem.
Related
I just started studying Ajax and I totally have not idea what AJAX is. What is the difference between asynchronous and synchronous request? I would like to seek a very simple example demonstrating their differences.
AJAX short for Asynchronous JavaScript And XML is a programming language. It typically involves sending HTTP requests from client to server and processing the server's response, without reloading the entire page. This process is asynchronous. Comparing to synchronous request which blocks the client until operation completes, asynchronous HTTP is more efficient and user-friendly.
Take very simple example, when you are signing up on a commercial website, you can know whether your username is available or not once you finish typing the name. If the username was used already, the website will give you a reminder that your username is used on the same web page. This is the application of AJAX, so you don't need to complete the whole form and click the submit button to know that your username is not available.
AJAX uses two components for request process and display:
A browser built-in XMLHttpRequest object (to request data from a web server)
JavaScript and HTML DOM (to display or use the data)
It begins with an event occurs in a web page, such as a button is clicked. Then an XMLHttpRequest object is created by JavaScript, followed by sending a request to a web server. Once the web server receives the request, it will process it and send a response back to the web page. Then the webpage utilizes JavaScript to perform update of the web page without reloading the whole page.
AJAX stands for Asynchronous JavaScript And XML
Ajax main purpose is the loading data from the server without refreshing the web page
It's works in the background thread without interrupting UI thread
AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
A browser built-in XMLHttpRequest object which is used to request data from a web server
Example
when you are filling any kind of online form that time observe one thing there is option for country,state,district.
In this country drop down initially filled with data but state and district's are empty.
when you select a country like India then Asynchronous call goes to server and fetch the data of state drop down respective to selected country and so on.
when AJAX request fetching the data for the state drop down you are eligible to work with other parts of the form.
From the client side, I am making an Ajax request of type "delete" using jquery.On the server side, I am doing res.redirect(URL).But instead of redirecting, browser is again making a delete request with URL returned from server side for redirecting.
However, it is not happening for a post request.Everything is OK with post request.
Short version
Ajax is trying to follow the request to it's bitter end to get a successful response (2xx). If you want to delete a resource and send the user to a new web page, you will need to handle that after receiving a success response from your Ajax call.
Full explanation
While redirects are sometimes used after processing a request (such as a successful / failed login) it's not really what they're intended for. Generally you would only redirect the user to get them to the resource their looking for. For example, you might move an endpoint such as POST /blog-post to the new location of POST /blog-article. What you're saying to the requester here is that something used to be where it is, but now they need to make a request elsewhere to find what they're after. This is incredibly important when trying to prevent link rot.
The idea of accepting and processing a request, and then moving the user off to another page is more of a coincidence really. It just happens to work due to how a browser handles URL requests.
I expect your POST request is actually using a form, in this case the browser is following the redirect because it received something like a 301 and is attempting to see a request chain through. However when using Ajax a redirect is being handled by the Ajax call itself, not the entire browser. Ajax in this case is acting as if you'd expect if the endpoint had been moved. So for example, if you moved the endpoint on the server side, your application would still function as it would follow the redirect instruction.
What you really need to do is return a successful response to your Ajax call such as a 204 (No content) and then in your frontend move the user on to a new page.
This isn't as convenient I'll admit, but when you understand why the redirects actually exist it makes more sense. They're not a way of telling a user to move onto something else, they're a way of trying to prevent link rot and enable applications to continue working against an API which may have changed slightly.
I would like to integrate some Ajax techniques into an existing struts application.
How do I send the requested data back server side to the client without causing the page to reload?
If you called the server side with Ajax, the page will not reload. You don't have to do anything special on the server side. Although, obviously, you should do your Ajax request to a different page made for that purpose, not to the same page.
I just want to know what is the difference between sending parameter with ajax(post/get) to a servlet and sending them with "submit" .
Thanks for your help.
A standard form submit sends a new HTTP request (POST or GET) and loads the new page in the browser. In Ajax, the data is sent to the server (POST or GET) in the background, without affecting the page at all, and the response is then received by javascript in the background, again without affecting the page at all.
(The javascript can, of course, then use the data received from the server to update some of the page content.)
Ajax is generally useful where only a small section of the page content will change.
At the simplest, with ajax, you don't witness page refresh while submitting form data. And if you don't use it eg you use submit buttons, you witness page refresh. Both submit the data.
Server side handling of both are exactly the same. The server is not concerned about how the post request is made.
The difference is in how the browser (client side) responds to both the actions. The browser usually decides to make a request for an entire page if it is a form submit; otherwise, it just updates a part of the page.
From the servlet's point of view there is no difference. For the client, a submit will load a new page, while an Ajax request will parse the response with javascript code and act accordingly.
The form submit will reload the page that you are working on client side.,while in ajax call the call was made to server will not reload your client side page
I'm been reading up on Ajax and would like to see from the stackoverflow community if I'm understanding everything correctly.
So the normal client server interaction is a user pulls up a web browser types in a url and a HTTP request is sent to the server requesting the page and resources( css, pics ) from the web server. The web server responds to the client via HTTP the page/resources requested and the browser renders the html/JavaScript for the user to view the page.
1) So would it be safe to say that XMLHttpRequest( XHR ) object is doing the same process as the browser except your not requesting html from the server, your requesting text in some type of format?
2) Is it true that a XHR object is much like a regular object that can be manipulated by the program creating the object( like a normal object ), but also sends and receives data with another program( web server ) via HTTP?
3) So in my mind when a XHR is created it is loaded into memory and we setup some of the objects arguments when we do the request.open(“GET”, url, true). Once we do a request.send(null) the object basically attempts to “GET” the url via HTTP and once we get the data back from the server it is put in the responseText argument. Am I understanding this correctly?
4) Also synchronous vs asynchronous. When I think of synchronous I think of steps having to be followed in order. For example, I push a button, data gets sent to server, and I have to wait for data to come back before I can do anything else. With asynchronous connections I would push button, data gets sent to server, I do what ever I want while data gets sent back. Is this a good analogy?
1) Nope. The XMLHttpRequest object does exactly what its name implies -- it initiates an HTTP request. This request can be in XML, or HTML, or PHP. At the end of the day, the browser doesn't care, because in an AJAX request, it doesn't parse the request -- you have to do it yourself. So it doesn't automatically render the HTML from an AJAX request.
2) I'm not sure about manipulation (the XHR object may be immutable) but possibly. Would you ever need to extend it or manipulate it?
Yes, you can change properties of the object and so on. I apologize. I didn't understand you at first :)
3) Yep.
4) That's a great analogy. It's exactly what happens. Another analogy is a 4 lane highway is to asynchronous as a one-way street is to synchronous. If one car breaks down on the 4 lane highway, the rest can keep moving at their normal speed -- but if one breaks down on the one-way road, everything freezes. :)
Here I leave you a good graphic to see clearly the behavior differences between the synchronous and asynchronous application models:
(source: adaptivepath.com)
It would appear that you have a job grasp of how AJAX works. I can't see much to disagree with in your summary of the plumbing of an AJAX application.
I would say however that with the XMLHttpRequest object you aren't restricted to GET. You can also use POST and other HTTP verbs.
With async calls you register a callback function, the XMLHttpRequest object calls your method when the async request completes.
Seems ok to me.
Your first point though is not entirely correct, you can request html from the server using ajax is doesn't have to text, json or xml like most examples show.