jQuery AJAX Differences Between GET vs POST

Core points

• jQuery In AJAX request, GET and POST are both methods to send data to the server. The key difference is that GET attaches data to the URL (key-value pair form), which is visible in the browser address bar, which is suitable for sending a small amount of data; POST places the data in the HTTP request body, which is not visible to the user, which is suitable for sending a large amount of data or sensitive information.
• For idempotent operations (such as database queries), GET should be used; for operations with side effects (such as modifying databases or subscribing to services), or for processing long requests (especially when sending large amounts of or sensitive data, and should be via HTTPS).
• The GET and POST methods can be used simultaneously in a single application according to specific needs. While POST is more secure than GET (data is not exposed to URLs), neither provides encryption. To ensure data security, HTTPS should be used to encrypt data transmitted between the client and the server.

GET and POST

• GET request is used to obtain data from the server.
• POST request is used to modify data on the server.

When to use GET

If form processing is idempotent (i.e., there is no lasting observable effect on world state), the form method should be GET. Many database searches have no obvious side effects and are ideal for querying forms.

Features of GET:

• Use GET for safe operations and POST for unsafe operations.
• GET requests can be cached.
• GET requests can be kept in browser history.
• GET requests can be bookmarked.
• GET requests can be distributed and shared.
• GET requests may be hacked.

[W3.org GET method definition definition] (W3C GET method definition link should be inserted here)

When should I use POST

If a service related to form processing has side effects (e.g., modifying a database or subscribing to a service), the method should be POST.

You can use POST when processing long requests - if you send a large amount of data or send sensitive data over HTTPS, you should use POST. Some browsers (such as Internet Explorer) have restrictions on URL string length, so if you use GET, some forms' operations may be interrupted.

The following operations may require consideration of using POST:

• Publish messages to bulletin boards, news groups, mailing lists, or similar article groups.
• Provides data blocks to the data processing process, such as the result of submitting a form.
• Extend the database by appending operations.
• Annotate existing resources.

[W3.org POST method definition] (W3C POST method definition link should be inserted here)

GET and POST in AJAX call

AJAX calls are more commonly used for GET unless sensitive data is sent to the server or scripts that are processing data on the server are called. This is because when using XMLHttpRequest, the browser implements POST as a two-step process (sends the header first, and then sends the data). This means that GET requests are responding faster – this is what is needed in the AJAX environment! Since "Ajax" requests are limited by homologous policies, the security risk of using GET instead of POST is limited. Use GET to "get" information from the server, such as loading a JavaScript file (can use the AJAX abbreviation function $.getScript()) or loading a JSON file (can use the AJAX abbreviation function $.getJSON()).

jQuery AJAX functions using GET as default: $.get(), $.getScript(), $.getJSON(), .load()

jQuery AJAX function using POST as default: $.post()

GET AJAX Call Example - Call PHP Script to Get Twitter Followers

$.ajax({
  url: 'getTwitterFollowers.php',
  type: 'GET',
  data: 'twitterUsername=jquery4u',
  success: function(data) {
    // 成功时调用
    $('#ajaxphp-results').html(data);
  },
  error: function(e) {
    // 发生错误时调用
    //console.log(e.message);
  }
});

View the demo

POST AJAX call example - Submit login form

var $form = $("#myForm");
var url = $form.attr("action") + "?" + $form.serialize();
$("#" + id).html(url);

$.ajax({
  type: "POST",
  url: action,
  data: $form,
  success: function(response) {
    if (response == 'success')
      $("#myForm").slideUp('slow', function() {
        $("#msg").html("You have logged in successfully!");
      });
    else
      $("#msg").html("Invalid username and/or password.");
  }
});

Other reading materials

Form Submission Example This example does not really work with AJAX because these requests occur in the background, but it may help you understand more about what is happening between different request types. When using GET, an HTTP request is generated and the data is passed to the web server as a set of encoding parameters in the query string attached to the URL. For example, using GET for login form submission is a bad idea because login details will be displayed in the address bar.

<code>GET /login.php?username=user&password=12345 HTTP/1.1
Host: domain.com</code>

However, if we use POST, the parameters will be passed through the body of the HTTP request, not the URL. This will happen in the background between the browser and the web server.

<code>POST /login.php HTTP/1.1
Host: domain.com
username=user&password=12345</code>

---

GET Cache GET is intended to be used to read information to be displayed on a page. The browser will cache the results of the GET request, and if the same GET request is made again, they will display the results of the cache instead of rerunning the entire request.

---

REST—"RESTful" client server architecture For example, HTTP has a very rich vocabulary in terms of verbs (or "methods"), URIs, Internet media types, requests and response codes. REST uses these existing features of the HTTP protocol, thus allowing existing hierarchical proxy and gateway components to perform other functions on the network, such as HTTP caching and security enforcement.

Read information about "Denotative State Transfer" (REST): http://en.wikipedia.org/wiki/Representational_State_Transfer#RESTful_example:_the_World_Wide_Web

---

REST—"RESTful" Web Service (API) It is a set of resources with four defined aspects: the base URI of the Web Service, such as http://example.com/resources/; the Internet media type of data supported by the Web Service. This is usually JSON, XML, or YAML, but can be any other valid Internet media type; the operation set of web services supported by HTTP methods (e.g., POST, GET, PUT, or DELETE); the API must be hypertext-driven. [11]

[https://www.php.cn/link/13da2193bcd455bb894871aec1815047 Web Service Link)

Conclusion

I hope you have a clear understanding of when to use GET and when to use POST. If you are still unsure or want to check the background of AJAX calls, use a tool like Firebug NET panel to see where the data is sent (such as in the header) and the type of request. Besides that, I wish you a happy AJAX programming!

FAQs (FAQs) about AJAX GET and POST methods

(This should be reorganized and translated in a more concise language according to the original FAQ part) Due to space limitations, translation of the FAQ part is omitted here. Please provide the original FAQ section, and I can help you translate it into a concise version.

The above is the detailed content of jQuery AJAX Differences Between GET vs POST. For more information, please follow other related articles on the PHP Chinese website!