Detailed explanation of the joint use of jQuery, Ajax and JSONP in JavaScript_jquery

With the help of XMLHttpRequest, the browser can interact with the server without refreshing the entire page. This is the so-called Ajax (Asynchronous JavaScript and XML). Ajax can provide users with a richer user experience.

Ajax requests are driven by JavaScript. A request is sent to the URL through JavaScript code. When the server responds, a callback function will be triggered. The information returned by the server can be processed in the callback function. Since the entire process of sending requests and responses is asynchronous, other Javascript codes in the page will continue to execute during this period without interruption.

jQuery certainly provides good support for Ajax, and it also abstracts away the painful differences in Ajax support among various browsers. It not only provides the full-featured $.ajax() method, but also more functions such as $.get(), $.getScript(), $.getJSON(), $.post() and $().load(), etc. For a simple method.

Although it is named Ajax, many Ajax applications do not use XML, especially jQuery Ajax applications. Most of them do not use XML; instead, they are more commonly used: plain text, HTML and JSON (JavaScript) Object Notation).

Generally, due to the restrictions of the same-origin policy (same protocol, same domain name, same port), Ajax cannot perform cross-domain requests, unless a solution such as JSONP (JSON with Padding) is used to achieve some affected requests. Limited cross-domain functionality.
Some important concepts about Ajax

GET vs POST, these are the two most commonly used methods of sending requests to the server. A correct understanding of the differences between these two methods is very important for Ajax development.

The GET method is usually used to perform some non-destructive operations (that is, only obtain information from the server without modifying the information on the server). For example, search query services typically use GET requests. In addition, GET requests may also be cached by the browser, which may cause some unpredictable problems. Generally, GET requests can only send data to the server through query strings.

The POST method is usually used to perform some destructive operations on the server (that is, modify the data on the server). For example, when you publish a blog post, you should use a POST request. Unlike GET requests, POST requests do not have caching issues. In POST requests, the query string as part of the URL can also submit data to the server, but this method is not recommended. All data should be sent separately from the URL.

Data type, jQuery usually requires specifying the data type returned by the server. In some cases, the data type may already be included in the method name, such as $.getJSON(). Otherwise, it will be used as an available Part of the configured object that will eventually be used as a parameter of the $.ajax() method. Data types usually include the following:

• text: plain text, used to transmit simple strings.
• html: used to transmit a piece of HTML.
• script: Add a script to the page.
• json: Transmit a formatted JSON object, which can contain strings, arrays or objects.
• jsonp: used to transmit JSON data returned from other domains.
• xml: used to transmit customized XML format data.

Asynchronous execution, the A in Ajax refers to asynchronous. At this point, it may be difficult for many jQuery beginners to understand what asynchronous is, because Ajax requests are asynchronous by default, and the information returned by the server is not immediately available. All information returned by the server can only be processed in a callback function. For example, the following code is wrong:

var response;
$.get('foo.php', function(r) { response = r; });
console.log(response); // undefined!

The correct approach should be to process the data returned by the server in the callback function. The callback function is only executed when the Ajax request is successfully completed. Only at this time can the data from the server be obtained:

$.get('foo.php', function(response) { console.log(response); });

同源策略及 JSONP，前面已经说过，一般情况下 Ajax 的请求会被限制在相同协议（http 或 https）、相同端口、相同域名下才能正确执行，但是 HTML 的