Ajax VS Form Submission

AJAX vs Form Submission

I personally think that AJAX should be used for displays updates and form submissions should be done via a page reload. Reasoning?

When submitting forms, you are telling the application to do something. Users tend to want to feel that it was done. When a page doesn't reload, users are often left wondering "Did that work?". Then they have to check to make sure what they did was right.

On the other hand, when you are displaying a chart or something, and the user says to "display 2011 data....now 2012 data" for instance, they aren't "doing" something (creating new entities, sending emails, etc). So AJAX can provide a nice user interface in this case. Page reloads would be annoying here.

In conclusion, I think form submission should be done via page reloads (let the user see it working), whereas display updates should use AJAX (prevent annoying page reloads).

Of course, this is a preference thing. Some of my company's applications use AJAX all over. But those are the applications that are the most difficult to maintain and debug. ;)

difference between ajax and form submit

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.

What is the difference between ajax post request and form post request?

There is no difference, only that AJAX is, as the acronym suggests, asynchronous, which means it does not block anything else from running. Both the form and an AJAX request send a POST request the only difference is that the browser uses the response from the forms POST request to load the new page where as the AJAX requests response is passed to a callback in JavaScript.

jQuery AJAX submit form

You can use the ajaxForm/ajaxSubmit functions from Ajax Form Plugin or the jQuery serialize function.

AjaxForm:

$("#theForm").ajaxForm({url: 'server.php', type: 'post'})

or

$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})

ajaxForm will send when the submit button is pressed. ajaxSubmit sends immediately.

Serialize:

$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theForm').serialize())

AJAX serialization documentation is here.

Security of ajax vs regular form data

There is no difference in the security. In both cases, an HTTP POST request is sent to the server and a response is received from the server. Aside from perhaps some headers in the request, the server doesn't even really know or care what the difference is between the two.

To illustrate, take a look at the Network requests in your browser debugging tools (Firebug or Chrome tools) when submitting a regular form POST and an AJAX POST. The two are very close to identical, save for the browser maybe adding another header or two for the AJAX one.

What is the best way to securely send form data so outsiders can't tamper with or change the id number?

There isn't. Any savvy user can manually craft an HTTP POST request to include any data they want. Browsers these days even have handy tools to help with this for development and debugging purposes. The general rule is for the server-side code to never implicitly trust requests sent from a client. Always validate that the user has access to do what they're trying to do, that the data isn't malicious or is otherwise properly sanitized before using it (particularly in database queries as a common example), and so on.

What is the pros and cons of using ajax to submit form?

PROS:

AJAX definitely has the advantage over the User Experience and Convenience. AJAX allows you to do checks with the server without refreshing the page. For example, it allows you to check if the username has already been used or not without resetting the form. However, since the users information is processed in Javascript first, Cross Site Scripting attacks can easily grab data from your script. However, even without AJAX your Cross Site Scripting can still be used.

CONS:

However, since AJAX is fetches data asynchronously, it usually renders the browser back button completely useless. Also, people who don't understand "web tech" sometimes turn Javascript off due to their own paranoia, thus AJAX can no longer run. I also heard that content rendered through AJAX are not usually visible to search engines, but I'm no SEO prof.

Form POST vs. AJAX POST

You could use both and achieve the same result in terms of functionality, but I encourage you to rely on AJAX (jQuery) for providing a better overall user experience and lessen the load on the server (using php, you can only do what is needed, without the need to provide the full html output once more). Only update what actually changed.

When I was using jQuery and AJAX a few years back, I relied on AJAX to update parts of the UI without having the need to refresh the whole web page. Moreover, I used this to CRUD items in the management area and actually achieved a pretty nice user experience.

You can find more information about the jquery post method at jQuery GET and POST details and usage examples

What is the difference between post api call and form submission with post method?

There are multiple ways to submit a form from the browser:

1. HTML form, submit button, user presses submit button, no Javascript involved.
2. HTML form in the page, Javascript gets DOM element for the form and calls .submit() method on the form object.
3. Ajax call using the XMLHttpRequest interface with the POST method and manually sending appropriate form data.
4. Ajax Fetch call with the POST method and manually sending appropriate form data.

With #1 or #2, the browser sends the form and the browser will pay attention to redirects and will display the form response (whether redirected or not) in the browser.

With #3 and #4, the form is sent via Javascript and the response comes back to your Javascript. #3 does not process redirects. #4 has an option to process redirects. Here's more info on each of the above options. #3 and #4 do not affect the browser display is not affected at all unless you program your own Javascript to process the request and affect the browser display (either by inserting content or setting window.location to a new URL.

---

Here's some more info on the above schemes:

Programmatic Ajax calls with XMLHttpRequest do not process redirects or the response from the Ajax call in any way. They just return that response to YOUR Javascript. Keep in mind that a redirect is just one specific type of response you can get back from an Ajax call. This is different than a browser submitted form POST.

Programmatic Ajax calls with the fetch() interface offer an option to follow redirects automatically. See the redirect option here. But, even in this case, all the fetch() interface does is get the contents of the redirected URL. It does not cause the browser page to change. To so that, you would have to write your own Javascript code to either see the 3xx redirect response and then set window.location to the new redirect URL. Or, you would have to let the interface follow the redirect automatically and then do something with the new redirected content that it will return to your Javascript.

These programmatic requests different than letting the browser submit a form for you. In the browser submitted case (without using Javascript to submit the form), the browser follows redirects and updates the display in the browser based on whatever content is returned from the form response.

When you submit a form via Ajax, the browser does nothing automatically with the server response. That response goes back to your Javascript and your script decides what to do with it. If you want your script to follow redirects, then you have to examine the response, see if it's a 3xx status, get the new URL from the appropriate header and set window.location to that new URL. That will then cause the browser to display the redirect page. But, you have to either program that yourself or find an Ajax library that offers a feature to do it form. A standard Ajax call just returns the form POST response back to your Javascript - that's all. Your script has to process that response and decide what to do next.

I am confused, that I cannot call gateway using post API cause it won't redirect to new page

You can. You just need to write your own Javascript to process the response from the programmatic API call and, if its a 3xx redirect, then set window.location to the new URL to instruct the browser to load the new redirected page.

---

Related Topics