Front-end learning-JQuery Ajax experience

0. preface Ajax is often used during project promotion. Ajax can be easily used through functions provided by Jquery, but some problems also occur in actual use, such as how to prevent the browser from using cache, how to Use the synchronization method. I hope I can improve myself through blog posts. Here, an addition example is provided to illustrate the problem. To highlight ajax, The frontend web page and the backend PHP program are as simple as possible.
Starting frontend terminal certificate --add.html
Figure 1 add page [backend] -- add. php

<? Php // return the header in JSON format ('content-Type: application/json; charset = UTF-8 '); $ result = array (); $ result ["result"] = $ _ GET ["a"] + $ _ GET ["B"]; echo json_encode ($ result, JSON_NUMERIC_CHECK);?>

[Code repository] -- test-jquery-ajax code repository is located in bitbucket using Hg (instead of Git). Hg has a good GUI tool on windows or ubuntu -- TortoiseHg, I am stupid and cannot master Git. [TortoiseHg instructions] -- if you have never used Hg, refer to the hg clone operation section in blog. [JQuery Chinese API]
1. getJSON is the most commonly used getJSON during project promotion. getJSON can obtain a JSON data packet from the server. Note that if the HTTP header of the server in JSON format contains application/json information, otherwise, there will be compatibility issues (simply put, there may be problems with IE ).

    var submit_async = function() {        $.getJSON('add.php', {             a: $('input[name="a"]').val(),            b: $('input[name="b"]').val()        },         function(data) {            $('#result').text(data.result);        });    };

[HTTP request and Response]
Figure 2 complete HTTP request and response
2. Prevent the browser from using the cache. To speed up the operation, if the browser repeatedly requests the same URL, the browser will use the cached content instead of making a new request to the server. To prevent the browser from using the cache, you can add some changed content after the URL. The most common method is to add the millisecond value of the current time, for example, add & now = <Current Time millisecond value>. (This method also has some "stubborn", such as running the safari browser of the iOS6 system ).

Var submit_async = function () {$. getJSON ('add. php ', {a: $ ('input [name = "a"]'). val (), B: $ ('input [name = "B"] '). val (), now: new Date (). getTime () // prevents the browser from using cache}, function (data) {$ ('# result '). text (data. result );});};

[HTTP request and Response]
Figure 3 complete HTTP request and response
3. The getJSON method in synchronous mode does not have the synchronization option. If synchronous mode is used, you can use the native ajax method. Set async to false for synchronization.

Var submit_sync = function () {$. ajax ({type: "get", url: 'add. php ', async: false, // use the data: {a: $ ('input [name = "a"]') synchronization method. val (), B: $ ('input [name = "B"] '). val (), now: new Date (). getTime () // do not add a comma in this line}, contentType: "application/json; charset = UTF-8", dataType: "json", // cache: false, success: function (data) {$ ('# result '). text (data. result);} // do not add a comma in this line });}

[HTTP request and Response] HTTP request and response are the same as Figure 3.
4. Prevent the browser from using the cache option in the ajax method. If it is set to cache: false, the browser cache is disabled. The implementation method is very similar to [2]. This parameter is added after the URL & _ = <Current Time in milliseconds>

Var submit_sync = function () {$. ajax ({type: "get", url: 'add. php ', async: false, // use the data: {a: $ ('input [name = "a"]') synchronization method. val (), B: $ ('input [name = "B"] '). val ()}, contentType: "application/json; charset = UTF-8", dataType: "json", cache: false, success: function (data) {$ ('# result '). text (data. result);} // do not add a comma in this line });}

[HTTP request and Response]
Figure 4 complete HTTP request and response