Are there different styles of ajax?

Question

I'm kind of new to using ajax but I've been largely successful. Most of my ajax calls look very similar to this:

function saveQueryProf(){    
    var currentDate = new Date();
    var date=currentDate.getDate()+'/'+(currentDate.getMonth()+1)+'/'+currentDate.getFullYear();

            $.ajax({
            type: "POST",
            url: "API.php",
            data: { method: "createQueryProfile",
                    prof_name: $('#nameTxt').val(), 
                    prof_SQL: $('#sqlTxt').val(),
                    date: date

                  },
            datatype: "json"

        }).done(function(returnresult) {
        })
}

Using the $.ajax({ method. However, any time I see someone using "ajax" on youtube or other sites, their code looks more like this:

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

I realize that these are doing different things, but what is the difference in these 2? And when I'm looking for answers online how could I find an answer that is more along the lines of the first style?

Does this answer your question? [What is the difference between XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.get](https://stackoverflow.com/questions/4657287/what-is-the-difference-between-xmlhttprequest-jquery-ajax-jquery-post-jquery) — Ivar, Jan 05 '20 at 19:49
XMLHttpRequest is the old native function to retrieve data (created by Microsoft and adopted by other browsers). The modern native function is [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) that is so easy to use that you don't need jQuerys $.ajax. — some, Jan 05 '20 at 20:01
then there's `fetch` in modern browsers, and there's a few other libraries (e.g `axios`) that do a better job than `jquery` — Jaromanda X, Jan 05 '20 at 20:02
By the way, **AJAX** is short for **A**synchronous **J**avaScript **a**nd **X**ML, and since you are using JSON instead of XML you are technically using **AJAJ** = **A**synchronous **J**avaScript **a**nd **J**SON. — some, Jan 05 '20 at 20:09
@some I did not know this. Is there ever a reason to use AJAX over AJAJ? If so could you gimme a brief example? — Cole Perry, Jan 05 '20 at 20:33
Microsoft created `new ActiveXObject("Microsoft.XMLHTTP")` in early 2000, Mozilla followed up by adding `XMLHttpRequest();` and other browsers (including IE) added that function. Microsoft created the function to be used with Outlook, and they used XML.For many applications XML is too verbose and too complicated to use. For applications on the web, JSON is often a good candidate. — some, Jan 05 '20 at 21:01

score 1 · Answer 1 · answered Jan 05 '20 at 19:43

1

Your code requires the jQuery library to work (that's where $ and $.ajax come from). Their code is using XMLHttpRequest directly, which is built in to JavaScript, so it doesn't need any libraries. If you want your AJAX code to depend on jQuery, then just include it as a search term.

answered Jan 05 '20 at 19:43

Joseph Sible-Reinstate Monica

45,431
5
48
98

Omg idk how I didn't know that. I thought you had to include the JQuery library to use ajax at all. Thank you. – Cole Perry Jan 05 '20 at 20:32

score 1 · Accepted Answer · answered Jan 05 '20 at 19:46

1

The first example, using $.ajax(), is specific to jQuery. It's a lot simpler than the built-in Javascript API, XMLHttpRequest. XMLHttpRequest doesn't require any external libraries to use, though it's more difficult. $.ajax() relies on XMLHttpRequest.

answered Jan 05 '20 at 19:46

Caleb Denio

1,465
8
15

Omg idk how I didn't know that. I thought you had to include the JQuery library to use ajax at all. Thank you. – Cole Perry Jan 05 '20 at 20:32
1

No problem! I'm glad to help! – Caleb Denio Jan 05 '20 at 21:39

Piotr · Answer 3 · 2020-01-05T22:54:56.740

I saw that the question was already answered, but I think that more information can be added.

In your first example you are using jQuery ($.ajax call). You will need to add this library to your website in order to make it work. The easiest way is to add a tag with jQuery CND to your website.

The second example is using vanilla JavaScript, the XMLHttpRequest. It has more complex syntax (a strange mixture of upper and lowercase characters), but you don't need to add anything to the site. It will do the work, and once you are used to the syntax it might be all you need.

Third option that I have used for AJAX request is the fetch() method. Like XMLHttpRequest it is build in in the JavaScript language. fetch() has very simple syntax and allows easy use of promises. You might need promises if you will be making requests that will not return data immediately. Here's more information on fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Fourth option that I've used for AJAX is Axios library. If you are including jQuery only for AJAX requests Axios is probably better choice. More read on Axios: https://github.com/axios/axios

If you want to dig a bit more on the differences and pros/cons between fetch() and XMLHttpRequest take a look on this thread: Fetch API vs XMLHttpRequest

score 0 · Answer 4 · answered Jan 05 '20 at 20:38

0

Shortly Ajax is an extension method which defined in JQuery for factory class XmlHttpRequest.

answered Jan 05 '20 at 20:38

OO7

660
4
10

Are there different styles of ajax?

4 Answers4