jq of ajax call summary

Summarize experiences with ajax call back

First look at a code sample:

 $.ajax({
    url: 'http://blog2019.applinzi.com/api/blogs',
    type: 'GET',
    contentType: "application/json",
    success: function (data) {
        var html = '';
        console.log(data);
        for (i = 0; i < data.length; i++) {
            html += '<div class="panel panel-primary">' +
                ' <div class="panel-heading">' + data[i].blogText +
                '<div class="f-r">' + getMyDate(Number(data[i].date)) + '</div>' + '</div>' +
                ' <div class="panel-body"  id = "details">' + '<a href = "./Details.html?id=' + data[i]._id + '" target = "_blank">' + data[i].introText + '</a>' + '</div>' +
                '<div class="panel-footer">' + getCategoryNameById(data[i].languageId) + '</div>' + '</div>'
        }
        $('.post-wrapper').html(html);
    },
    error: function (error) {
        debugger;
        console.log(error);
    }
});

For the above code, we look at several key parameters:

1. type of request method;
2. url request url;
3. datetype data format;
4. Data requested data;
5. If the request succeeds success callback function

type of request method:

type of GET and POST request is divided into two kinds. The difference between get and post are many, but the time from my own point of view the difference between get and post are:

GET的目的就如同其名字一样是用于获取信息的。它旨在显示出页面上你要阅读的信息。浏览器会缓冲GET请求的执行结果，如果同样的GET请求再次发出，浏览器就会显示缓冲的结果而不是重新运行整个请求。这一流程不同于浏览器的处理过程，但是它是有意设计成这样以使GET调用更有效率。GET调用会检索要显示在页面中的数据，数据不会在服务器上被更改，因此重新请求相同数据的时候会得到相同的结果。

POST方法应该用于你需要更新服务器信息的地方。如某调用要更改保存在服务器上的数据，而从两个同样的POST调用返回
的结果或许会完全不同，因为第二个POST调用的值与第一个的值不相同，这是由于第一个调用已经更新了其中一些值。POST调用通常会从服务器上获取响应而不是保持前一个响应的缓冲。

In the interview, we often get asked about the difference between the post and, I conclude the following:

• url parameters get passed, post in the request body.

• get request parameters passed in the url is the length restricted, but no post.

• get more secure than POST, because the url parameter directly exposed, it can not be used to transmit sensitive information.

• get up only the url encoding, and support multiple encoding post

• get the browser will request the active cache, and post support multiple encoding.

• get request parameters will be retained in full browsing history, the post and the parameters are not retained.
• GET and POST on the nature of the link is TCP, and non-discriminatory. However, due to the provisions of HTTP and the browser / server, causing them to reflect some differences in the application process.

• GET generates a TCP packet; generating the POST two TCP packets.

Long said:
For the GET request, the browser will http header and data sent together, the server response 200 (return data);
and for the POST, the browser transmits the first header, the server response 100 continue, then send the browser data, the server response 200 ok (return data).

url

For url, it is divided into two cases:
one is the direct interface to the address written into the background of the family to stay, one is we need to be spliced.

datatype data formats:

• "Xml": returns an XML document, available jQuery process.
• "Html": Returns the HTML Plain text information; script tag contains will be executed when inserting dom.
• "Script": return plain text JavaScript code. It does not automatically cached results. Unless the "cache" parameter sets. Note: When remote request (not in the same domain under), all POST requests will be converted to a GET request. (Because of the use of DOM script tag to load)
• "Json": return JSON data.
• "Jsonp": JSONP format. When using JSONP form of calling functions, such as "myurl? Callback =?" JQuery automatically replaces the? Correct function name to execute the callback function.
• "Text": return plain text string

Five steps ajax implementation (interview):

1. Create XMLHttpRequest object:
   var xmlHttp = new XMLHttpRequest();
2. Register callback function:

{
       if (xmlHttp.readyState == 4)
            if (xmlHttp.status == 200) {
               var responseText = xmlHttp.responseText;

           }
}

1. Configuration request message, open (), get

// get the request parameters applied under the url: .ashx methodName = GetAllComment & str1 = str1 & str2 = str2?
xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true);

post requests the required configuration request header:
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

1. Transmission request, the post request, parameters to be passed to put this
   xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");

2. Depending on the response processing

function callback1() {
    if (xmlHttp.readyState == 4)
        if (xmlHttp.status == 200) {
            //取得返回的数据
            var data = xmlHttp.responseText;
            //json字符串转为json格式
            data = eval(data);
            $.each(data,
                function (i, v) {
                    alert(v);
                });
        }
}