2. 程式人生 > 其它 >js總結

js總結

阿新 • • 發佈：2021-01-04

技術標籤：js

JavaScript學習總結

Js的概述

​ JavaScript簡稱js，是一種直譯式、弱型別的、基於事件驅動的語言。它的直譯器（js引擎）屬於瀏覽器的一部分，因此js是一種廣泛用於客戶端的指令碼語言

強型別與弱型別的區別

  • 強型別語言-java：java中的任何變數在使用前都必須宣告其資料型別，而且變數一旦確定型別就無法更改。
  • 弱型別語言-js：由於沒有編譯的過程，js中的所有變數型別都是在執行期間動態確定的，而且可以隨時修改其資料型別。

java是一門服務端語言（有編譯過程，執行速度更快，支援多執行緒環境），js是一門客戶端語言（無需編譯，單執行緒）

Js的組成

  • EXMAScript核心語法：提供核心語言功能
  • 瀏覽器物件模型(BOM)：提供與瀏覽器互動的方法和介面
  • 文件物件模型(DOM)：提供訪問和操作網頁內容的方法和介面

Js的基礎語法

常見的引入方式

  1. 直接在html頁面中使用內聯的script標籤內編寫
  2. 引入外部指令碼檔案（js檔案）
  3. 直接在html元素中用內嵌的方式使用

標籤中href和src的區別

  • href關聯的資源會與頁面同步載入
  • src關聯的資源是執行時，瀏覽器停止對頁面的渲染，先讀取src關聯的資源，再將資源替換到該位置

Js的資料型別

雖然js是一門弱型別語言，但它也支援很多不同型別的資料，不同型別之間也有不同區別

  • 數值型別（包含浮點）number
  • 字元型別（包含字串和字元）string
  • 布林型 boolean
  • 陣列 object引用型別
  • 物件 object
  • null 同樣屬於object
  • undefined

null和undefined

  • null：表示空物件，即在記憶體申請了空間，但沒有為其賦值
  • undefined：未定義，它表示的是未申請空間的型別，即表示該變數不存在

Js的運算子

  • 算數運算：+、-、 *、 /、 %、++、–

    由於js中沒有單獨劃分浮點型，所以無論是整數還是小數，使用除法時都會獲取到最精確的值

  • 關係運算：>、<、<=、>=、/=、!=/!==

    ==：自動進行型別轉換的比較

    ===：區分型別的比較

  • 邏輯運算：&&、||、!

  • 位運算：<<、<<<、>>、^、&、！

  • 三目運算：布林表示式？結果1：結果2

  • 其他運算子：+(正號)

    string型別前加上+，字串會被強制轉換成數字，如果無法強轉就會輸出NaN（not a number）

Js流程控制

與java相同，分為：

  • 順序語句
  • 分支語句
  • 迴圈語句

分支語句

  1. If/else

    因為js中的任何型別都可以轉換成布林型別，所以if括號內的表示式可以是任意型別的表示式

    其他型別轉換成boolean型別的規律：

    1. 對於number型別，任何非0值都是true
    2. null和undifined都會被轉換成false
    3. 非空物件會被轉成ture
    4. 非空字串(’ ')會被轉成true,‘false’也是true，’'空字串會被轉成false

  2. switch

    js中的switch支援任意型別的比較

迴圈語句

  1. 普通for迴圈(idea快捷表達是fori)

  2. while迴圈

  3. do-while迴圈

  4. forin迴圈

    語法：

    for (var key in object){
			//迴圈體
}

    當object是陣列時，key表示該陣列元素索引

    當object是物件時，key表示物件中的屬性名，通過object[key]獲取該物件屬性名為key的屬性值

Js的函式

​ 由於js是弱型別語言，所以js中的函式與java的方法相比較來說，js函式的引數列表不需要也不能標記引數型別，而且也不需要宣告返回值型別，如果需要返回值，直接在函式體內return即可。

函式定義

​ 與java一樣包含4種類型

function print(msg) {
    console.log(msg)
}

function msg() {
    return new Date();
}

function max(a, b) {
    return a > b ? a : b;
}

function show(){
    console.log("無引數方法")
}
Arguments

arguments用來獲取呼叫函式時的傳參個數(arguments.lenght)，從而可以實現可變引數列表的函式

function add(a,b,c,d,e){
    console.log(c)//如果未傳參,c為undefined,五個引數相加的結果會變成NaN(not a number)
    var len = arguments.length//傳入引數個數
    if(len === 1){
        console.log(a);
    }else if (len ===2){
        console.log(a+b)
    }else if (len ===3){
        console.log(a+b+c)
    }else if (len ===4){
        console.log(a+b+c+d)
    }else if (len >=5){
        console.log(a+b+c+d+e);
    }
}
add();
add(10,20);
add(10,20,30,40,50,60,70,80);

函式呼叫

​ js的函式呼叫不需要像java一樣通過物件呼叫，只需要在script語句塊中直接呼叫即可，或者通過html元素中的相關事件進行呼叫

匿名函式

//將匿名函式變成有名字的函式(把函式儲存到變數中)--->這時已經不是匿名函數了
var add = function (a, b) {
    console.log(a + b);
}
add(1, 2);

//自呼叫函式(不僅針對匿名函式，有名字的函式也可以進行自呼叫)
var value = (function (a, b) {
    let r = a > b ? a : b;
    console.log('匿名函式被執行')
    return r;
})(10, 20);
console.log(value)

閉包

  • 閉包:即在一個函式內部定義的函式
  • 閉包功能:提供了在函式外部對函式內部區域性變數的訪問能力

Js中的變數作用域

i = 20;
(function a(){
    j = 10;
    //以var標識的變數是區域性變數,無法在作用域(方法體)外呼叫
    var n = '方法體中的變數';
})();
console.log(i+','+j);
console.log(n)//Uncaught ReferenceError: n is not defined

//非函式的語句塊無法形成作用域,因此該區域定義的變數,在外部可以被呼叫(變數汙染)
if(i > 10){
    var num = '非函式語句塊中的變數';
    //es6新增,為防止變數汙染而存在的關鍵字,let宣告的變數只能在宣告區域使用
    let m = '非函式語句塊中的區域性變數';
}
console.log(num);
console.log(m);//Uncaught ReferenceError: m is not defined

Js事件

​ js是一門基於事件驅動的語言，大多數時候js的程式碼不是主動執行，而是被html介面中或瀏覽器的某些動作影響導致程式碼執行，而且觸發這些動作的操作被稱為事件

常見的事件主要包含:

  1. 視窗事件
  2. 滑鼠事件
  3. 鍵盤事件
  4. 文件事件
  5. 物件（音訊、視訊等）事件

事件繫結

  1. 直接在html元素中通過事件名繫結（不推薦）

    <標籤 on事件名='function() {}'></標籤>

  2. 在js中獲取元素呼叫元素的事件名

    元素物件.on事件(function() {})

  3. 獲取物件後使用addEcentListener()方法將事件與元素繫結

    元素物件.addEcentListener('事件',function() {})

事件流

事件冒泡&事件捕獲

var d1 = document.getElementById('d1');
var d2 = document.getElementById('d2');
var d3 = document.getElementById('d3');

/*
    當addEventListener的第三個引數全部都設定為true(預設為false)時,事件執行會從冒泡變成捕獲
    事件捕獲:從外到內依次執行事件
    事件冒泡:從內到外依次執行事件
 */

d1.addEventListener('click',function (){
    console.log('外');
},true)
d2.addEventListener('click',function (){
    console.log('中');
},true)
d3.addEventListener('click',function (){
    console.log('內');
},true)

取消事件傳播

只需要呼叫事件物件的stopPropagation()方法即可，無論是事件冒泡還是事件捕獲，只要在事件中呼叫stopPropagation()，它的事件就不會再向外（向內）傳播

d1.addEventListener('click',function (){
    console.log('外');
})
d2.addEventListener('click',function (){
    console.log('中');
})
d3.addEventListener('click',function (e){
    console.log('內');
    //取消事件傳播
    e.stopPropagation();
})

Js面向物件

自定義物件（json/JS物件）

​ js中有一種固定的物件表達形式，即json物件。json物件是一種以鍵值對為標準的物件表達形式(類似java中的Map)；

var user = {
   	id : 1,
  	name : '張三',
  	class : ['java','js','c++'],
  	study : function(){
      //函式體
    }
}

​ 隨著網際網路技技術的發展以及前後端分離技術的出現，根據js的json物件演變出了一種特殊的資料格式json字串，用於實現前端資料傳遞。

{
		"id" :1,
		"name" : '張三'
		"group" :['java','js','c++'],
    "study" : function(){
      //函式體
    } 
}

全域性函式

  • parseInt 將字串轉換成整數型別並返回
  • parseFloat 將字串轉換成浮點數型別並返回
  • eval 將字串轉換成可以執行的程式碼（不建議使用）
  • encodeURI 將目標字串轉碼為URL編碼
  • decodeURI 將url編碼的字串解碼為原始字串值

type of n ：獲取n的資料型別

n istanceof Number：判斷n是否是Number型別

Number

  • 工廠模式創造Number物件 var n = Number()
  • 指定保留小數點位數（四捨五入）：n.toFixed(2)
  • 根據本地資料格式(local:最大保留3位小數),並轉換成String：n.toLocaleString()

String

​ 與java中的String類高度相似，內部包含的方法也基本一致，String物件同Number一樣也擁有兩種創造方式（new、工廠模式）

var s = new String('TestWord');
console.log('字串長度:',s.length);
console.log(s.big());// 相當於在字串外部新增<big>標籤
console.log(s.bold());//加粗：<b>TestWord</b>
console.log(s.link());//新增連結：<a href="undefined">TestWord</a>

//正則驗證
//使用String的match方法會返回正則匹配到的字串
console.log('15807146843'.match(/^1[3578]\d{9}$/));

console.log('ab,cd,ef'.split(','));//使用指定字串分割,返回陣列
console.log('a.txt'.endsWith('.txt'));//是否以指定字串結尾
console.log('     ada    '.trim());//去除前後空格

Array

​ Array是js中的陣列物件，建立(空陣列)方式包含以下：

var a1 = [];
var a2 = new Array();
常用方法
  • 陣列排序 arr.sort([可使用λ表示式或匿名函式設定比較器])
  • 陣列反轉 arr.reverse()
  • 向陣列末尾追加元素 arr.push()
  • 向陣列頭部追加元素 arr.unshift()
  • 返回陣列末尾元素,並移除 arr.pop()
  • 返回陣列頭部元素,並移除 arr.shift()
  • 獲取指定元素索引(如果存在多個相同元素,會返回最小的索引) arr.indexOf()
  • 獲取指定元素索引(如果存在多個相同元素,會返回最大的索引) arr.lastIndexOf()
  • 從指定索引開始(index),刪除指定個數(2)的元素 arr.splice(index,2)
  • join:指定指定的符號把陣列中的每個元素拼接成一個字串 arr.join(",");

Math

​ Math物件類似java的Math類，Math也無法按照普通方法建立物件，所有方法都像靜態方法一樣可以直接呼叫

Date

建立Date物件
  1. Date(毫秒數)
  2. Date(能被Date.parse()識別的字串)
  3. Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]])
常用函式
  • 獲取當前日期(距離1900.1.1)的時間：var date = Date.now();
  • 獲取年：date.getFullYear();
  • 獲取月(-1)：date.getMonth()
  • 獲取日期在月中的天數：date.getDate()
  • 獲取時：date.getHours()
  • 獲取分鐘：date.getMinutes()
  • 獲取秒：date.getSeconds()

RegExp

//構造器建立(需要注意轉移符號)
//方法一
var regex = new RegExp('\\d{3,5}');
//方法二:工廠方法
regex = /\d{3,5}/;//該構造方法與上面效果相同

//判斷給定的字串是否匹配正則表示式
console.log(regex.test('12345'))
//拿到匹配到的資料(陣列)
console.log(regex.exec('da12312321dsdzw12')[0]);
var phone = 'czxe312dxfgaw313797773410123dq1582698130012312';

regex = /1[3578]\d{9}/g;//g表示全域性匹配
var arr ;
//使用while迴圈可以取到多個符合要求的字串
while ((arr = regex.exec(phone))!== null){
    console.log(arr[0]);
}

console.log(/world/i.test('HelloWorld'))//i表示忽略大小寫匹配

Dom與Bom

Dom（文件物件模型）

​ js支援DOM程式設計，DOM即Document Object Model,可以通過js的dom操作對html整個文件樹中的任意節點進行訪問（增刪改查），倒置的文件樹如下：

名詞解釋：

  1. 元素（element）：html任意一個標籤開始IDAO結束，之間的內容（包括標籤本身）都稱之為元素，一個元素也被稱為一個節點
  2. 屬性（Attribute）:屬性是開始標籤中的屬性名和屬性值構成的一個鍵值對結構

Dom的獲取

  1. 獲取所有的元素(陣列)

    let alls = document.all;
console.log(alls);

  2. 通過標籤名獲取元素(陣列)

    let titles = document.getElementsByTagName('h1');
    console.log(titles);

  3. 根據class獲取元素(陣列)，存在相容問題(IE不支援)，謹慎使用

    let rows = document.getElementsByClassName('row');
    console.log(rows);

  4. 根據元素的name屬性獲取元素集合（一般只有表單元素才有name屬性）

    let arr = document.getElementsByName('lang');//取到所有name為lang的元素

  5. 根據元素id獲取元素（唯一）

    let selectAll = document.getElementById('selectAll');

以上是比較常規的獲取dom的方式，同時js也提供了可以通過css選擇器獲取匹配元素的方式

  1. document.querySelector：獲取指定選擇器選中的單個元素

    let h2 = document.querySelector('h2');

  2. document.querySelectorAll：獲取指定選擇器選中的多個元素

    //查詢選擇器:根據css的選擇器獲取指定選擇器選中的多個元素
let nodeListOf = document.querySelectorAll('td');
console.log(nodeListOf);
//獲取所有的class='row',h1,h2元素
let listOf = document.querySelectorAll('.row,h1,h2');
console.log(listOf);

插入Dom

​ js的document向指定節點插入元素的方法主要包含：

  1. 節點.appendChild(dom物件) /節點.append(dom物件)

    appendChild向指定節點中插入子元素（子元素是一個dom物件，可以通過createElement(‘標籤名’)建立）

    append與appendChild的不同之處在與，前者無返回值，後者會同時返回插入節點

  2. 節點.insertBefore(newNode , redNode）

    向當前節點的子節點redNode之前加入newNode

  3. innerHTML/innerText

    直接插入整段html程式碼，多行程式碼用es6的新特性書寫

更新Dom

  • innerText：將文字內容插入到指定節點
  • innerHTML：將html程式碼插入到指定節點

刪除Dom

  • removeChild(childNode)：刪除當前節點下指定的子節點
  • remove()：刪除當前節點物件

DOM補充

  • children: dom元素通過該屬性可以獲取當前節點下的所有的子節點（集合）
  • parentNode：dom元素通過該屬性可以獲取當前節點的父節點(唯一)

Bom（瀏覽器物件模型）

​ Bom全稱Brower Object Model，js中所有關於瀏覽器操作的頂層元素都是來自window物件，window物件對外界提供了一個用於操作瀏覽器的訪問結構，通過bom可以獲取window相關資訊，比如螢幕尺寸、瀏覽器的詳細版本（版本、核心、配置等），頁面跳轉、歷史記錄、定位、本地儲存，對移動裝置來說還可以獲取與本機硬體裝置互動的介面（位置資訊、藍芽、攝像頭、陀螺儀等等）

window

​ window物件是BOM的頂層物件，一般來說全域性的this指的都是window物件，雖然一般情況下呼叫dom時是直接呼叫，並沒有寫它的父元素bom，但document物件也是屬於window物件的

window的常見屬性

  • innerWidth 瀏覽器可視區域寬度
  • innerHeight 瀏覽器可視區域高度
  • outerWidth 瀏覽器視窗寬度
  • outerHeight 瀏覽器視窗高度
基於window物件的彈窗函式
  • alter()：警告框
  • confirm()：確認框
  • prompt()：訊息輸入框，輸入訊息後該彈窗會返回一個儲存了輸入內容的變數
  • open()：自定義視窗

使用layUI的獨立彈窗外掛可以更輕鬆的實現好看的彈窗效果，詳情檢視官網或本地外掛包中的文件，在使用前需要匯入：

  • jq包
  • layer.js包
//警告框
document.getElementById('win1').addEventListener('click',function () {
    // window.alert('這是一個警告彈窗')
    layer.alert("這是一個警告彈窗");
});
基於window的定時器

  • setTimeout()：定時任務，延遲指定時間，執行一次回撥函式（一次執行）

    //setTimeout() 延時3000ms執行任務(定時任務,僅執行一次),會返回該動畫序號(從1開始)
let flag = window.setTimeout(function () {
    console.log('hello',flag);
    //清除定時任務
    window.clearInterval(flag);
},3000);

  • setInterval()：定時任務，每隔指定時間執行一次回撥函式（反覆執行）

    使用案例：實時電子時鐘、幀動畫等…

navigator

​ 用於獲取瀏覽器的資訊，但navigator容易被使用者篡改，所以js獲取到的navigator也不是一定是真實的瀏覽器資訊

  • navigator.appName：瀏覽器名稱；
  • navigator.appVersion：瀏覽器版本；
  • navigator.language：瀏覽器設定的語言；
  • navigator.platform：作業系統型別；
  • navigator.userAgent：瀏覽器設定的User-Agent字串。

screem

  • screen.width：螢幕寬度，以畫素為單位
  • screen.height：螢幕高度
  • screen.availHeight：可用高度
  • screen.availWidth：可用寬度
  • screen.colorDepth：色深，返回顏色位數，如8、16、24

location

常用的location跳轉方式

<button onclick="location.href = 'http://www.baidu.com'">location頁面跳轉方式</button>
<button onclick="location.reload()">頁面重新整理</button>
<!--頁面替換後不同於跳轉,它會完全替換當前頁面地址,沒有後退選項-->
<button onclick="location.replace('http://www.bootcss.com')">頁面替換</button>

location物件的屬性

var local = location.href;
console.log('當前頁面連結',local);
console.log('獲取連線協議',location.protocol)
console.log('請求資源',location.pathname)
console.log('查詢地址',location.search)
console.log('hash',location.hash)

完整URL的組成

  1. 協議(http://|https://)
  2. 主機地址(域名/ip):計算機在網路中的位置
  3. 埠號(0~65535(2個位元組)):該計算機中網路應用程式的對外訪問埠(門牌號)
  4. 請求資源
  5. 查詢路徑: 指提交到後臺的資料 ?useranme=admin&pwd=789guyti78…
  6. hash值(可能沒有)

history

​ history物件儲存了瀏覽器的歷史記錄，JavaScript可以呼叫history物件的back()或forward ()，相當於使用者點選了瀏覽器的“後退”或“前進”按鈕。這個物件屬於歷史遺留物件，對於現代Web頁面來說，由於大量使用AJAX和頁面互動，簡單粗暴地呼叫history.back()`可能會讓使用者體驗不好。

​ 新手開始設計Web頁面時喜歡在登入頁登入成功時呼叫history.back()，試圖回到登入前的頁面。這是一種錯誤的方法。

localStorage&sessionStorage

​ h5新增了2個前端儲存機制

  1. localStorage
  2. sessionStorage

​ 其中本地儲存（localStorage）可以將資料(服務/客戶端資料)快取到本地瀏覽器中，可以在不通過後臺的方式把一個頁面的資料帶到另一個頁面中，無論頁面如何重新整理，甚至電腦重啟都不會影響指定資料的儲存。

​ sessionStorage中儲存的資料在一次會話中可以一直存在，一旦瀏覽器關閉或者session有效期(一般是20min)到達之後會自動清理。

​ 兩種儲存機制的操作API都是一致的，快取中儲存的資料都是以鍵值對結構存在的。

在瀏覽器中的儲存位置

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-hVoZY8XE-1609677291464)(file:///Users/zhangping/Library/Application Support/typora-user-images/image-20201228140813957.png?lastModify=1609660861)]

常用函式
  • setItem(key,value)：向快取物件中新增一個元素，鍵和值都是string型別
  • getItem(key)：根據鍵從快取物件中取出一個元素
  • remove(key)：根據鍵從快取物件中刪除一個元素
  • clear()：清空快取物件中的所有元素
localStorage和sessionStorage之間的區別

​ 儲存位置和時長

localStorage和sessionStorage的應用場景

  • localStorage適合於網站首頁資料的快取，比如購物網站、入口網站等安全性不高的資料
  • sessionStorage適合於臨時儲存一次會話的資訊，比如使用者的登入密碼等（安全性要求較高）

Json資料格式詳解

​ 通過對localStorage和sessionStorage儲存機制的瞭解，html5中的這兩種儲存機制都只能儲存字串資料，無法儲存物件等複雜資料，但是真實專案中的快取往往會是複雜資料(物件、集合等)，此時可以考慮使用一種特殊的資料交換格式：JSON

JSON字串概述

​ JSON(JavaScript Object Notation)字串：是源於JavaScript物件改編而來的字串形式的物件、陣列表達形式，但作為一種資料表達格式，json字串基本上可以被所有型別的語言識別，因此常常會把json字串作為資料傳輸的媒介,JSON（重量級：XML）是一種輕量級的資料交換格式，廣泛應用於各種語言之間的資料交換，目前各大服務端語言也都提供了相當豐富的用於解析和轉換json字串的工具。

​ json只表示數值本身，無法表示函式

JSON資料格式的分類

  1. 標量（一個值）

  2. 序列（陣列）

    ['admin','json']
↓
[
	{
		"id":1,
		"name":"admin",
		"age":18
	},{
		"id":1,
		"name":"json",
		"age":18
	}
]

  3. 對映(物件)

    {
		"id":1,
		"name":admin,
		"age":18,
		"group":{
				"gid": 1001,
				"gname":"vip1"
		}
}

JS中JSON序列化與反序列化

  • JSON序列化：JSON.stringify(指定物件)，返回一個json字串
  • JSON反序列化：JSON.parse(指定json字串)，返回一個js物件
json = `[
    {
        "id":1,
        "name":"admin",
        "age":18,
        "group":{
            "gid": 1001,
            "gname":"vip1"
        }
    },
    {
        "id":2,
        "name":"json,
        "age":35,
        "group":{
            "gid": 1005,
            "gname":"vip5"
        }
    }
]`;
//json字串反序列化(解析成js物件)
json = JSON.parse(json);
//取到指定資料
console.log(json[0].group.gname);//vip1
//js物件序列化(格式化成成json字串)
console.log(JSON.stringify(json))

Ajax基礎

​ Ajax全稱Asynchronous JavaScript and XML（非同步的js和XML，由於時代的發展，ajax和xml的關係已經不大了，稱作aj或許更合適）。

之前所有的頁面跳轉都是全域性的頁面刷新技術，比如:

  • a 超連結
  • form 表單提交
  • location.href js跳轉

​ 上述程式碼的執行都會導致整個頁面重新整理，受到服務端或客戶端網路頻寬的影響，可能會導致頁面資料顯示緩慢，影響使用者體驗。但實際專案中的許多資料更新是不需要進行全域性重新整理的，比如使用者註冊時檢測該賬號是否可用、或頁面資料展示時部分資料的更改更新。區域性刷新技術Ajax的出現解決了這一問題。

Ajax並不算新技術，它基於js的一項能夠與服務端互動的物件(XMLHttpRequast)實現

Ajax的優勢（非同步）

  • 改善表單驗證方式，驗證時不需要提交整個表單，也不需要開啟新頁面
  • 頁面可以按需獲取資料，以減少大量資料的請求
  • 客戶端請求資料無需重新整理整個頁面，減少使用者的等待時間，提高使用者的體驗

Ajax使用步驟

一個標準的ajax請求分為以下幾個步驟：

  1. 獲取XMLHttpRequest物件

    ie使用new ActiveXObject()建立物件

  2. 開啟一個到服務端的連線

  3. 傳送連線

  4. 當請求狀態改變時，需要接受來自服務端的響應資料

    請求狀態readStateimage-20201228160311132

http協議

分為請求頭(Request Head)和響應頭（Respond Head）

  • 請求頭中包含的重要部分為-請求方式

    GET | POST

  • 響應頭中包含的重要狀態為-響應狀態碼：

    • 200：ok響應成功
    • 404：not found請求資源不存在
    • 500：internal error內部伺服器錯誤

案例

Ajax傳送GET資料

  • get(html中表單methond屬性值為get(預設))
  • 1.1獲取與伺服器的連線物件
    let xmlHttpRequest = new XMLHttpRequest();
  • 1.2獲取表單資料
    let form = document.getElementById(‘login-form’);
    // let m = form.method.value;//隱藏域一般來說是固定的,所以下方的url可以寫死,不用通過變數獲取
    let uname = form.uname.value;
    let pwd = form.pwd.value;
  • 1.3拼接url請求地址（將獲取到的表單資料拼接到地址中）
  • 2.開啟一個連線
    xmlHttpRequest.open(‘GET’,url)
  • 3.傳送請求
    xmlHttpRequest.send(null)//因為要傳送的資料已經寫在位址列裡了,所以傳送的資料依舊是null
    //2.開啟一個連線
    xmlHttpRequest.open('GET',url)
    //3.傳送請求
    xmlHttpRequest.send(null)//因為要傳送的資料已經寫在位址列裡了,所以傳送的資料依舊是null
    xmlHttpRequest.onreadystatechange = function () {
        if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 200){
            //4.獲取服務端傳送過來的資料
            let responseText = xmlHttpRequest.responseText;
            // alert(responseText);
            let data = JSON.parse(responseText);
            //code屬性: 登入失敗,code為0-false      登入成功,code!=0
            if (data.code){
                //code不為0,跳轉
                location.href = 'main.html';
            }else {
                //code為0,顯示data的錯誤資訊屬性
                alert(data.msg);
            }
        }
    }

Ajax傳送POST資料

  • html中表單methond屬性值為get(預設)
  • enctype編碼格式屬性為"application/x-www-form-urlencoded"
document.getElementById('login-btn').addEventListener('click',function () {
    //1.1獲取與伺服器的連線物件
    //1.2獲取表單資料
    //1.3設定url地址
    //2.開啟一個連線
    xmlHttpRequest.open('POST',url)
    //3.傳送請求
    //3.1post請求必備:設定請求頭
    xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    //3.2選用post方式傳送,需要帶上需要傳送的資料
   xmlHttpRequest.send(`method=login&sno=${uname}&password=${pwd}`)
    xmlHttpRequest.onreadystatechange = function () {
        if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 200){
            //4.獲取服務端傳送過來的資料
            let responseText = xmlHttpRequest.responseText;
            // alert(responseText);
            let data = JSON.parse(responseText);
            //code屬性: 登入失敗,code為0-false      登入成功,code!=0
            if (data.code){
                //code不為0,跳轉
                location.href = 'main.html';
            }else {
                //code為0,顯示data的錯誤資訊屬性
                alert(data.msg);
            }
        }
    }
})

GET請求和POST請求的區別

get和post都是客戶端向服務端傳送請求的方式

  • GET：一般用於獲取服務端資料，並且可以向服務端提交少量資料(不超過1kb)，而且提交的資料會通過查詢路徑被直接拼接在位址列中
  • POST：一般用於向服務端提交資料，提交的資料會經過封裝不會直接在位址列中顯示，所以提交的資料沒有大小限制

相關推薦

js 總結

技術標籤：JavaScriptjs個人總結 目錄 1.前端節流 2.前端防抖 1.前端節流 常用場景：

js總結

技術標籤：js JavaScript學習總結 Js的概述 ​ JavaScript簡稱js，是一種直譯式、弱型別的、基於事件驅動的語言。它的直譯器（js引擎）屬於瀏覽器的一部分，因此js是一種廣泛用於客戶端的指令碼語言

最後億遍js總結

原型原型鏈 參照 js原型與原型鏈解析 繼承 參照 js的幾種繼承方式 call，apply，bind用法及實現

題庫js總結

JavaScript由三部分組成： 1、ECMAScript由ECMA-262定義，提供核心語言功能。 2、DOM文件物件模型提供訪問和操作網頁內容的方法和介面。

原生JS總結

getBoundingClientRect()用於獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置。

js原生map實現的方法總結

js原生方法map實現 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

關於引入vue.js 檔案的知識點總結

一、引入vue.js 檔案 1. 用指令碼標籤<script> 引入外部vue.js 檔案 <script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>

壓縮Vue.js打包後的體積方法總結(Vue.js打包後體積過大問題)

問題 由於這次專案是在初學 Vue 之後的第一個正式專案，沒有考慮到類似 路由懶載入、 按需載入的問題 ，所以呢，也算是沒經驗。

不重新整理網頁就能連結新的js檔案方法總結

如何不重新整理網頁就能連結新的js檔案，其實在HTML語言中已經有相關的函數了，就是再新增一個<script src=.....></script>。

JS Html轉義和反轉義（html編碼和解碼）的實現與使用方法總結

本文例項講述了JS Html轉義和反轉義（html編碼和解碼）的實現與使用方法。分享給大家供大家參考，具體如下：

js實現操作cookie的常見方法總結【建立、讀取、刪除】

本文例項講述了js實現操作cookie的常見方法。分享給大家供大家參考，具體如下：

JS apply用法總結和使用場景例項分析

本文例項講述了JS apply用法總結和使用場景。分享給大家供大家參考，具體如下：

sharp.js安裝過程中遇到的問題總結

由於Sharp基於C++的libvips庫來實現，本地Mac開發完後在部署時安裝sharp模組時會基於測試環境Liunx平臺編譯安裝，測試環境安裝時發現請求github下載libvips-8.9.1-linux-x64.tar.gz，所以只能失敗告終。後來看原始碼

JS Generator 函式的含義與用法例項總結

本文例項講述了JS Generator 函式的含義與用法。分享給大家供大家參考，具體如下：

JS co 函式庫的含義和用法例項總結

本文例項講述了JS co 函式庫的含義和用法。分享給大家供大家參考，具體如下：

JS Thunk 函式的含義和用法例項總結

本文例項講述了JS Thunk 函式的含義和用法。分享給大家供大家參考，具體如下：

JS async 函式的含義和用法例項總結

本文例項講述了JS async 函式的含義和用法。分享給大家供大家參考，具體如下：

JS中的繼承操作例項總結

本文例項講述了JS中的繼承操作。分享給大家供大家參考，具體如下： 1.原型鏈繼承

JS高階——函式總結

原型與原型鏈 所有函式都有一個特別的屬性: prototype : 顯式原型屬性 所有例項物件都有一個特別的屬性:

JS高階——資料型別總結

------------恢復內容開始------------ 資料型別的分類和判斷 基本(值)型別 Number ----- 任意數值 -------- typeof