JS基础总结（5）：GET、POST

上一篇：JS知识总结（4）：JS请求之让你复习TCP

俗话说，九为数之极，所以就暂不开前端知识总结10了 ，而且JS基础都快写到第5篇了，不给个正标题，说不过去吧！别瞎扯了，赶紧开始今天的内容吧：

请求数据一般是使用get、post方法，但是其实还有一些其它的HTTP方法：如put、patch等，今天我们主要讲一下get、post方法，如果篇幅不够就用那些其它的方法来凑吧！

get、post简要

• get：从指定的资源请求数据
• post：向指定的资源提交要被处理的数据

get、post略详

get方法

其实在浏览器中输入地址http://host:port/path?key1=value1&key2=value2，然后Enter，这时浏览器就发送了get请求到服务器请求数据。

tips：

• GET 请求可被缓存
• GET 请求保留在浏览器历史记录中
• GET 请求可被收藏为书签
• GET 请求不应在处理敏感数据时使用
• GET 请求有长度限制
• GET 请求只应当用于取回数据(当然你想通过键值对来传输一些数据也行)

post方法

​ 查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的

POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2

参考文章：HTTP 方法：GET 对比 POST

get、post略略详

​ 那具体来说，怎么来✍JS代码呢？嗯，那我来介绍一些实现get、post的方式吧：

Ajax

​ 要在Ajax中进行HTTP调用，您需要初始化一个新XMLHttpRequest()方法。什么是XMLHttpRequest()方法呢？

​ Explain：提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。-- XML DOM
Ajax - get

const Http = new XMLHttpRequest();
const url = "Server Address";
Http.open("GET", url);
Http.send();
Http.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) { // 4:请求完成 
        console.log(Http.responseText);
    }
}
// 有没有发现是不是没有提 键值对，其实呢，键值对的信息通过?&拼接在url中了，这波分析，细不细节(hhh)

Ajax - post

​ 类推吧，或是看 参考文章：js原生ajax请求

看到这，YOU MAY BE TK：靠，写个Ajax - get这么麻烦，到时候写代码岂不要累死？I : 所以有了jQ啊

jQ - get

$(document).ready(function() {
    const Url = "Server Address";
    $('.btn').click(function() {
        $.ajax({
            url: Url,
            type: "GET",
            success: function(res) { // 成功回调方法
                console.log(res);
            },
            error:function(err) {
                console.log(err);
            }
            
        })
    })
})

// 简易方法
const Url = "Server Address";
$('.btn').click(function() {
    $.get(Url, function(data, status) {
        if( what is the status ) {
            console.log(data);
        } 
    }); 
});

jQ - post

const Url = "Server Address";
const data = {
    name: "SST",
    id: 23
};

$('.btn').click(function() { 
    $.post(Url, data, function(data, status) {
        console.log(`${data} and status is ${status}`);
    });
});

jQ - get / post

​ 比较规范且实用

const Url = "Server Address";
const data = {
    name: "SST",
    id: 23
};

$('.btn').click(function() { 
    $.ajax({
        url: Url,
        type: "GET/POST",
        data: data, // choosable
        // dataType is also choosable, there is JSON HTML TXT jsonp...
        success: function(res) { // Add Your Logical Code
        },
        error: function(res) { // Add your Logical Code
            
        }
    });
});

小小扩展 Fetch…

Fetch (ES6新特色)

​ 它返回一个Promise ,

const Url = "Server Address";

fetch(Url).then(data => { return data.json(); })
.then(res => { console.log(res); });

const Url = "Server Address";
const Data = {
    name: "SST",
    id: 23
};

// optional args
const OhterArgs = {
    headers: {"content-type":"application/json; charset=UTF-8"},
    body: Data,
    method: "POST"
};

fetch(Url, OtherArgs)
.then(data => { return data.json(); })
.then(res => { console.log(res); })
.then(error => { console.log(error); })

本来还想说一下Axios的，我发现上面两段代码看不懂/(ㄒoㄒ)/~~，连Promise是啥也不清楚，所以我“知难而退”

-------------- end

不足：关于es6新出的fecth还是不太清楚，得跟上技术上的潮流才行

TODO：去好好学一下Promise 和 fetch相关的知识吧！

(诚心求👍)