Question

OK perhaps I have read too many posts on this subject and now I am confused.

Can someone please give a brief overview of the process to follow in order to make an ajax request in Jquery and pick up the results of the call.

I suppose question 1 is would you elect to use jquery over javscript to make the xhr request?

I can see perfectly well how the javascript approach works, it make sense and is easy to follow. But various articles point to the benefit of using jquery claiming that

(“#input_Field1”).load(“ajax_Request.php”); is all you need to make the asynchronous call.

If this is the case what are you supposed to do with jquery.ajax together with its settings and global event handlers and how does this impact on the .load

Many Thanks

Answer 1

jQuery simplifies the JavaScript to make XHR requests, generally an AJAX request looks like this:

$.ajax({
    url: 'page.php',
    data: 'data=test',
    type: 'POST',
    success: function(data){
        // Do something
    }
});

Here you post the variable ‘data’ with value ‘test’ to ‘page.php’, the callback function success() is then called and you can do something with whatever data page.php returns.

$.load() is somewhat different in that you can simply say:

$('#container').load('test.php');

And the contents of ‘test.php’ will be placed into the element with the ID of ‘container’. So here the answer to your question is yes, that’s all you need to make an AJAX request.

Check out the $.load() event handlers and variables here, and the $.ajax ones here.