摘要：高級部分前后端聯(lián)動瀏覽器服務(wù)器數(shù)據(jù)庫是什么文件系統(tǒng)是一種數(shù)據(jù)庫是一種數(shù)據(jù)庫也是一個軟件只要能長久地存數(shù)據(jù)，就是數(shù)據(jù)庫前后端如何配合接下來我們用一個文件充當(dāng)數(shù)據(jù)庫實際上數(shù)據(jù)庫的存儲內(nèi)容本質(zhì)就是一個帶有結(jié)構(gòu)的文件捋一捋前后端交互的過程代碼在這里

javascript高級部分:前后端聯(lián)動,瀏覽器+服務(wù)器

文件系統(tǒng)是一種數(shù)據(jù)庫
MySQL 是一種數(shù)據(jù)庫,也是一個軟件
只要能長久地存數(shù)據(jù)，就是數(shù)據(jù)庫

接下來我們用一個文件充當(dāng)數(shù)據(jù)庫(實際上數(shù)據(jù)庫的存儲內(nèi)容本質(zhì)就是一個帶有結(jié)構(gòu)的文件),捋一捋前后端交互的過程.

代碼在這里
幾次代碼的變更在歷史commit里

首先寫一個首頁

我的余額為&&&amount&&&


    

再寫服務(wù)器的代碼

var http = require("http")
var fs = require("fs")
var url = require("url")

var port = process.env.PORT || 8888;

var server = http.createServer(function (request, response) {

    var temp = url.parse(request.url, true)
    var path = temp.pathname
    var query = temp.query
    var method = request.method

    //從這里開始看，上面不要看

    if (path === "/") {  // 如果用戶請求的是 / 路徑
        var string = fs.readFileSync("./index.html")  // 就讀取 index.html 的內(nèi)容
        var amount = fs.readFileSync("./db","utf-8")//****從數(shù)據(jù)庫(db文件)同步讀取數(shù)據(jù),放到amount變量里
        string = string.toString().replace("&&&amount&&&",amount)//將后臺的amount替換為前臺的占位符&&&amount&&&

        response.setHeader("Content-Type", "text/html;charset=utf-8")  // 設(shè)置響應(yīng)頭 Content-Type
        response.write(string)   // 設(shè)置響應(yīng)消息體
        response.end();
    } else if (path === "/style.css") {   // 如果用戶請求的是 /style.css 路徑
        var string = fs.readFileSync("./style.css")
        response.setHeader("Content-Type", "text/css")
        response.write(string)
        response.end()
    } else if (path === "/main.js") {  // 如果用戶請求的是 /main.js 路徑
        var string = fs.readFileSync("./main.js")
        response.setHeader("Content-Type", "application/javascript")
        response.write(string)
        response.end()
    } else if(path === "/pay" && method.toUpperCase() === "POST"){//如果請求的路徑是pay且方法為post
        var amount = fs.readFileSync("./db","utf-8")
        var newAmount = amount-1;
        fs.writeFileSync("./db",newAmount);
        response.write("success")
        response.end()
    }else {  // 如果上面都不是用戶請求的路徑
        response.statusCode = 404
        response.setHeader("Content-Type", "text/html;charset=utf-8")  // 設(shè)置響應(yīng)頭 Content-Type
        response.write("找不到對應(yīng)的路徑，你需要自行修改 index.js")
        response.end()
    }

    // 代碼結(jié)束，下面不要看
    console.log(method + " " + request.url)
})

server.listen(port)
console.log("監(jiān)聽 " + port + " 成功，請用在空中轉(zhuǎn)體720度然后用電飯煲打開 http://localhost:" + port)

最后在創(chuàng)建一個名為db的文本文件充當(dāng)數(shù)據(jù)庫

接著我們開啟服務(wù)器
node index.js 8888

接著在瀏覽器中輸入地址http://localhost:8888
當(dāng)用戶打開瀏覽器輸入ip地址,就會向后臺發(fā)送請求,服務(wù)器發(fā)現(xiàn)地址是/之后執(zhí)行if else的path==="/"分支,執(zhí)行下面的代碼:

if (path === "/") {  // 如果用戶請求的是 / 路徑
        var string = fs.readFileSync("./index.html")  // 就讀取 index.html 的內(nèi)容
        var amount = fs.readFileSync("./db","utf-8")//****從數(shù)據(jù)庫(db文件)同步讀取數(shù)據(jù),放到amount變量里
        string = string.toString().replace("&&&amount&&&",amount)//將后臺的amount替換為前臺的占位符&&&amount&&&

        response.setHeader("Content-Type", "text/html;charset=utf-8")  // 設(shè)置響應(yīng)頭 Content-Type
        response.write(string)   // 設(shè)置響應(yīng)消息體
        response.end();
    } 

接著點擊提交按鈕,就會向后臺發(fā)起post請求,請求路徑為/pay,于是進入path === "/pay"分支,執(zhí)行下面的代碼,使數(shù)據(jù)庫(這里數(shù)據(jù)庫用一個文本文件代替)中的金額減一

else if(path === "/pay" && method.toUpperCase() === "POST"){//如果請求的路徑是pay且方法為post
        var amount = fs.readFileSync("./db","utf-8")
        var newAmount = amount-1;
        fs.writeFileSync("./db",newAmount);
        response.write("success")
        response.end()
    }

然后會發(fā)現(xiàn)/pay頁面返回了success

返回剛才的首頁,刷新后,會發(fā)現(xiàn)金額減少了1.

也可以模擬后臺修改數(shù)據(jù)庫成功或失敗

 else if(path === "/pay" && method.toUpperCase() === "POST"){//如果請求的路徑是pay且方法為post
        var amount = fs.readFileSync("./db","utf-8")
        var newAmount = amount-1;
        if(Math.random()>0.5){//模擬成功或失敗
            fs.writeFileSync("./db",newAmount);
            response.write("success")
        }else{
            response.write("fail")
        }
        response.end()
    }

但是剛才那樣體驗非常不好,因為要返回,要刷新.在2005年以前,網(wǎng)頁的前后端交互都是這樣.但現(xiàn)在是8012年了,我們需要優(yōu)化一下用戶體驗

不光form表單可以發(fā)送請求,a標(biāo)簽(需要點擊),link標(biāo)簽,script,圖片,都可以發(fā)送請求

那我們先試試用img發(fā)送一個請求
當(dāng)瀏覽器發(fā)現(xiàn)html里面有一個img時,會自動發(fā)送請求,請求路徑就是img的src.但是有一個缺點.發(fā)送的請求只能是get,沒辦法改成post.
使用img.onload和img.onerror方法判斷請求是成功還是失敗,具體操作看下方代碼

復(fù)習(xí)一下返回的狀態(tài)碼:
2開頭:成功
3開頭:重定向
4開頭:客戶端錯誤
5開頭:服務(wù)器錯誤

修改首頁

我的余額為&&&amount&&&


付錢一元

修改/pay路徑的響應(yīng)

else if(path === "/pay"){//如果請求的路徑是pay,接受圖片的請求
        var amount = fs.readFileSync("./db","utf-8")
        var newAmount = amount-1;
        if(Math.random()>0.5){//模擬成功或失敗
            fs.writeFileSync("./db",newAmount);//成功了就把數(shù)據(jù)寫入數(shù)據(jù)庫
            response.setHeader("Content-Type","image/jpg")//設(shè)置返回文件類型為jpg
            response.statusCode = 200;//返回碼為200,說明成功
            response.write(fs.readFileSync("./dog.jpg"))//必須返回一個真的圖片,不然瀏覽器還是會認(rèn)為是失敗
        }else{
            response.statusCode = 400;//否則返回碼為400,說明失敗
            response.write("fail")
        }
        response.end()
    }

然后開啟服務(wù)器,瀏覽器輸入地址
點擊付錢,成功,并刷新

付錢失敗時,彈框后瀏覽器就不刷新了:

也可局部刷新

img.onload = function(){//如果圖片請求成功(返回碼以2開頭)
            alert("付錢成功")
                        amount.innerText = amount.innerText-1;//局部刷新/因為已經(jīng)知道數(shù)據(jù)庫修改成功,所以無需再進行刷新,直接修改數(shù)值即可

        }

還有一個需要注意的點
在下面這段代碼中

 response.setHeader("Content-Type","image/jpg")//設(shè)置返回文件類型為jpg,
            response.statusCode = 200;//返回碼為200,說明成功
            response.write(fs.readFileSync("./dog.jpg"))//必須返回一個真的圖片,不然瀏覽器還是會認(rèn)為是失敗

看看回復(fù)的響應(yīng)
response.write(fs.readFileSync("./dog.jpg"))這句代碼中fs.readFileSync("./dog.jpg")參數(shù)里只有路徑,沒有加別的,那么讀出來的數(shù)據(jù)類型為2進制數(shù)據(jù),然后"Content-Type","image/jpg"這句代碼表示以jpg圖片的形式讀取這段二進制代碼.

復(fù)習(xí)一下響應(yīng)的四個部分:

1 協(xié)議/版本號 狀態(tài)碼 狀態(tài)解釋
2 Key1: value1
2 Key2: value2
2 Content-Length: 17931
2 Content-Type: text/html
3
4 響應(yīng)的內(nèi)容

response.write(fs.readFileSync("./dog.jpg"))這句代碼就是響應(yīng)的第四部分,即響應(yīng)的內(nèi)容

那么我們也可以用script動態(tài)的發(fā)送請求.原理和img類似,但是必須得把script標(biāo)簽加入到body里面,才會發(fā)送請求,而img標(biāo)簽只要創(chuàng)建,就會發(fā)送請求.
接下來看代碼
首頁的發(fā)送請求代碼

服務(wù)器端的代碼:

else if(path === "/pay"){//如果請求的路徑是pay,接受script的請求
        var amount = fs.readFileSync("./db","utf-8")
        var newAmount = amount-1;

        if(Math.random()>0.5){//模擬成功或失敗
            fs.writeFileSync("./db",newAmount);//成功了就把數(shù)據(jù)寫入數(shù)據(jù)庫
            
            response.setHeader("Content-Type","applacation/javascript")//設(shè)置返回文件類型為javascript
            response.statusCode = 200;//返回碼為200,說明成功
            response.write("alert("我是創(chuàng)建的script請求里面響應(yīng)的內(nèi)容")")//響應(yīng)內(nèi)容為創(chuàng)建的script標(biāo)簽里面的內(nèi)容
        }else{
            response.statusCode = 400;//否則返回碼為400,說明失敗
            response.write("fail")
        }
        response.end()
    }

當(dāng)我點擊打錢的時候,他會動態(tài)的創(chuàng)建一個script,這個script會根據(jù)src發(fā)起請求

進入失敗分支:

成功:
先執(zhí)行請求使用的script里面的語句

每次請求就會創(chuàng)建一個新的script標(biāo)簽,如果響應(yīng)成功了,就執(zhí)行響應(yīng)里面的javascript語句,這個script里面的語句就是返回的響應(yīng)的第四部分的內(nèi)容,執(zhí)行完之后才會觸發(fā)onload事件

那么既然請求返回的響應(yīng)可以執(zhí)行,我們就不需要寫onload了,直接把onload里面的代碼寫在響應(yīng)的第四部分不就可以了?沒錯

接來下修改一下代碼,刪掉onload代碼,將onload里面的代碼寫在服務(wù)器端.將前臺請求成功要做的事情交給后臺來做.

btn.onclick = function(){
        let script = document.createElement("script");
        script.src = "/pay";

        document.body.appendChild(script);//這句話一定要加上,這是與使用圖片請求不一樣的地方

        //刪除onload代碼,交給后臺來做
        script.onerror = function(){//返回碼是4開頭
            alert("付錢失敗");
        }
    }

后臺只需要將金額數(shù)量減1即可,不需要刷新,增加用戶體驗

 else if(path === "/pay"){//如果請求的路徑是pay,接受script的請求
        var amount = fs.readFileSync("./db","utf-8")
        var newAmount = amount-1;

        if(Math.random()>0.5){//模擬成功或失敗
            fs.writeFileSync("./db",newAmount);//成功了就把數(shù)據(jù)寫入數(shù)據(jù)庫

            response.setHeader("Content-Type","applacation/javascript")//設(shè)置返回文件類型為javascript
            response.statusCode = 200;//返回碼為200,說明成功
            response.write("amount.innerText = amount.innerText-1")//響應(yīng)內(nèi)容為創(chuàng)建的script標(biāo)簽里面的內(nèi)容,返回后會立即執(zhí)行*********
        }else{
            response.statusCode = 400;//否則返回碼為400,說明失敗
            response.write("fail")
        }
        response.end()
    }else

最后在做一件事情

因為每次不管成功失敗,都會創(chuàng)建一個script標(biāo)簽,那么可否在請求結(jié)束后,將標(biāo)簽刪除?
可以.
修改前臺onload和onerror代碼即可,不管請求成功失敗,都移除script標(biāo)簽

script.onload = function(e){
            e.currentTarget.remove();//添加移除代碼
        }
        script.onerror = function(e){
            e.currentTarget.remove();
        }

以上方法就叫做SRJ,服務(wù)器返回的javascript,即不是在前臺寫的javascript
這是在ajax出現(xiàn)之前,后端程序員想出來的前后臺無刷新,局部更新頁面內(nèi)容的交互方法

script請求的內(nèi)容不受域名限制.當(dāng)前網(wǎng)站的可以請求其他網(wǎng)站的js代碼,例如jquery

可以引入jquery

所以剛才的SRJ很危險,假如只用了get方法,那么像付錢這種操作很容易被偽裝成功,導(dǎo)致別人的惡意攻擊
例如我進入一個釣魚網(wǎng)站
那個網(wǎng)站直接請求
script.src = "http://alipay.com/pay?usname=mataotao&amount=100000"
這樣只要進入網(wǎng)站執(zhí)行這個請求,豈不是可以隨意給自己的賬戶打錢?
所以只用get不安全.
所以很多危險操作都得用POST請求,例如打錢必須驗證用戶,做各種支付相關(guān)的安全防范,手機驗證碼之類的.

下面我們模仿一下不同的網(wǎng)站請求對方的后臺的過程
首先修改一下本地的hosts文件,將兩個域名都指向127.0.0.1,假裝成兩個不同的網(wǎng)站

hosts文件相當(dāng)于一個個人的DNS，當(dāng)你訪問某個域名時，是先通過hosts進行解析的，沒有找到才進一步通過外網(wǎng)DNS服務(wù)器進行解析。

如果是windows系統(tǒng):
windows系統(tǒng)hosts文件位置及操作
如果是linux或者Unix
地址為/etc/hosts

添加代碼,那么如果我在本地訪問mataotao.com和jack.com,他首先會進127.0.0.1,而不是去外網(wǎng)解析dns
這樣我們就假裝成為了兩個網(wǎng)站,實際上兩個網(wǎng)站的內(nèi)容是一樣的,知識用來做實驗

然后開兩個服務(wù)器,使用兩個不同的端口來監(jiān)聽(模擬兩個不同的網(wǎng)站都開啟了服務(wù)器,都在監(jiān)聽)
監(jiān)聽8001

監(jiān)聽8002

這樣我們在地址欄輸入mataotao.com:8001就進入了第一個網(wǎng)站,在地址欄輸入jack.com:8002
就進入了第二個網(wǎng)站.

這樣兩個個網(wǎng)站都可以接受請求,都可以訪問,只不過內(nèi)容一樣而已
那么接下來我們來模仿不同網(wǎng)站之間的請求互動

修改前端SRJ請求代碼的請求路徑,改為script.src = "http://jack.com:8002/pay";
那么我們打開mataotao.com:8001就進入了第一個網(wǎng)站,點擊按鈕后,意思就是請求http://jack.com:8002/pay這個第二個網(wǎng)站的地址.我們來試一試

結(jié)果如圖所示

這是成功的時候

可以看到,兩個完全不同的網(wǎng)站,他們兩個是可以互相調(diào)script的

這時候的意思是:我是用第一個網(wǎng)站(mataotao.com)打開了第二個網(wǎng)站(jack.com)的付錢功能!
(由于我為了演示,這兩個網(wǎng)站用了同樣的代碼,同一個數(shù)據(jù)庫,我們假設(shè)第一個網(wǎng)站he第二個網(wǎng)站代碼不同)

這時候出現(xiàn)一個問題:
jack.com的后端程序員需要對mataotao.com的頁面細(xì)節(jié)了解的很清楚.
這樣的缺點是后臺對前臺需要了解得太深入了.比如說你是node或者php騰訊后端程序員,可是我竟然還要對阿里巴巴網(wǎng)站的一個按鈕的一個細(xì)節(jié)非常了解.耦合度太高,前后端彼此之間關(guān)系太緊密了.如果后端程序員對頁面細(xì)節(jié)不了解,代碼就寫不下去了.這樣對前后端分離不友好

解耦(解決耦合問題)
解決方法:

后臺程序員:我只把我后臺應(yīng)該改的數(shù)據(jù)庫,然后我寫一個callback函數(shù),將成功和失敗的狀態(tài)傳遞給前臺.這個函數(shù)就是我后端程序員做完這些事情成功之后要前端程序員去做的事情.然后執(zhí)行這個函數(shù),這個函數(shù)的內(nèi)容交給前端去寫.

前端程序員:我不管后端如何修改數(shù)據(jù)庫,我事先寫好成功和失敗的函數(shù),成功了就返回給我一個成功的提示,然后我根據(jù)提示執(zhí)行成功的函數(shù),如果給我的提示是失敗,就執(zhí)行失敗的函數(shù).
接下來寫代碼理解:
修改服務(wù)器端的代碼:

response.write(`${query.callbackName}.call(undefined,"success")`)//先獲取查詢字符串里的callbackName即從前臺傳過來的回調(diào)函數(shù)的函數(shù)名,然后再執(zhí)行他,并把函數(shù)的參數(shù)定為success

添加前臺index.html的代碼

添加的這幾句代碼的解釋:
首先
script.src = "http://jack.com:8002/pay?callbackName=xxx";
在請求時帶上查詢參數(shù),指定callbackName為xxx,以便給后臺程序員調(diào)用
接著

response.write(`${query.callbackName}.call(undefined,"success")`)

后臺程序員獲得前太程序員的查詢參數(shù),并執(zhí)行名為查詢參數(shù)的函數(shù)xxx

執(zhí)行xxx,并且將相應(yīng)的內(nèi)容作為回調(diào)函數(shù)的第一個參數(shù)傳回去,這個參數(shù)為字符串"success"

window.xxx = function(result){
        alert("我是前端程序員寫的函數(shù),經(jīng)過后端程序員調(diào)用才執(zhí)行")
        alert(`后端返回回來的函數(shù)參數(shù)是:${result}`)
    }

執(zhí)行結(jié)果:

也可以根據(jù)后臺傳過來的參數(shù),修改前臺的邏輯

window.xxx = function(result){
        if(result === "success"){
            amount.innerText = amount.innerText - 1;
        }
    }

那么如果我們返回的參數(shù)不是字符串,而是對象呢?
這也是可以的,例如我們修改一下代碼

else if(path === "/pay"){//如果請求的路徑是pay,接受script的請求
        var amount = fs.readFileSync("./db","utf-8")
        var newAmount = amount-1;

        if(Math.random()>0.5){//模擬成功或失敗
            fs.writeFileSync("./db",newAmount);//成功了就把數(shù)據(jù)寫入數(shù)據(jù)庫

            response.setHeader("Content-Type","applacation/javascript")//設(shè)置返回文件類型為javascript
            response.statusCode = 200;//返回碼為200,說明成功
            response.write(`${query.callbackName}.call(undefined,{
                "success":true,
                "left":${newAmount}
            })`)//把函數(shù)的參數(shù)定為一個對象
        }else{
         
            response.statusCode = 400;//否則返回碼為400,說明失敗
            response.write("fail")
        }
        response.end()
    }

前端:

    window.xxx = function(result){
        if(result.success === true){
            amount.innerText = amount.innerText - 1;
        }
    }

我請求一個script,script調(diào)用一個函數(shù)的同時,把第一個參數(shù)設(shè)置為要返回的數(shù)據(jù),不管這個數(shù)據(jù)是對象還是字符串.然后人們把這種調(diào)用script并返回字符串或者對象的使用方法叫做是jsonp,這就是jsonp!.只是名字比較奇怪,其實真名的名字應(yīng)該是:動態(tài)標(biāo)簽跨域請求!即利用動態(tài)標(biāo)簽進行跨域請求的技術(shù)

這種方法的好處是可以解決跨域的問題.例如剛才的例子,兩個網(wǎng)站如果域名不一樣,那么第一個網(wǎng)址的前臺和另一個網(wǎng)址后臺的服務(wù)器無法進行數(shù)據(jù)交換(由于瀏覽器的同源策略).但是使用script標(biāo)簽就可以避免這個問題.利用script請求,可以請求道第二個網(wǎng)站的json或字符串?dāng)?shù)據(jù),這種方法就叫做jsonp

JSONP(JSON with Padding)是JSON的一種“使用模式”，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。由于同源策略，一般來說位于 server1.example.com 的網(wǎng)頁無法與不是 server1.example.com的服務(wù)器溝通，而 HTML 的

 response.write(`${query.callback}.call(undefined,{
                "success":true,
                "left":${newAmount}
            })`)

1隨機生成的查詢字符串
2返回的根據(jù)隨機生成的函數(shù)名的數(shù)據(jù)

jQuery使用jsonp非常簡單

只要這樣修改前臺的代碼.后臺不用改 url不需要寫callback查詢參數(shù),因為jQuery會自動給你生成

btn.onclick = function () {

        $.ajax({
            url: "http://jack.com:8002/pay",
            jsonp: "callback",
            dataType: "jsonp",
            success: function (response) {
                if (response.success) {
                    amount.innerText = amount.innerText - 1;
                }
            }
        });
        
    }

需要注意的一點是,jsonp不是ajax中的一種.不要背jquery誤導(dǎo)

答:

jsonp是通過動態(tài)創(chuàng)建script實現(xiàn)的

動態(tài)創(chuàng)建script的時候只能用get,沒有辦法用post

JSON 語法

在 JS 語言中，一切都是對象。因此，任何支持的類型都可以通過 JSON 來表示，例如字符串、數(shù)字、對象、數(shù)組等。但是對象和數(shù)組是比較特殊且常用的兩種類型：

對象表示為鍵值對

數(shù)據(jù)由逗號分隔

花括號保存對象

方括號保存數(shù)組

JSON 鍵值對是用來保存 JS 對象的一種方式，和 JS 對象的寫法也大同小異，鍵/值對組合中的鍵名寫在前面并用雙引號 "" 包裹，使用冒號 : 分隔，然后緊接著值：

{"firstName": "Json"}

這很容易理解，等價于這條 JavaScript 語句：

{firstName : "Json"}

很多人搞不清楚 JSON 和 Js 對象的關(guān)系，甚至連誰是誰都不清楚。其實，可以這么理解：
JSON 是 JS 對象的字符串表示法，它使用文本表示一個 JS 對象的信息，本質(zhì)是一個字符串。
如

var obj = {a: "Hello", b: "World"};
//這是一個對象，注意鍵名也是可以使用引號包裹的

var json = "{"a": "Hello", "b": "World"}"; //這是一個 JSON 字符串，本質(zhì)是一個字符串

要實現(xiàn)從對象轉(zhuǎn)換為 JSON 字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: "Hello", b: "World"}); //結(jié)果是 "{"a": "Hello", "b": "World"}"

要實現(xiàn)從 JSON 轉(zhuǎn)換為對象，使用 JSON.parse() 方法：

var obj = JSON.parse("{"a": "Hello", "b": "World"}"); //結(jié)果是 {a: "Hello", b: "World"}