An Introduction to jQuery's Shorthand Ajax Methods

Core points

• jQuery Abbreviation The Ajax method provides a method that simplifies Ajax calls, which wraps the $.ajax() method for a specific purpose using a preset configuration. The methods discussed in this article include load(), $.post() and $.get().
The
• load() method allows data to be loaded from the server and placed into the selected element. It uses URLs, optional data, and optional callback functions. This method can be used to load the main content of a web page asynchronously.
The
• $.post() method is used to send a POST request to the server and send data as part of the request body. This method is ideal for requests that may cause changes in server-side state.
The
• $.get() method initiates a GET request to the server, which is ideal for situations where the server always returns the same result for a given parameter set, or where the user needs to share resources.

Have you never heard of the term Ajax? I bet almost everyone's hands are put down, close to their bodies. Ajax (originally stands for asynchronous JavaScript and XML) is one of the most commonly used client methods that helps create asynchronous websites and web applications.

Of course, you can use raw JavaScript to execute Ajax calls, but it can be troublesome to handle all the different parts of the code. This is especially true if you have to support old browsers like Internet Explorer 6.

Luckily, jQuery provides us with a set of ways to deal with these problems, allowing us to focus on the tasks we want to accomplish with our code. jQuery provides a main method $.ajax() which can be highly configured to suit any of your needs. It also provides a set of abbreviation methods called abbreviation methods, because they are just wrappers of $.ajax() methods with preset configurations, each serving a single purpose.

Apart from the $.ajax() method, all methods have one thing in common: they do not operate on a set of DOM elements, but are called directly from a jQuery object. Therefore, we won't write statements like this:

$('p').ajax(...);

This will select all paragraphs in the page, then call the ajax() method, and instead write:

$.ajax(...);

In this article, we will discuss three most commonly used jQuery abbreviation methods: load(), $.post() and $.get().

load()

The first method we will discuss is load(). It enables us to load data from the server and put the returned data (usually HTML code) into the element that selects the matching. Before actually using it, let's take a look at its signature:

load(url[, data][, callback])

The meaning of each parameter is as follows:

• url: A string specifying the URL of the resource to which you want to send the request;
• data: An optional string that should be a well-formed query string, or an object that must be passed as a request parameter. If a string is passed, the request method will be GET, and if an object is passed, the request method will be POST. If this parameter is omitted, the GET method is used;
• callback: An optional callback function called after the Ajax request is completed. This function accepts up to three parameters: response text, requested status string, and jqXHR instance. Inside the callback function, the context (this) is set one by one to each element of the collection.

Does this seem difficult to use? Let's look at a specific example.

Suppose you have an element in your website with the ID main, which represents the main content. What we want to do is asynchronously load the main content of the page referenced in the link in the main menu, ideally its ID is main-menu. We just want to retrieve the content inside this element, because the rest of the layout will not change, so they are not required to be loaded.

This approach is intended as an enhancement because if users visiting the website have disabled JavaScript, they can still browse the website using the usual synchronization mechanism. We want to implement this feature because it can improve the performance of the website. In this example, we assume that all links in the menu are internal links.

Using the jQuery and load() methods, we can complete this task with the following code:

$('p').ajax(...);

Wait! Can you see what's wrong with this code? Some of you may notice that this code retrieves all HTML code of the referenced page, not just the main content. Executing this code will result in something like having two mirrors, one in front of the other: you see a mirror inside a mirror, inside a mirror, and so on. What we really want is to only load the main content of the target page. To solve this problem, jQuery allows us to add a selector immediately after the specified URL. Using this function of the method, we can rewrite the previous code to:

load()This time we search the page, then filter the HTML code, injecting only descendants of the element with ID main. We include a universal selector (

) because we want to avoid having #main elements inside the #main element; we only want what is inside #main, not #main itself.

$.ajax(...);

This example is good, but it only shows the use of one of the available parameters. Let's take a look at more code! *

Use callback function with load()

Callback parameter can be used to notify the user of the completion of the operation. Let's update the previous example for the last time to use it.

This time we assume we have an element with ID notification-bar and it will be used as...well, notification bar.

When we master the

, let's turn our attention to the next method.

load(url[, data][, callback])

load()$.post()

Sometimes we want to inject content returned by the server into one or more elements. We may want to retrieve the data and then decide what to do with it after searching the data. To do this, we can use the $.post() or $.get() method.

They are functionally similar (make a request to the server) and are the same in terms of signature and accepted parameters. The only difference is that one sends a POST request and the other sends a GET request. Obviously, isn't it?

If you don't remember the difference between a POST request and a GET request, if our request may cause a server-side state to change, resulting in different responses, you should use POST. Otherwise, it should be a GET request.

$.post() The signature of the method is:

$('p').ajax(...);

The parameters are as follows:

• url: A string specifying the URL of the resource to which you want to send the request;
• data: An optional string or object that jQuery will be sent as part of a POST request;
• callback: The callback function executed after the request is successful. Inside the callback function, the context (this) is set to represent the object that represents the Ajax settings used in the call.
• type: An optional string that specifies how the response body is interpreted. Accepted values ​​are: html, text, xml, json, script, and jsonp. This can also be a string of multiple space-separated values. In this case, jQuery converts one type to another. For example, if the response is text and we want to treat it as XML, we can write "text xml". If this parameter is omitted, the response text will be passed to the callback function without any processing or evaluation, and jQuery will try its best to guess the correct format.

Now that you know what $.post() can do and what its parameters are, let's write some code.

Suppose we have a form to fill out. Every time a field loses focus, we want to send the field data to the server to verify its validity. We will assume that the server returns information in JSON format. A typical use case is to verify that the user selected username has not been occupied yet.

To implement this function, we can use jQuery's $.post() method as follows:

$.ajax(...);

In this code, we send a POST request to the page identified by the relative URL "/user". We also use the second parameter data to send the server the name and value of the field that loses focus. Finally, we use a callback function to verify that the value of the status attribute of the returned JSON object is error, in which case we display the error message (stored in the message attribute) to the user.

To give you a better understanding of what this type of JSON object might look like, here is an example:

load(url[, data][, callback])

As I said, $.get() is the same as $.post() except for being able to make GET requests. So the next section will be very short and I will focus on some use cases instead of repeating the same information.

$.get()

$.get() is one of the methods provided by jQuery to issue GET requests. This method initiates a GET request to the server using the specified URL and the optional data provided. After the request is completed, it can also execute the callback function. Its signature is as follows:

$('p').ajax(...);

The

parameters are the same as those of the $.post() method, so I won't repeat them here.

$.get() functions are ideal for cases where the server always returns the same result for a given parameter set. It is also a good choice for resources that you want users to be able to share. For example, for transportation services (such as train timetable information), people searching for the same date and time must get the same results, and a GET request is ideal. Additionally, if the page can respond to GET requests, users can share the results they get with their friends - the magic of URLs.

Conclusion

In this article, we discuss some of the most commonly used Ajax abbreviation methods for jQuery. They are a very convenient way to perform Ajax requests, and as we can see, in their basic version, it takes only one line of code to achieve what we want.

Please check jQuery's Ajax abbreviation documentation for more information about these and other methods. Although we don't discuss anything else here, you should be able to use the knowledge you have gained in this article to get started with other methods.

(The FAQ section should be added here, the content is the same as the FAQ section in the input text)

The above is the detailed content of An Introduction to jQuery's Shorthand Ajax Methods. For more information, please follow other related articles on the PHP Chinese website!