AJAX with javascript vs. Php Form

Question

So I am a student working on a website for a private client. In my web design class we have been taught to mostly use forms to pass values from the client to the server with action=someFile.php. The class has also briefly mentioned using ajax to pass from the client using javascript and jquery using something like:

request = $.ajax({
        url: "persistTestimonial.php",
        type: "POST",
        data: {"testimonial": testimonial},
        dataType: "json"
    });

I also had an internship with a company where I was writing c# services passing back and forth between client and server with canjs for mvc. In the context of mvc and c# backend writing ajax calls using the way above makes sense. Since the class harps on graceful degradation I don't entirely see the benefit of javascript ajax instead of php forms other than that the entire page doesn't have to reload. I just want to know what is best practice and what exactly the benefits are.

This might help you http://stackoverflow.com/questions/13293375/ajax-vs-form-submission — reuelab, Apr 28 '14 at 03:37
You may change your mind after readin about AngularJS if you haven't already. — Nabil Kadimi, Apr 28 '14 at 03:47
angularjs is advanced one should learn the basics first..otherwise he will be stuck forever. — Muhammad Umer, Apr 28 '14 at 03:47
@NabilKadimi I have read about angular but I am looking for something more conceptual — ford prefect, Apr 28 '14 at 03:48

Muhammad Umer · Accepted Answer · 2014-04-28T04:08:27.303

The main benefit of ajax is Not reloading of page that is Win-Win for both server and client.

Client doesn't have to wait again, experience is fluid. Think of Facebook app, You scroll to bottom and more posts load up..it's much better than pressing next again and again to wait for next 50 posts load..but with ajax you can get 2 by 2.

For server, not having to send same resources over and over again is big help on money side. Second, lot of computations can be done on client side and choose what to do next or where to go..saving server more money.

Even the usual way, where you click submit and forum submits. The action parameter is not used. That's ancient way of doing this..simplest true. But not very good. The reason is because you can't modify, validate, and do anything else. As for submits asap. So usually you attach submit event handler to form then cancel event propagation, run checks and do whatever you gotta do then if happy then manually submit it.

From server side it really isn't a big deal. If it comes via ajax or directly from browser address bar. Any request is just that a http get/post request.

For Example..http://jsfiddle.net/9pB8s/

var form= document.getElementById('f'),
    txt= document.getElementById('txt');

form.onsubmit= doStuff;

function doStuff(e) {
    if (!isNaN(txt.value)) {
        txt.value='Thanks for Interest!';
        txt.setAttribute('readonly','readonly');
        setTimeout(function(){
            f.submit();
        },1000);
    }
    return false;
}

Returning false cancels the event from firing. But when text is just numbers the js manually submits it. Timer is added just for effect.

Is there any way you can elaborate on what you mean in the third paragraph about the action parameter and what is a better way. Also by attach event handler do you mean attach a javascript event handler to the form? Does this prevent it from making the html form call? Thanks for the answer which is filling in gaps in the class but if you could just elaborate a little more — ford prefect, Apr 28 '14 at 03:46

AJAX with javascript vs. Php Form

1 Answers1