js:get/post/put/delete/option請求

總結

get：擷取資料

post：增加

put：修改

delete：删除

option: 預檢請求

1、GET

get請求是用來擷取資料的，隻是用來查詢資料，不對伺服器的資料做任何的修改，新增，删除等操作。

在這裡我們認為get請求是安全的，以及幂等的。安全就是指不影響伺服器的資料，幂等是指同一個請求發送多次傳回的結果應該相同。

特點：

get請求會把請求的參數附加在URL後面，這樣會産生安全問題，如果是系統的登陸接口采用的get請求，需要對請求的參數做一個加密。

get請求其實本身HTTP協定并沒有限制它的URL大小，但是不同的浏覽器對其有不同的大小長度限制

示例：js 原生 get請求

var httpRequest = new XMLHttpRequest();//第一步：建立所需的對象
        httpRequest.open('GET', 'url', true);//第二步：打開連接配接  将請求參數寫在url中  ps:"./Ptest.php?name=test&nameone=testone"
        httpRequest.send();//第三步：發送請求  将請求參數寫在URL中
        /**
         * 擷取資料後的處理程式
         */
        httpRequest.onreadystatechange = function () {
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                var json = httpRequest.responseText;//擷取到json字元串，還需解析
                console.log(json);
            }
        };
           

示例：jquerry ajax

2、POST

post請求一般是對伺服器的資料做改變，常用來資料的送出，新增操作。

特點：

post請求的請求參數都是請求體中

post請求本身HTTP協定也是沒有限制大小的，限制它的是伺服器的處理能力

jquerry ajax

var login_ip = 'http://192.168.1.254;//登入的URL
            var login_data = {
                "username": "admin",
                "password": "password"
            };  
              $.ajax({
                    headers: {
                        //  'Content-Type': 'application/x-www-form-urlencoded',
                        'Accept':'application/json,application/xml,application/xhtml+xml,text/html,text/xml,text/plain'

                    },
                    url: login_ip,//sale_services",
                    type: "POST",
                    data: JSON.stringify(login_data),//JSON.stringify(login_data),
                    dataType: "json",
                    //  contentType: "application/json",
                    success: function (data) {
                        console.log(data);
                    }
                });
            }
           

3、PUT

put請求與post一樣都會改變伺服器的資料，但是put的側重點在于對于資料的修改操作，但是post側重于對于資料的增加。

var wirte_ip = 'http://192.168.1.254:9080/api/device/luatest/control_by_name';//寫入資料的URL
            var wirte_data = {
                "key": "DB104.10",
                "value": 222,
                "value_type": 1
            };
           function writedata() {
                $.ajax({
                    headers: {
                        
                        // 'Content-Type': 'application/json;charset=UTF-8',
                        // 'Accept':'application/json,application/xml,application/xhtml+xml,text/html,text/xml,text/plain'
                    },
                    url: wirte_ip,//sale_services",
                    type: "put",
                    data: JSON.stringify(wirte_data), //JSON.stringify(wirte_data),
                    contentType: 'application/json',
                    dataType: "json",
                    async: false, // 預設為異步請求
                    timeout: 50000,
                    error: function (xhr) {
                        console.log("狀态碼：" + xhr.status);
                    },
                    success: function (data, status, xhr) {
                        console.log("請求結果:" + JSON.stringify(xhr));
                    }
                });
            }
           

4、DELETE

delete請求用來删除伺服器的資源。

5、OPTIONS

options請求屬于浏覽器的預檢請求，檢視伺服器是否接受請求，預檢通過後，浏覽器才會去發get，post，put，delete等請求。至于什麼情況下浏覽器會發預檢請求，浏覽器會會将請求分為兩類，簡單請求與非簡單請求，非簡單請求會産生預檢options請求。

    出于安全考慮，并不是所有域名通路後端服務都可以。其實在正式跨域之前，浏覽器會根據需要發起一次預檢（也就是option請求），用來讓服務端傳回允許的方法（如get、post），被跨域通路的Origin（來源或者域），還有是否需要Credentials(認證資訊)等。那麼浏覽器在什麼情況下能預檢呢？

    浏覽器将CORS請求分為兩類：簡單請求（simple request）和非簡單請求（not-simple-request）,簡單請求浏覽器不會預檢，而非簡單請求會預檢。這兩種方式怎麼區分？

同時滿足下列三大條件，就屬于簡單請求，否則屬于非簡單請求

1.請求方式隻能是：GET、POST、HEAD

2.HTTP請求頭限制這幾種字段：Accept、Accept-Language、Content-Language、Content-Type、Last-Event-ID

3.Content-type隻能取：application/x-www-form-urlencoded、multipart/form-data、text/plain

對于簡單請求，浏覽器直接請求，會在請求頭資訊中，增加一個origin字段，來說明本次請求來自哪個源（協定+域名+端口）。伺服器根據這個值，來決定是否同意該請求，伺服器傳回的響應會多幾個頭資訊字段，如圖所示：上面的頭資訊中，三個與CORS請求相關，都是以Access-Control-開頭。

1.Access-Control-Allow-Origin：該字段是必須的，* 表示接受任意域名的請求，還可以指定域名

2.Access-Control-Allow-Credentials：該字段可選，是個布爾值，表示是否可以攜帶cookie，（注意：如果Access-Control-Allow-Origin字段設定*，此字段設為true無效）

3.Access-Control-Allow-Headers：該字段可選，裡面可以擷取Cache-Control、Content-Type、Expires等，如果想要拿到其他字段，就可以在這個字段中指定。比如圖中指定的GUAZISSO

非簡單請求是對那種對伺服器有特殊要求的請求，比如請求方式是PUT或者DELETE，或者Content-Type字段類型是application/json。都會在正式通信之前，增加一次HTTP請求，稱之為預檢。浏覽器會先詢問伺服器，目前網頁所在域名是否在伺服器的許可名單之中，伺服器允許之後，浏覽器會發出正式的XMLHttpRequest請求，否則會報錯。

參考：https://blog.csdn.net/zhenwei1994/article/details/84399999

https://www.jianshu.com/p/5cf82f092201