一贡珊、異步請求
（1） 什么是網(wǎng)絡(luò)
是多臺互聯(lián)的計算機組成的對象數(shù)據(jù)通信結(jié)構(gòu)
物理層面將網(wǎng)絡(luò)區(qū)分為幾種網(wǎng)絡(luò)結(jié)構(gòu)：

• 局域網(wǎng)：工作在一個局部范圍的多臺計算機，一般計算機數(shù)量不會特別多涉馁；大部分情況下都是幾十臺計算機
• 城域網(wǎng)：廣義上指代工作在一個城市的計算機網(wǎng)絡(luò)體系
• 廣域網(wǎng)：廣義上指代的全球互聯(lián)網(wǎng)絡(luò)
  （2） 網(wǎng)絡(luò)數(shù)據(jù)共享
  計算機和計算機之間门岔，實現(xiàn)網(wǎng)絡(luò)互聯(lián)之后，可以通過網(wǎng)絡(luò)完成數(shù)據(jù)通信烤送，需要滿足如下的條件：
• 實現(xiàn)互聯(lián)
• 約定數(shù)據(jù)通信格式
  • 網(wǎng)絡(luò)協(xié)議：約定傳輸?shù)氖鞘裁磾?shù)據(jù)寒随，什么數(shù)據(jù)格式
  • ip地址：約定傳輸?shù)侥桥_計算機
  • 網(wǎng)絡(luò)端口：約定傳輸給那個程序
  • 網(wǎng)絡(luò)路徑：訪問對應(yīng)的資源和數(shù)據(jù)
    （3） 網(wǎng)絡(luò)傳輸協(xié)議
    主要描述了工作在網(wǎng)絡(luò)中的計算機，進行數(shù)據(jù)傳輸?shù)募s定/格式帮坚；主要包含了協(xié)議本身已經(jīng)協(xié)議中要求的數(shù)據(jù)的格式妻往！
    ① 常見的網(wǎng)絡(luò)傳輸協(xié)議

② OSI/RM網(wǎng)絡(luò)互聯(lián)模型
在 OSI/RM 模型的基礎(chǔ)上剩岳，網(wǎng)絡(luò)軟件開發(fā)中衍生出了 TCP四層模型

image.png

（5） 關(guān)于IP地址
描述了 網(wǎng)絡(luò)協(xié)議地址拍棕；就是在網(wǎng)絡(luò)上的給每個計算機分配唯一一個地址來標識當前計算機！
主流的IP地址勺良，主要有兩種格式：

• IPv4：以四段绰播、8位二進制數(shù)據(jù)標識的地址：
  • 二進制：00000000.00000000.00000000.00000000~11111111.11111111.11111111.11111111
  • 十進制：0.0.0.0 ~ 255.255.255.255
  • 目前市場主流的IP地址
• IPv6：以十六進制的方式描述計算機的地址
  • 本地鏈接 IPv6 地址. . . . . . . . : fe80::b097:32a3:1921:95c4%14
IPv4不同的地址段，描述的主體不同：
• A類地址：1.0.0.0~126.0.0.0尚困，可以用來描述1億多個主機地址
  • 首位地址：1~126蠢箩，都是A類網(wǎng)絡(luò)地址
  • 局域網(wǎng)：10.10.x.x，是A類網(wǎng)絡(luò)的局域網(wǎng)地址
• B類地址：128.0.0.0~191.255.255.255尾组，可以用于容納16382 * 6W左右主機
  • 首位地址：128~191忙芒，都是B類地址
• C類地址：192.0.0.0~223.255.255.255可以用于容納209W * 254左右主機
  • 首位地址：192~233
  • 局域網(wǎng)：192.168.x.x，是C類網(wǎng)絡(luò)的局域網(wǎng)地址
• D/E類地址：保留地址讳侨，主要用于實驗室做實驗使用呵萨、特定機構(gòu)使用
  二、Ajax技術(shù)
  （1） 什么是Ajax
  描述了一種通過JavaScript技術(shù)完成異步XML格式數(shù)據(jù)交互的技術(shù)跨跨，主要通過JavaScript XMLHttpRueset異步對象完成XML格式文件的處理潮峦；早期的Ajax就是異步交互XML格式的數(shù)據(jù)的，后來通過JSON格式的數(shù)據(jù)替代了XML格式勇婴；但是Ajax名稱依然沿用忱嘹！

Ajax中的各項技術(shù)：

• XMLHttpRequest：JavaScript異步對象
• json數(shù)據(jù)：json字符串和json對象之間進行切換stringify() / parse()
• DOM渲染：接口返回的數(shù)據(jù)，我們需要在HTML網(wǎng)頁中渲染展示
  （2） 基本語法
  Ajax作為一個異步請求耕渴，包含了5個步驟：準備(創(chuàng)建對象)拘悦、連接服務(wù)器、發(fā)送請求橱脸、處理請求础米、處理響應(yīng)
• 0準備：創(chuàng)建異步對象分苇，前端操作
• 1連接服務(wù)器：打開和指定接口地址的連接、前端操作
• 2發(fā)送請求：通過異步對象發(fā)送請求和需要的參數(shù)數(shù)據(jù)屁桑，前端操作
• 3處理請求：后端操作
• 4處理響應(yīng)：獲取到接口返回的數(shù)據(jù)医寿，DOM操作在頁面中渲染數(shù)據(jù)，前端操作

// 1蘑斧、準備
var http = new XMLHttpRequest()
// 2靖秩、連接服務(wù)器
http.open('GET', 'https://www.example.com')
// 3、發(fā)送請求竖瘾、參數(shù)
http.send("city=鄭州")
// 4沟突、處理響應(yīng)數(shù)據(jù)
http.onreadystatechange = function() {
  // 保障當前是最后一個階段，并且接口正確返回了數(shù)據(jù)
  // readState : 0 / 1 / 2 / 3 / 4(接口返回數(shù)據(jù))
  // status: 服務(wù)狀態(tài)碼准浴，2xx開頭表示正確事扭；3xx開頭表示重定向；4xx開頭表示請求錯誤乐横；5xx開頭表示服務(wù)器內(nèi)部操作
  if(http.readyState===4 && http.status === 200) {
    // 獲取服務(wù)器返回的數(shù)據(jù)
    var txt = http.responseText // 固定語法，獲取返回的文本數(shù)據(jù)
    // DOM操作處理數(shù)據(jù)
    // ...
  }
}

（3） 常見請求方式
HTTP1.1規(guī)范中今野，將瀏覽器客戶端跟服務(wù)器之間的請求葡公，區(qū)分8種請求方式：

• GET：發(fā)送請求，一般向服務(wù)器請求獲取數(shù)據(jù)条霜，參數(shù)拼接在url地址中出現(xiàn)【熟練】
• POST：發(fā)送請求催什，一般向服務(wù)器請求新增數(shù)據(jù)，參數(shù)一般包含在請求體中【熟練】
• PUT：發(fā)送請求宰睡，一般向服務(wù)器請求更新數(shù)據(jù)蒲凶，參數(shù)一般包含在請求體中【熟悉】
• DELETE：發(fā)送請求，一般向服務(wù)器請求刪除數(shù)據(jù)拆内，參數(shù)拼接在url地址中出現(xiàn)【熟悉】
• HEAD：發(fā)送請求旋圆，一般向服務(wù)器請求響應(yīng)頭數(shù)據(jù)，經(jīng)常用來測試響應(yīng)數(shù)據(jù)格式【了解】
• TRACE：發(fā)送請求麸恍，一般給服務(wù)器發(fā)送心跳請求灵巧，測試服務(wù)器是否存活【了解】
• OPTIONS：發(fā)送請求，一般獲取請求和響應(yīng)配置數(shù)據(jù)【了解】
• CONNECT：發(fā)送請求抹沪，一般用于保持長連接進行數(shù)據(jù)交互【了解】
  （4） GET/POST請求
  ① get請求

// 1刻肄、創(chuàng)建對象
var _http = new XMLHttpRequest()
// 2、打開服務(wù)器連接
// 附帶參數(shù)：參數(shù)拼接格式一定要正確,?name=tom&age=20&gender=1
_http.open('GET', 'http://www.example.com?name=tom&age=20&gender=1')
// 3融欧、發(fā)送請求
_http.send()
// 4敏弃、處理返回數(shù)據(jù)
_http.onreadystatechange = function() {
  // 判斷數(shù)據(jù)正確返回
  if(_http.readyState === 4 && _http.status === 200) {
    // 獲取服務(wù)器接口數(shù)據(jù)
    var _txt = _http.responseText
    // DOM操作數(shù)據(jù)
    // ...
  }
}

② post請求

// 1、創(chuàng)建對象
var _http = new XMLHttpRequest()
// 2噪馏、打開服務(wù)器連接
_http.open('POST', 'https://www.example.com')
// 3麦到、設(shè)置請求頭
_http.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
// 4虹茶、發(fā)送請求
// 附帶參數(shù)，以字符串的方式添加參數(shù)
_http.send('username=admin&userpass=123')
// 5隅要、處理響應(yīng)
_http.onreadystatechange = function() {
  // 判斷數(shù)據(jù)是否正確返回
  if(_http.readyState === 4 && _http.status === 200) {
    // 獲取返回的數(shù)據(jù)
    var _txt = _http.responseText
    // DOM操作
    // ...
  }
}