最近總是去面試亩歹，結(jié)果都掛掉了匙监，失去了生活的希望，好想去遠(yuǎn)方小作。亭姥。。
無(wú)奈還欠著太多貸款顾稀，還沒(méi)有結(jié)婚生娃达罗，之后咬著牙，留著淚静秆，繼續(xù)學(xué)習(xí)吧粮揉。
1.前端通過(guò)ajax請(qǐng)求數(shù)據(jù)，不用ajax還可以用什么完成請(qǐng)求呢抚笔？
答：基本都是用ajax請(qǐng)求數(shù)據(jù)扶认，ajax就是原生的XmlHttpRequest對(duì)象，jQuery中的請(qǐng)求也是對(duì)原生ajax進(jìn)行封裝殊橙，axios也是對(duì)原生ajax的進(jìn)行封裝辐宾，如果不用ajax的話(huà)，估計(jì)就只有jsonp了膨蛮，或者是HTML文件模式了叠纹。
這個(gè)樣面試官有點(diǎn)不太滿(mǎn)意，實(shí)際的開(kāi)發(fā)基本都是ajax敞葛，易用性和兼容性都是ajax比較好誉察，面試嘛，要托管自己的知識(shí)面惹谐，其實(shí)不用ajax持偏，jsonp應(yīng)該是唯一馬上想到的，現(xiàn)在我百度一下豺鼻、综液、、
牛掰：前端使用ajax請(qǐng)求數(shù)據(jù)易用性和兼容性都是比較好的儒飒，基本一下第三方庫(kù)都是對(duì)ajax的二次封裝谬莹，如axios，jQuery等桩了。不用ajax的話(huà)附帽，jsonp是一個(gè)比較好的選擇，但jsonp對(duì)post請(qǐng)求的支持不太友好井誉，但同時(shí)也可以利用HTMLfrom表單形式提交post請(qǐng)求蕉扮，jsonp原理也是源于HTML script標(biāo)簽的src屬性。還有現(xiàn)在ES6-fetchAPI來(lái)獲取數(shù)據(jù)颗圣，fetch請(qǐng)求數(shù)據(jù)直接返回的就是一個(gè)pormise實(shí)例喳钟，易用性更強(qiáng)屁使，但兼容性不夠。然后HTML5還提供了websocket請(qǐng)求數(shù)據(jù)方式奔则，對(duì)于實(shí)時(shí)通信良好支持亦镶，同時(shí)需要服務(wù)端提供socket服務(wù)器煌寇，服務(wù)api請(qǐng)求方式是以ws或wss協(xié)議請(qǐng)求方式雕憔。
前端請(qǐng)求數(shù)據(jù)的方式萧吠？前端請(qǐng)求數(shù)據(jù)的幾種方式？
一. ajax原理：
AJAX的全稱(chēng)是Asynchronous JavaScript And XML.
使用ajax發(fā)送請(qǐng)求是依靠于一個(gè)對(duì)象抽莱，叫XmlHttpRequest對(duì)象范抓，通過(guò)這個(gè)對(duì)象我們可以從服務(wù)器獲取到數(shù)據(jù)，然后再渲染到我們的頁(yè)面上∈愁恚現(xiàn)在幾乎所有的瀏覽器都有這個(gè)對(duì)象匕垫，只有IE7以下的沒(méi)有，而是通過(guò)ActiveXObject這個(gè)對(duì)象來(lái)創(chuàng)建的璃岳。XmlHttpRequest對(duì)象有一些常見(jiàn)的方法：
| 方法 | 描述 |
|---|---|
| abort() | 停止當(dāng)前請(qǐng)求 |
| getAllResponseHeaders() | 把HTTP請(qǐng)求的所有響應(yīng)首部作為鍵/值對(duì)返回 |
| getResponseHeader(“header”) | 返回指定首部的串值 |
| open(method,url) | 建立對(duì)服務(wù)器的調(diào)用,還有3個(gè)可選參數(shù)年缎，是否異步、用戶(hù)名铃慷、密碼 |
| send(content) | 向服務(wù)器發(fā)送請(qǐng)求 |
| setRequestHeader(header, value) | 把指定首部設(shè)置為所提供的值单芜。 |
XMLHttpRequest對(duì)象
當(dāng)需要異步與服務(wù)器交換數(shù)據(jù)時(shí)，需要XMLHttpRequest對(duì)象來(lái)異步交換犁柜。XMLHttpRequest對(duì)象的主要屬性有：
onreadystatechange——每次狀態(tài)改變所觸發(fā)事件的事件處理程序洲鸠。
responseText——從服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的字符串形式。
responseXML——從服務(wù)器進(jìn)程返回的DOM兼容的文檔數(shù)據(jù)對(duì)象馋缅。
status——從服務(wù)器返回的數(shù)字代碼扒腕，如404（未找到）和200（已就緒）。
status Text——伴隨狀態(tài)碼的字符串信息萤悴。
readyState——對(duì)象狀態(tài)值瘾腰。對(duì)象狀態(tài)值有以下幾個(gè)：
0 - (未初始化)還沒(méi)有調(diào)用send()方法
1 - (載入)已調(diào)用send()方法，正在發(fā)送請(qǐng)求
2 - (載入完成)send()方法執(zhí)行完成
3 - (交互)正在解析響應(yīng)內(nèi)容
4 - (完成)響應(yīng)內(nèi)容解析完成覆履，可以在客戶(hù)端調(diào)用了
對(duì)于readyState的狀態(tài)值蹋盆，其中“0”狀態(tài)是在定義后自動(dòng)具有的狀態(tài)值，而對(duì)于成功訪(fǎng)問(wèn)的狀態(tài)（得到信息）我們大多數(shù)采用“4”進(jìn)行判斷硝全。
ajax優(yōu)缺點(diǎn)
| 優(yōu)缺點(diǎn) | 描述 |
|---|---|
| 優(yōu)點(diǎn) | 局部更新 |
| 優(yōu)點(diǎn) | 通過(guò)異步模式栖雾，提升了用戶(hù)體驗(yàn) |
| 優(yōu)點(diǎn) | 原生支持，不需要任何插件 |
| 缺點(diǎn) | 可能破壞瀏覽器后退功能 |
| 缺點(diǎn) | 嵌套回調(diào)伟众，難以處理 |
示例： 請(qǐng)看 原生ajax使用實(shí)現(xiàn)
二. JSONP原理
ajax請(qǐng)求受同源策略影響析藕，不允許進(jìn)行跨域請(qǐng)求，而script標(biāo)簽src屬性中的鏈接卻可以訪(fǎng)問(wèn)跨域的js腳本凳厢，利用這個(gè)特性账胧，服務(wù)端不再返回JSON格式的數(shù)據(jù)竞慢，而是返回一段調(diào)用某個(gè)函數(shù)的js代碼，在src中進(jìn)行了調(diào)用治泥，這樣實(shí)現(xiàn)了跨域梗顺。
| 優(yōu)缺點(diǎn) | 描述 |
|---|---|
| 優(yōu)點(diǎn) | 進(jìn)行跨域請(qǐng)求 |
| 缺點(diǎn) | 不能 post請(qǐng)求 |
示例： 請(qǐng)看 JSONP跨域詳解
三. ES6-fetch
Fetch API 提供了一個(gè) JavaScript接口，用于訪(fǎng)問(wèn)和操縱HTTP管道的部分车摄，例如請(qǐng)求和響應(yīng)。它還提供了一個(gè)全局 fetch()方法仑鸥，該方法提供了一種簡(jiǎn)單吮播，合理的方式來(lái)跨網(wǎng)絡(luò)異步獲取資源。
我們使用Fetch來(lái)獲取數(shù)據(jù)時(shí)眼俊，會(huì)返回給我們一個(gè)Pormise對(duì)象意狠，是因?yàn)镕etch API是基于Promise設(shè)計(jì)的。并且fetch調(diào)用非常簡(jiǎn)單疮胖，因?yàn)樗菕煸贐OM上的环戈，屬于全局的方法。
Fetch是ajax非常好的一個(gè)替代品澎灸，很有可能將來(lái)會(huì)完全代替ajax的地位院塞。我們先來(lái)看下瀏覽器的支持情況：
我們可以看到IE瀏覽器完全不支持Fetch，并且移動(dòng)端的很多瀏覽器也不支持Fetch性昭，不過(guò)可以使用第三方的ployfill來(lái)獲得支持拦止。Github.fetch
| 優(yōu)缺點(diǎn) | 描述 |
|---|---|
| 優(yōu)點(diǎn) | 支持Pormise對(duì)象 |
| 優(yōu)點(diǎn) | fetch調(diào)用非常簡(jiǎn)單 |
| 缺點(diǎn) | 瀏覽器完全不支持Fetch |
示例： 請(qǐng)看 fetch 文檔詳情
websocket使用方式 請(qǐng)看 菜鳥(niǎo)教程
MVC模式，請(qǐng)求數(shù)據(jù)不關(guān)前端的事糜颠。我已經(jīng)不想走回頭路了汹族。
切圖仔祝大家前途無(wú)限
