jQuery Basics

• Part 1: Adding and Loading the Library
• Part 2: Using Selectors
• Part 3: Reacting to Events
• Part 4: Ajax

jQuery is a JavaScript library designed to simplify the processes of traversing and manipulating elements in client-side HTML. It is an open source library commonly found on many sites.

---

Ajax

Commonly written with a capital first letter, “Ajax” is a an acronym originally standing for Asynchronous JavaScript And XML (AJAX). When the technique first came into common usage around 2005, it was used with XML to communicate with a database to get data and react to it after a webpage had initially loaded.

Over a decade later, it is core to how many sites function and continues to serve as a fundamental web technology driving nearly all interactive websites and projects.

Using Ajax in jQuery

Note: Retrieving data from a service or content from a webpage can have many potential challenges. To protect the user from different ways they can be attacked or preyed upon, many browsers have built-in safeguards that block out-going requests across protocols (HTTP or HTTPS), depending on Cross-origin resource sharing (CORS) rules, and on the content in which data sent or requested. Depending on the service or server, there be additional rules or expectations as well.

Similar to using a selector and a function on the result, the ajax() function in jQuery accepts an object parameter of different properties to set. The done() and fail() functions are called depending on the outcome. If everything worked, the done() function is called. If not, or there was a problem of some sort, the fail() function is called.

Once content has been retrieved (and no problems were encountered), additional actions can be taken depending on the content and how it should be handled. For example, when working with text content, a common action might be to append the text to an element or act on it somehow.

Play with the example on Repl.it!