一、json（掌握）

JSON的全稱是”JavaScript Object Notation”，意思是JavaScript物件表示法，它是一種基于文本，獨立于語言的輕量級資料交換格式，
JSON有兩種結構組成：Object, Array，包含四種基本資料型別：Number,String,boolean,null

{
    "id": 1,
    "name": "ran",
    "age": 18,
    "isLogin": true,
    "vip": null,
    "haslearn": [{
            "classname": "c語言",
            "teacher": "feng"
        },
        {
            "classname": "高數",
            "teacher": "sun"
        }
    ]
}

JavaScript有一個內置物件JSON，用于處理JSON資料

JSON.stringify(object) 用于將資料轉化為JSON字串
JSON.parse(string) 用于將JSON字串轉化為JSON物件

var json = {
    "id": 1,
    "name": "ran",
    "age": 18,
    "isLogin": true,
    "vip": null
}
var jsonstr = JSON.stringify(json);
var jsonobj = JSON.parse(jsonstr);
console.log(jsonstr);
console.log(jsonobj);

{"id":1,"name":"ran","age":18,"isLogin":true,"vip":null}
{ id: 1, name: 'ran', age: 18, isLogin: true, vip: null }

二、Nginx（了解）

什么是代理服務器？
代理服務器，客戶機在發送請求時，不會直接發送給目的主機，而是先發送給代理服務器，代理服務接受客戶機請求之后，再向主機發出，并接收目的主機回傳的資料，存放在代理服務器的硬碟中，再發送給客戶機，
正向代理，架設在客戶機與目標主機之間，只用于代理內部網路對Internet的連接請求，客戶機必須指定代理服務器,并將本來要直接發送到Web服務器上的http請求發送到代理服務器中，
反向代理服務器架設在服務器端，通過緩沖經常被請求的頁面來緩解服務器的作業量，將客戶機請求轉發給內部網路上的目標服務器；并將從服務器上得到的結果回傳給Internet上請求連接的客戶端，此時代理服務器與目標主機一起對外表現為一個服務器，

Nginx單純的http功能的對應，http的代理，
Nginx功能豐富，可作為HTTP服務器，也可作為反向代理服務器，郵件服務器，

三、跨域（掌握）

同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響，可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實作，同源策略會阻止一個域的javascript腳本和另外一個域的內容進行互動，所謂同源（即指在同一個域）就是兩個頁面具有相同的協議（protocol），主機（host）和埠號（port）
當一個請求url的協議、域名、埠三者之間任意一個與當前頁面url不同即為跨域，

解決跨域問題

瀏覽器設定
反向代理(Nginx)
JSON with Padding（JSONP）非官方協定
Cross-Origin Resource Sharing（CORS）跨域資源共享

四、互動方式（了解）

（1）cookie

Cookie是服務器保存在客戶端中的一小段資料資訊，使用Cookie有一個前提，就是客戶端瀏覽器允許使用Cookie并對此做出相應的設定，一般不贊成使用Cookie，

（2）表單

傳統的jsp,php等服務端語言，在頁面內設定form表單，確定需要傳遞的引數，通過submit傳輸到服務器

（3）jsonp

一種非官方跨域資料互動協議，利用具有src屬性標簽不受跨域限制的特性，通過動態創建script標簽來從服務器端引入js代碼，從而獲得服務器傳來的資料，只能是get方法，

（4）websocket

瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，并進行雙向資料傳輸，

（5）ajax

五、ajax（掌握）

AJAX 是一種用于創建快速動態網頁的技術，通過在后臺與服務器進行少量資料交換，AJAX 可以使網頁實作異步更新，這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新，
AJAX相當于是在用戶和服務器之間加了—個中間層(AJAX引擎)，使用戶操作與服務器回應異步化，并不是所有的用戶請求都提交給服務器,像—些資料驗證和資料處理等都交給 Ajax引擎自己來做, 只有確定需要從服務器讀取新資料時再由Ajax引擎代為向服務器提交請求，

創建ajax物件

var xhr = new XMLHttpRequest();

使用ajax方法

xhr.open(method,url,async, username, password)  //設定請求基本資訊
xhr.setRequestHeader(header, value)  //設定請求頭
xhr.onreadystatechange()   //監聽readyState屬性
xhr.getResponseHeader()   //獲得回應頭
xhr.ontimeout() //請求超時后的回呼函式
xhr.send()  //發送請求

使用AJAX物件的屬性
xhr.readyState：獲得請求的狀態
xhr.status：獲得HTTP回應的狀態碼
xhr.responseText：獲得服務器回傳的文本資料
xhr.responseXML：獲得服務器回傳的一個XML資料
xhr.timeout：設定請求的超時時間(ms)

<body>
    <form>
        <input id="studentnum" />
        <input id="psw" type="password" />
        <input id="btn" onclick="send()" type="button" value="提交" />
    </form>
</body>
<script>
    function send() {
        // 創建物件
        var xhr = new XMLHttpRequest();
        // 設定基本資訊
        xhr.open('post', 'http://localhost:8886/');
        // 設定請求頭
        xhr.setRequestHeader('Content-Type', 'application/json');
        //設定監聽
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log("success");
                if (xhr.responseText) {
                    console.log(JSON.parse(xhr.responseText)); //接收后端傳過來的資料
                } else {
                    console.log(xhr.responseXML); //接收后端傳來的XML格式的資料
                }
            }
        }
        // 發送資訊
        xhr.send(JSON.stringify({
            studentnum: document.getElementById("studentnum").value,
            password: document.getElementById("psw").value,
        }));

    }
</script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/289613.html

標籤：其他

上一篇：Promise--實踐練習之fs模塊 & node運行Js腳本 & Promise封裝練習-fs模塊 & util.promisify方法

下一篇：【Vue.js 知識量化】ES6 語法積累

2021暑假第三次討論班