Node.js AJAX JS DOM前后臺互動 詳細步驟手把手（圖解）

前后臺互動步驟

一、搭建后臺

1.創建專案目錄basepro

2.創建專案目錄中的靜態檔案夾public

3.安裝依賴

首先這樣做會生成一個package.json的組態檔，并在里面增加相應的版本資訊，以后運行程式時，安裝依賴包可以直接 npm install xxx

其次，安裝npm install express時專案目錄會創建node_modules目錄，并在該目錄下多了所有依賴的包，

4. 創建app.js作為專案的入口檔案，用于創建應用程式物件

- 引入express

- 創建WEB服務器

- 監聽8080埠

- 托管靜態資源./public檔案

- 創建get方式請求的路由，并查看引數和給予回傳值

- 決議表單中的 url-encoded 格式的資料

- 創建post方式請求的路由，并查看引數和給予回傳值

- 創建put方式請求的路由，并查看引數和給予回傳值

- 創建delet方式請求的路由，并查看引數和給予回傳值

5. 運行 app.js

//在當前目錄下的終端中輸入npm install express 安裝
//1.引入express
var express = require('express');
//2.創建web服務器，實體化
var app = express();
//3.設定埠
app.listen(8080);
/* 4.靜態資源托管express.static()將靜態資源的
目錄放入到引數中，不是必須只有這一個檔案目錄可以托管,
也不是只有這一個檔案目錄可以 */
app.use(express.static('./public'));
//5.在終端啟動服務器node app.js
//6.給前臺一個介面地址,因為前臺發請求用的get，后臺互動資料，也用的get
//地址路徑（字串格式）
//接收前臺？方式傳遞的引數
app.get('/getpar1',(req,res)=>{
    console.log(req.query)
})

//接收post方法的介面地址
//接收之前，需要單獨決議通過urlencoded傳遞的格式
app.use(express.urlencoded({extended:false}))
app.post('/ajaxpost',(req,res)=>{
    console.log(req.body)
    res.send('post方式回傳值')
})

//接收put方法的介面地址
app.put('/ajaxput',(req,res)=>{
    console.log(req.body);
    res.send('put方式回傳值');
})

//接收delete方法的介面地址
app.delete('/ajaxdel/:names',(req,res)=>{
    console.log(req.params);
    res.send('delete方法回傳值')
})

二、瀏覽器請求

1.get方式

<script>
    //1.創建xhr物件
var xhr = new XMLHttpRequest();
//4.原本接收資料，現在通過監聽判斷readyState的值，為4的時候收據就回來了
xhr.onreadystatechange = function () {
    //console.log(xhr.readyState)
    //判斷readyState是4的時候才可以拿到后臺的資料
    if (xhr.readyState == 4) {
        //判斷回傳內容成功，再接收資料
        if (xhr.status >= 200 && xhr.status < 300) {
            var result = xhr.responseText;
            console.log(result);
        }
    }
}
// 2.設定請求資訊
xhr.open('get','/getpar1?names=張三 & pwd=123456',true);
//3.發送請求（不同方法，發送請求的格式有不同）
//get方法直接是xhr.send（）引數可省略，也可以xhr.send(null)
xhr.send();
</script>

2.post方式

//1.創建異步物件 
var xhr =new XMLHttpRequest();
//4.監聽并回傳值
xhr.onreadystatechange=function(){
    //判斷readyState==4
    if(xhr.readyState ==4){
        //判斷狀態碼
        if(xhr.status>=200 && xhr.status<300){
            //接識訓傳內容
            var result=xhr.responseText;
            console.log(result);
        }
    }
}
//2.設定請求資訊
xhr.open('post','/ajaxpost',true);
//post方式發送之前必須指定傳遞引數的資料格式
//設定請求頭，先指定請求引數的決議方式再傳遞資料
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//3.發送請求
xhr.send('names=bob & pwd=333');
 // 瀏覽器訪問 http://localhost:8080/post.html

3.put方式

var a='tom';
var b='lili';
//1.創建異步物件
var xhr=new XMLHttpRequest();
//4.監聽等待回傳值
xhr.onreadystatechange=function(){
    //判斷
    if(xhr.readyState==4){
        if(xhr.status>=200 && xhr.status<300){
            //接識訓傳內容
            var result=xhr.responseText;
            console.log(result);
        }
    }
}
//2.設定請求資訊
xhr.open('put','/ajaxput',true);
//請求頭
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//3.發送請求
xhr.send(`names=${b} & oldname=${a}`);

4.delete方式

var username='王五';
//1.創建異步物件
var xhr=new XMLHttpRequest();
//4.監聽并回傳值
xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
        if(xhr.status>=200 & xhr.status<300){
            var result=xhr.responseText;
            console.log(result);
        }
    }
}
//2.設定請求資訊
xhr.open('delete',`/ajaxdel/${username}`,true);
//3.發送請求
xhr.send();

4.避免 icon的錯誤

<link rel="shortcut icon" href="#" />

三、DOM

1.DOM 的簡述

DOM 全稱 Document Object Model，即檔案物件模型，它允許腳本(js)控制 Web 頁面、視窗和檔案，

簡單說就是用js去動態操作瀏覽器視窗內的所有元素，

2. DOM 基本功能

- 查詢某個元素

- 查詢某個元素的祖先、兄弟以及后代元素

- 獲取、修改元素的屬性

- 獲取、修改元素的內容

- 創建、插入和洗掉元素

簡單說就是對頁面元素的增刪改查，

二、元素的操作（應用部分）

1.通過元素id獲取到該元素

`document.getElementById()`在檔案中按照 id 屬性查找元素引數寫 id 名，

```js

//獲取到html元素中id叫做myDiv的元素整體

var myDiv = document.getElementById('myDiv');

在能夠支持ES6的瀏覽器中，可以簡寫方式獲取元素物件，直接用id值代指當前元素物件，

2.事件——與元素互動

可以在 DOM 元素上系結`onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeyup`等，JavaScript 能夠在事件發生時執行，

（1）在 DOM 中直接系結事件

直接在標簽中設定事件屬性，系結方法，從而完成互動，

html：

<input type="button" value="點我" onclick="hello(1)" />
<script>
    function hello(a) {
        alert('hello world!');
    }
</script>

（2）在 JavaScript 代碼中系結事件

可以通過 js 獲取元素，在 js 中系結獲取的元素相關的事件，呼叫函式處理事件功能，

js：

var btn = document.getElementById('mybtn');
btn.onclick = function () {
    alert('hello');
};

3. 獲取/設定元素的內容innerHTML

Element.innerHTML 獲取/設定元素的內容，

innerHTML 在 JS 是雙向功能：獲取物件的內容或向物件插入內容，

html：

<div id="myDiv">div元素</div>
<script>
    var myDiv = document.getElementById('myDiv');
    myDiv.innerHTML = '<p>一個元素</p>';
</script>

- 可以通過`document.getElementById("myDiv").innerHTML`來獲取`id`為`myDiv`的物件的內嵌內容；

-也可以對某物件插入內容，如`document.getElementById("myDiv").innerHTML=’這是被插入的內容’;`這樣就能向 id 為 myDiv 的物件插入內容，

4. value值的獲取

元素的 value 屬性可以直接獲取到具有 value 屬性元素的的值，多數情況用在獲取表單相關元素中，

html：

<input type="text" id="nn" />
<input type="button" value="獲取" οnclick="print()" />
<script>
    var a = document.getElementById('nn');
    //通過事件獲取值
    function print() {alert(a.value);}
</script>

練習：細解

> 在頁面上放入一個文本輸入框、一個密碼輸入框、一個按鈕

> 使用 js 獲取兩個輸入框元素和一個按鈕元素

> 點擊按鈕元素觸發點擊事件，獲得文本輸入框和密碼輸入框的內容，并在控制臺查看

> 創建兩個 p 標簽，使用 js 獲取兩個 p 元素

> 將獲取的用戶輸入的用戶名和密碼顯示頁面上

01_get.html代碼：

<body>
    用戶：<input type="text" id="uname"><br>
    密碼：<input type="text" id="upwd"><br>
    <button onclick="ajax()">登錄</button>
    <script>
        ajax();
        function ajax() {
            //1.創建xhr物件
            var xhr = new XMLHttpRequest();
            //4.原本接收資料，現在通過監聽判斷readyState的值，為4的時候收據就回來了
            xhr.onreadystatechange = function () {
                //console.log(xhr.readyState)
                //判斷readyState是4的時候才可以拿到后臺的資料
                if (xhr.readyState == 4) {
                    //判斷回傳內容成功，再接收資料
                    if (xhr.status >= 200 && xhr.status < 300) {
                        var result = xhr.responseText;
                        console.log(result);
                    }
                }
            }
            var myname=uname.value;
            var mypwd=upwd.value;
            // 2.設定請求資訊
            xhr.open('get','/getpar1?names='+myname+'&pwd='+mypwd,true);
            //3.發送請求（不同方法，發送請求的格式有不同）
            //get方法直接是xhr.send（）引數可省略，也可以xhr.send(null)
            xhr.send();
        }
    </script>
</body>

app.js代碼：

//在當前目錄下的終端中輸入npm install express 安裝
//1.引入express
var express = require('express');
//2.創建web服務器，實體化
var app = express();
//3.設定埠
app.listen(8080);
/* 4.靜態資源托管express.static()將靜態資源的
目錄放入到引數中，不是必須只有這一個檔案目錄可以托管,
也不是只有這一個檔案目錄可以 */
app.use(express.static('./public'));
//5.在終端啟動服務器node app.js
//接收前臺？方式傳遞的引數
app.get('/getpar1',(req,res)=>{
    console.log(req.query)
})

瀏覽器輸入127.0.0.1:8080/01_get.html 回車，輸入用戶密碼資訊，點擊登錄

后臺獲得資料：

5. 清空多余空格-trim()方法

- `trim()`方法用于洗掉字串的"頭尾"空白符，空白符包括：空格、制表符 tab、換行符等其他空白符等，

- `trim()`方法不會改變原始字串，

- `trim()`方法不適用于 null, undefined, Number 型別，

var str = '  hello   ';
alert(str.trim());

非空驗證的方法

var str1 = '   ';
var str2 = ''
var str3 = ' tom ';
function notEmpty(s){
    var nstr = s.trim();
    return nstr.length;
}
notEmpty(str1)
notEmpty(str2)
notEmpty(str3)