What is the difference between AJAX with JavaScript and jQuery?

What is the difference between AJAX with jQuery and AJAX with JavaScript?

Actually only one of them is a programming language.

• Javascript is a programming language which is used mainly in webpages for making websites interactive. In this context, when a webpage is parsed by the browser, it creates an in-memory representation of the page. It is a tree structure, which contains all elements on the page. So there is a root element, which contains the head and the body elements, which contain other elements, which contain other elements. So it looks like a tree basically. Now with javascript you can manipulate elements in the page using this tree. You can pick elements by their id (getElementsById), or their tag name (getElementsByTagName), or by simply going through the tree (parentNode, firstChild, lastChild, nextSibling, previousSibling, etc.). Once you have element(s) to work with you can modify them by changing their look, content or position on the page. This interface is also known as the DOM (Document Object Model). So you can do everything with Javascript that another programming language can do, and by using it embedded into wepages you also get an in-memory Object of the current webpage by which you can make changes to the page interactively.

In recent years JavaScript has also become a popular server-side language running in an environment called Node.js. This opened up a way for you to share common parts of your code between the browser and the server.

• AJAX is a technique of communication between the browser and the server within a page. Chat is a good example. You can write a message, send a message and recive other messages without leaving the page. You can manage this network interaction with Javascript on the client side, using an XMLHTTP Object provided by the browser.

• jQuery is a library which aims to simplify client side web development in general (the other two above). It creates a layer of abstracion so you can reuse common languages like CSS and HTML in Javascript. It also includes functions which can be used to communicate with servers very easily (AJAX). It is written in Javascript, and will not do everything for you, only makes common tasks easier. It also hides some of the misconceptions and bugs of browsers.

To sum up:

• Javascript is a programming language (objects, array, numbers, strings, calculations)
• AJAX and jQuery uses Javascript
• jQuery is for simplifing common tasks with AJAX and page manipulation (style, animation, etc.)

Finally, an example just to see some syntax:

// page manipulation in javascript
var el = document.getElementById("box");
el.style.backgroundColor = "#000";
var new_el = document.createElement("div");
el.innerHTML = "<p>some content</p>";
el.appendChild(new_el);
    
// and how you would do it in jQuery
$("#box")
  .css({ "background-color": "#000" })
  .append("<div><p>some content</p></div>");

Javascript, for the purposes of this question, is a client-side (in the browser) scripting language.

jQuery is a library/framework built with Javascript. It is very popular because it (nearly universally) abstracts away cross-browser compatibility issues and it emphasises unobtrusive and callback-driven Javascript programming.

AJAX (Asynchronous Javascript XML) is a method to dynamically update parts of the UI without having to reload the page - to make the experience more similar to a desktop application.

EDIT:

It sounds like you're new to this. I would seriously recommend you check out http://www.w3schools.com/js/default.asp to get started. It's what I used to learn javascript and it's done incredibly well.

Of the three only javascript is a programming language. jQuery is a framework that is based on javascript and that simplifies some tedious tasks like manipulating the DOM, adding some effects and animations and most importantly doing it in a cross browser fashion. One of the tasks that is simplified by jQuery is AJAX which is a concept allowing a browser to send an asynchronous request to a web server allowing for richer web applications.

AJAX is technology. Jquery is library. Javascript is language.

AJAX is a method to do an XMLHttpRequest from a web page to the server and send/retrieve data to be used on the web page. It stands for Asynchronous Javascript And XML. It uses javascript to construct an XMLHttpRequest(varies between browsers).

jQuery is a javascript framework that can be used to manipulate the DOM (search and interact with the DOM). jQuery implements a high-level interface to do AJAX requests abstractly thereby giving multi-browser support in making the request.

So, Ajax is a technology paradigm, whereas jquery is a library so can't compare them.

AJAX is a way to talk to the server in the background. JavaScript is a language that the browser understands. jQuery is a JavaScript framework that makes life easier for people who want to program for the browser.

• JS is a client-side programming language.

• jQuery is a framework, but isn't the only one. Another JS frameworks are AngularJS, Mootools, NodeJS, BackboneJS, etcetera. With anyone of this frameworks you will do any action that pure JS can't do, or any "complex" (I don't find the correct word) action. As Void said, adapting his answer to my answer about frameworks: "makes life easier for people who want to program for the browser."

• With AJAX you can communicate your Web page to the server. AJAX depends on JS to work.

Javascript is a scripting language, Not a programing language. Jquery and ajax are simplified version of javascript which helps manupulate queries of certain part of website without having to change the entire user interface of the website.