Javascript 基礎(chǔ):
1.js中數(shù)組常見(jiàn)的方法：
1.push()??末尾添加，返回長(zhǎng)度，改變?cè)瓟?shù)組
push()方法可以向數(shù)組后添加一個(gè)新的元素，并返回新數(shù)組的長(zhǎng)度。
? ? var a = [1,2,3];
? ? var b = a.push(4);
? ? console.log(a);//[1,2,3,4]
? ? console.log(b);//4
2.unshift() 首部添加，返回長(zhǎng)度，改變?cè)瓟?shù)組
unshift()可以向數(shù)組前添加一個(gè)或多個(gè)元素，并返回新的長(zhǎng)度。
var a = [2,3,4];
var b = a.unshift(0,1);
console.log(a);//[0,1,2,3,4]
console.log(b);//5
3.pop() 尾部刪除，返回被刪除的元素，改變?cè)瓟?shù)組
pop() 用于刪除并返回最后一個(gè)元素。
vara = [1,2,3]
varb = a.pop()
console.log(a)// [1,2]
console.log(b)// 3
4.shift()?刪除首部元素，返回被刪元素，改變?cè)瓟?shù)組
shift() 用于刪除并返回首個(gè)元素
var a = [1,2,3]
varb = a.shift()
console.log(a)// [2,3]
console.log(b)// 1
5.splice() 修改刪除。對(duì)數(shù)組進(jìn)行刪除修改，返回被刪除的元素組成的數(shù)組，改變?cè)瓟?shù)組
splice(index,length,增加的元素1,增加的元素2....,增加的元素N) 表示從index開(kāi)始刪除length個(gè)元素，并從index開(kāi)始新增元素1~N，放回被刪除的元素組成的數(shù)組
var a = [1,2,3]
var b = a.splice(1,1,3,[2,3,4],5)
console.log(a)? // [1,3,[2,3,4],5,3]
console.log(b)? // [2]
6.concat() 拼接合并兩個(gè)或多個(gè)數(shù)組，返回新數(shù)組，不會(huì)改變?cè)瓟?shù)組
concat() 方法用來(lái)合并兩個(gè)或多個(gè)數(shù)組
var a = [1,2,3]
var b = [4,5]
var c = a.concat(b)
console.log(a) // [1,2,3]
console.log(b) // [4,5]
console.log(c) // [1,2,3,4,5]
7.slice() 剪切?返回新數(shù)組，不改變?cè)瓟?shù)組
slice(startIndex,endIndex) ?返回從startIndex開(kāi)始(包括)，到endIndex(不包括)之間的原屬組成的數(shù)組
var a = [1,2,3]
var b = a.slice(0,1)
// 不填參數(shù)則表示剪切整個(gè)數(shù)組?
var c = a.slice()
console.log(a) // [1,2,3]
console.log(b) // [1]
console.log(c) // [1,2,3]? ?
console.log(a===c)? // false // 注意 a !== c
// 負(fù)數(shù)表示從后往前數(shù)
var d = a.slice(-1,-2)?
console.log(d) // []? 從左向右截取，所以說(shuō)為[]
var e = a.slice(-1)?
console.log(e)? // [3]
8.join()不改變?cè)瓟?shù)組，返回轉(zhuǎn)換后的字符串
join() 方法用來(lái)將數(shù)組轉(zhuǎn)換為字符串
var a = [1,2,3,4,5]
console.log(a.join(','))// 1,2,3,4,5
console.log(a)// [1,2,3,4,5]
9.sort() 排序? 改變?cè)瓟?shù)組，返回排序后的數(shù)組
var a = ['a','b','d','c']
console.log(a.sort())? // ['a','b','c','d']
console.log(a)? // ['a','b','c','d']
10.reverse() 顛倒順序?返回的是顛倒后的數(shù)組，會(huì)改變?cè)瓟?shù)組。
reverse() 方法用于顛倒數(shù)組中元素的順序。
var a? = [1,3,2,7,6]
console.log(a.reverse())? // [6,7,2,3,1]
console.log(a)? // [6,7,2,3,1]
11.indexOf()和lastIndexOf()? 不會(huì)改變?cè)瓟?shù)組，返回找到的index,否則返回-1
indexOf(某元素,startIndex) 從startIndex開(kāi)始，查找某元素在數(shù)組中的位置，若存在，則返回第一個(gè)位置的下標(biāo),否則返回-1
lastIndexOf(某元素，startIndex) 和indexOf()相同，區(qū)別在于從尾部向首部查詢
若不使用下標(biāo)，則一般通過(guò)includes()方法代替indexOf()
var a = [1,2,4,3,4,5]
console.log(a.indexOf(4))? // 2
console.log(a.indexOf(4,3)) // 4
12.filter() 過(guò)濾??filter() 方法返回?cái)?shù)組中滿足條件的元素組成的新數(shù)組，原數(shù)組不變
filter()的參數(shù)是一個(gè)方法
var a = [1,2,3,4,11]
// 第一個(gè)參數(shù)為一個(gè)方法，有三個(gè)參數(shù)，current:當(dāng)前值 index:當(dāng)前值下標(biāo) array:這個(gè)數(shù)組對(duì)象
var b = a.filter(function(current,index,array){
? ? return current < 10
})
console.log(b) // [1,2,3,4]
console.log(a) // [1,2,3,4,11]
13.map() 格式化數(shù)組? ?map() 方法來(lái)根據(jù)需求格式化原數(shù)組，返回格式化后的數(shù)組。原數(shù)組不變
var a = [1,2,3,4,5]
// 參數(shù)同filter方法
var b = a.map(function(current,index,array){
? ? return current + 1
})
console.log(b) // [2,3,4,5,6]
console.log(a) // [1,2,3,4,5]
14.every()?對(duì)數(shù)組的每一項(xiàng)都運(yùn)行給定的函數(shù)，若每一項(xiàng)都返回 ture,則返回 true
var a = [1,2,3,4,5]
var b = a.every(function(current,index,array){
? ? ? return current < 6
})
var c = a.every(function(current,index,array){
? ? ? return current < 3
})
console.log(b)? // true
console.log(c)? // false
15.some()?對(duì)數(shù)組的每一項(xiàng)都運(yùn)行給定的函數(shù)，若存在一項(xiàng)或多項(xiàng)返回 ture,則返回 true
var a = [1,2,3,4,5]
var b = a.some(function(current,index,array){
? ? ? return current > 4
})
var c = a.some(function(current,index,array){
? ? ? return current > 5
})
console.log(b)? // true
console.log(c)? // false
16.forEach() ?數(shù)組遍歷?遍歷整個(gè)數(shù)組，中途不能中斷
var arr = ['a','b','c']
var copy = []
arr.forEach(function(item){
? ? copy.push(item)?
})
console.log(copy)
ES6新增數(shù)組方法：
1. find() ?
找到數(shù)組中第一次滿足條件的元素，并返回，若找不到則返回undefined。不改變?cè)瓟?shù)組。
和filter()方法的區(qū)別在于：filter返回值是所有滿足條件的元素組成的數(shù)組，
一般在需要使用找到的元素時(shí)，用find()方法
var a = [1,2,3,4]
// b在下面需要使用，則一般用find
var b = a.find(function(ele,index,array){
? ? return ele == 1
})
var c = 3
var d = b + c
console.log(a) // [1,2,3,4]
console.log(b) // 1
console.log(d) // 4
// 若只需判斷元素是否存在
// 若果是簡(jiǎn)單數(shù)組(非對(duì)象數(shù)組)，則一般使用Array.includes(value)方法
// 如果為對(duì)象數(shù)組，則可以使用Array.some()方法
var a = [1,2,3]
console.log(a.includes(1))? // true
var a = [{"name": "xiaoming" },{"name": "xiaohong"}]
console.log(a.some(function(ele){
? ? return ele.name == 'xiaoming'
}))? ? ?// true
2.findIndex()方法
findIndex()的作用同indexOf()，返回第一個(gè)滿足條件的下標(biāo)，并停止尋找。
區(qū)別是findIndex() 的參數(shù)為一個(gè)回調(diào)函數(shù),且一般用于對(duì)象數(shù)組
var a = [1,2,3,4]
var b = a.findIndex(function(ele,index,array){
? ? return ele === 2
})
var c = a.indexOf(2)?
console.log(a)? // [1,2,3,4]
console.log(b)? // 1
console.log(c)? // 1
3.includes()?
includes()方法,返回一個(gè)布爾值。 參數(shù)是一個(gè)value,一般用于簡(jiǎn)單數(shù)組。
對(duì)于復(fù)雜數(shù)組，則可以使用some()方法替代includes()方法
var a = [1,2,3]
console.log(a.includes(1))? // true
4.Array.isArray()方法
用來(lái)判斷一個(gè)元素是否為數(shù)組
Array.isArray([])// true
Array.isArray({})// false
2.js中字符串常見(jiàn)的方法：
1.charAt 返回指定索引出的字符
var str='abcd';
var a=str.charAt(0);
console.log(a); //'a'
console.log(str); //'abcd'
2.charCodeAt?返回指定索引出的unicode字符
str.charCodeAt(0); ? //97
3.indexof ?判斷一個(gè)字符第一次出現(xiàn)在某個(gè)字符串的索引，如果包含返回它的索引，如果不包含返回-1.
str.indexOf('a'); ? ? //0
str.indexOf('e'); ? ? //-1
4.lastIndexOf?判斷一個(gè)字符最后一次出現(xiàn)在某個(gè)字符串的索引，如果包含返回它的索引，如果不包含返回-1.
str.lastIndexOf('b'); ? //1
str.lastIndexOf('e'); ? //-1
5.concat拼接2個(gè)字符串，返回一個(gè)新字符串，對(duì)原有字符串沒(méi)有任何改變。
var str='qwe';
var str1='abc';
var str2=str.concat(str1);
? ? console.log(str2);//"qweabc"
6.substr(n,m) 從索引n開(kāi)始，截取m個(gè)字符，將截取的字符返回，對(duì)原字符串沒(méi)有任何改變。
var b=s.substr(1,1)
console.log(b); ?//'w'
7.substring(n,m) ? 從索引n開(kāi)始，截取到索引m,不包括m.將截取的字符返回,對(duì)原字符串沒(méi)有任何改變.
var ee=str.substring(1,3);
console.log(ee); ?//"bc"
8.slice(n,m) ? 從索引n開(kāi)始，截取到索引m,不包括m.將截取的字符返回,對(duì)原字符串沒(méi)有任何改變.
var aa=str.slice(0,3);
console.log（aa）;//'abc'
9.split ?用指定字符分割字符串，返回一個(gè)數(shù)組.對(duì)原字符串沒(méi)有任何改變。
var a=str.split('');
console.log(a); ?//["a", "b", "c", "d"]
10.replace('a',1);? 替換指定字符，返回替換后新的字符串，對(duì)原有字符串有改變。(第一個(gè)參數(shù)可以是正則表達(dá)式)?只能替換一次?，配合正則模式修飾符g使用
var str='aaaaee';
var reg=/a/g;
str.replace(reg,1); ? //"1111ee"
11.match()?可在字符串內(nèi)檢索指定的值，或找到一個(gè)或多個(gè)正則表達(dá)式的匹配。把找到的字符放在數(shù)組里，返回一個(gè)數(shù)組。
var str='aaaa3ed33';
var reg=/a/g;
str.match(reg); ?//["a", "a", "a", "a"]
12.search()?方法用于檢索字符串中指定的子字符串，或檢索與正則表達(dá)式相匹配的子字符串。
ES6新增字符串方法：
1.includes()：返回布爾值，表示是否找到了參數(shù)字符串。這三個(gè)方法都支持第二個(gè)參數(shù)，表示開(kāi)始搜索的位置。
2.startsWith()：返回布爾值，表示參數(shù)字符串是否在源字符串的頭部。這三個(gè)方法都支持第二個(gè)參數(shù)，表示開(kāi)始搜索的位置。
3.endsWith()：返回布爾值，表示參數(shù)字符串是否在源字符串的尾部。這三個(gè)方法都支持第二個(gè)參數(shù)，表示開(kāi)始搜索的位置。
vars='Hello world!';
s.startsWith('world',6) // true
s.endsWith('Hello',5) // true
s.includes('Hello',6)// false
4.repeat() ?方法返回一個(gè)新字符串，表示將原字符串重復(fù)n次。
'x'.repeat(3)// "xxx"
'hello'.repeat(2)// "hellohello"
'na'.repeat(0)// ""
3.js數(shù)組與字符串的相互轉(zhuǎn)換方法
一、數(shù)組轉(zhuǎn)字符串
需要將數(shù)組元素用某個(gè)字符連接成字符串，示例代碼如下：
var?a, b;
a = new?Array(0,1,2,3,4);
b = a.join("-");
二、字符串轉(zhuǎn)數(shù)組
實(shí)現(xiàn)方法為將字符串按某個(gè)字符切割成若干個(gè)字符串，并以數(shù)組形式返回，示例代碼如下：
var?s = "abc,abcd,aaa";
ss = s.split(",");// 在每個(gè)逗號(hào)(,)處進(jìn)行分解。
4.用css實(shí)現(xiàn)一個(gè)三角形，廢話不說(shuō)，上代碼！
<body>
<style>
? ? .triangle {
? ? ? ? width: 0;
? ? ? ? height: 0;
? ? ? ? border-style: solid;
? ? ? ? border-width: 0 0 100px 100px;
? ? ? ? border-color: transparent transparent blue transparent;
? ? }
</style>
<div class="triangle"></div>
</body>
5.H5新增標(biāo)簽
video表示一段視頻并提供播放的用戶界面
audio表示音頻
canvas表示位圖區(qū)域
source為video和audio提供數(shù)據(jù)源
track為video和audio指定字母
svg定義矢量圖
code代碼段
figure和文檔有關(guān)的圖例
figcaption圖例的說(shuō)明
main
time日期和時(shí)間值
mark高亮的引用文字
datalist提供給其他控件的預(yù)定義選項(xiàng)
keygen秘鑰對(duì)生成器控件
output計(jì)算值
progress進(jìn)度條
menu菜單
embed嵌入的外部資源
menuitem用戶可點(diǎn)擊的菜單項(xiàng)
menu菜單
template
section
nav
aside
article
footer
header
6.css3新增標(biāo)簽
背景和邊框
border-radius、box-shadow、border-image、
background-size：規(guī)定背景圖片的尺寸
background-origin：規(guī)定背景圖片的定位區(qū)域
background-clip：規(guī)定背景的繪制區(qū)域
文本效果（常用）
text-shadow：設(shè)置文字陰影
word-wrap：強(qiáng)制換行
word-break
css3提出@font-face規(guī)則，規(guī)則中定義了font-family、font-weight、font-style、font-stretch、src、unicode-range
7.css3新增偽類(lèi)選擇器
：nth-child()?
：nth-last-child()?
：only-child?
：last-child?
：nth-of-type()?
：only-of-type()?
：empty?
：target 這個(gè)偽類(lèi)允許我們選擇基于URL的元素，如果這個(gè)元素有一個(gè)識(shí)別器（比如跟著一個(gè)#），那么:target會(huì)對(duì)使用這個(gè)ID識(shí)別器的元素增加樣式。?
：enabled?
：disabled?
：checked?
：not
8.CSS3邊框：
border-radius：CSS3圓角邊框。
box-shadow：CSS3邊框陰影。在 CSS3 中，box-shadow 用于向方框添加陰影。box-shadow:10px 10px 5px #888888;
border-image：CSS3邊框圖片。通過(guò) CSS3 的 border-image 屬性，您可以使用圖片來(lái)創(chuàng)建邊框。border-image：url(border.png) 30 30 round;
9.CSS3背景：
background-size： 屬性規(guī)定背景圖片的尺寸。在 在 CSS3 中，可以規(guī)定背景圖片的尺寸，這就允許我們?cè)诓煌沫h(huán)境中重復(fù)使用背景圖片。您能夠以像素或百分比規(guī)定尺寸。如果以百分比規(guī)定尺寸，那么尺寸相對(duì)于父元素的寬度和高度。
background-origin ：屬性規(guī)定背景圖片的定位區(qū)域。背景圖片可以放置于 content-box、padding-box 或 border-box 區(qū)域。
10.CSS3文字效果：
text-shadow：在 CSS3 中，text-shadow 可向文本應(yīng)用陰影。text-shadow:5px 5px 5px #FFFFFF;
word-wrap :單詞太長(zhǎng)的話就可能無(wú)法超出某個(gè)區(qū)域，允許對(duì)長(zhǎng)單詞進(jìn)行拆分，并換行到下一行：p{word-wrap:break-word;}
11.CSS3 2D轉(zhuǎn)換：
transform：通過(guò) CSS3 轉(zhuǎn)換，我們能夠?qū)υ剡M(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或拉伸。
translate()：元素從其當(dāng)前位置移動(dòng)，根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)：transform：translate（50px,100px）;值 translate(50px,100px) 把元素從左側(cè)移動(dòng) 50 像素，從頂端移動(dòng) 100 像素。
rotate()：元素順時(shí)針旋轉(zhuǎn)給定的角度。允許負(fù)值，元素將逆時(shí)針旋轉(zhuǎn)。transform:rotate(30deg);值 rotate(30deg) 把元素順時(shí)針旋轉(zhuǎn) 30 度。
scale():元素的尺寸會(huì)增加或減少，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)：transform:scale(2,4);值 scale(2,4) 把寬度轉(zhuǎn)換為原始尺寸的 2 倍，把高度轉(zhuǎn)換為原始高度的 4 倍。
skew():元素轉(zhuǎn)動(dòng)給定的角度，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)：transform:skew(30deg,20deg);值 skew(30deg,20deg) 圍繞 X 軸把元素轉(zhuǎn)動(dòng) 30 度，圍繞 Y 軸轉(zhuǎn)動(dòng) 20 度。
matrix() :
matrix() 方法把所有 2D 轉(zhuǎn)換方法組合在一起。
matrix() 方法需要六個(gè)參數(shù)，包含數(shù)學(xué)函數(shù)，允許您：旋轉(zhuǎn)、縮放、移動(dòng)以及傾斜元素。
12.less,sass,scss是什么？
1、Less：
是一種動(dòng)態(tài)樣式語(yǔ)言. 對(duì)CSS賦予了動(dòng)態(tài)語(yǔ)言的特性，如變量、繼承、運(yùn)算、函數(shù)。
Less 既可以在客戶端上運(yùn)行 (支持IE 6+, Webkit, Firefox)，也可在服務(wù)端運(yùn)行。
2、Sass：
是一種動(dòng)態(tài)樣式語(yǔ)言，Sass語(yǔ)法屬于縮排語(yǔ)法，
比css比多出好些功能(如變量、嵌套、運(yùn)算,混入(Mixin)、繼承、顏色處理，函數(shù)等)，更容易閱讀。
3. less和sass的相同之處
Less和Sass在語(yǔ)法上有些共性，比如下面這些：
1、混入(Mixins)——class中的class；
2、參數(shù)混入——可以傳遞參數(shù)的class，就像函數(shù)一樣；
3、嵌套規(guī)則——Class中嵌套class，從而減少重復(fù)的代碼；
4、運(yùn)算——CSS中用上數(shù)學(xué)；
5、顏色功能——可以編輯顏色；
6、名字空間(namespace)——分組樣式，從而可以被調(diào)用；
7、作用域——局部修改樣式；
8、JavaScript 賦值——在CSS中使用JavaScript表達(dá)式賦值。
4. less和sass的區(qū)別
Less和Sass的主要不同就是他們的實(shí)現(xiàn)方式。
Less是基于JavaScript，是在客戶端處理的。
Sass是基于Ruby的，是在服務(wù)器端處理的。
關(guān)于變量在Less和Sass中的唯一區(qū)別就是Less用@，Sass用$。
13.css左邊固定，右邊自適應(yīng)，怎么布局？
html部分：
<div class="container">
? ? ? ? <span class="left"></span>?
? ? ? ? <div class="right"></div>? ?
</div>
css樣式：
/*第1種寫(xiě)法*/
? ? *{padding: 0;margin:0;}
? ? .left{width:100px;height:100px;float:left;background-color:yellow;}?
? ? .right{margin-left:100px;height:100px;background-color:#666;}
? ? /*第2種寫(xiě)法*/
? ? *{padding: 0;margin:0;}
? ? .left{position: absolute; top:0; left:0; width:200px; background: #ff0;height: 100px;}
? ? .right input{width: 100%;? ? box-sizing: border-box;}
? ? .right{height:100px;background-color:#666;margin-left: 200px;}
14. ajax
什么是ajax?
AJAX全稱(chēng)為“Asynchronous JavaScript and XML”（異步JavaScript和XML），是一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。它使用：
使用XHTML+CSS來(lái)標(biāo)準(zhǔn)化呈現(xiàn)；
使用XML和XSLT進(jìn)行數(shù)據(jù)交換及相關(guān)操作；
使用XMLHttpRequest對(duì)象與Web服務(wù)器進(jìn)行異步數(shù)據(jù)通信；?
使用Javascript操作Document Object Model進(jìn)行動(dòng)態(tài)顯示及交互；?
使用JavaScript綁定和處理所有數(shù)據(jù)。
AJAX的工作原理:
? ? ? ? Ajax的工作原理相當(dāng)于在用戶和服 務(wù)器之間加了—個(gè)中間層(AJAX引擎),使用戶操作與服務(wù)器響應(yīng)異步化。并不是所有的用戶請(qǐng)求都提交給服務(wù)器,像—些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給 Ajax引擎自己來(lái)做, 只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由Ajax引擎代為向服務(wù)器提交請(qǐng)求。
ajax的核心：
? ? ? Ajax其核心有 JavaScript、XMLHTTPRequest、DOM對(duì)象組成，通過(guò)XmlHttpRequest對(duì)象來(lái)向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)， 然后用JavaScript來(lái)操作DOM而更新頁(yè)面。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請(qǐng)求數(shù)據(jù)。
ajax請(qǐng)求的五個(gè)流程
1.建立xmlHttpRequest對(duì)象
2.設(shè)置回調(diào)函數(shù)
3.使用OPEN方法與服務(wù)器建立連接??xmlHttp.open("get","ajax?name="+ name,true)
4.向服務(wù)器端發(fā)送數(shù)據(jù)
5.在回調(diào)函數(shù)中針對(duì)不同的響應(yīng)狀態(tài)進(jìn)行處理
AJAX的優(yōu)點(diǎn)：
<1>.無(wú)刷新更新數(shù)據(jù)。
AJAX最大優(yōu)點(diǎn)就是能在不刷新整個(gè)頁(yè)面的前提下與服務(wù)器通信維護(hù)數(shù)據(jù)。這使得Web應(yīng)用程序更為迅捷地響應(yīng)用戶交互，并避免了在網(wǎng)絡(luò)上發(fā)送那些沒(méi)有改變的信息，減少用戶等待時(shí)間，帶來(lái)非常好的用戶體驗(yàn)。
<2>.異步與服務(wù)器通信。
AJAX使用異步方式與服務(wù)器通信，不需要打斷用戶的操作，具有更加迅速的響應(yīng)能力。優(yōu)化了Browser和Server之間的溝通，減少不必要的數(shù)據(jù)傳輸、時(shí)間及降低網(wǎng)絡(luò)上數(shù)據(jù)流量。
<3>.前端和后端負(fù)載平衡。
AJAX可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來(lái)處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本。并且減輕服務(wù)器的負(fù)擔(dān)，AJAX的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請(qǐng)求和響應(yīng)對(duì)服務(wù)器造成的負(fù)擔(dān)，提升站點(diǎn)性能。
<4>.基于標(biāo)準(zhǔn)被廣泛支持。
AJAX 基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載瀏覽器插件或者小程序，但需要客戶允許JavaScript在瀏覽器上執(zhí)行。隨著Ajax的成熟，一些簡(jiǎn)化 Ajax使用方法的程序庫(kù)也相繼問(wèn)世。同樣，也出現(xiàn)了另一種輔助程序設(shè)計(jì)的技術(shù)，為那些不支持JavaScript的用戶提供替代功能。
<5>.界面與應(yīng)用分離。
Ajax使WEB中的界面與應(yīng)用分離（也可以說(shuō)是數(shù)據(jù)與呈現(xiàn)分離），有利于分工合作、減少非技術(shù)人員對(duì)頁(yè)面的修改造成的WEB應(yīng)用程序錯(cuò)誤、提高效率、也更加適用于現(xiàn)在的發(fā)布系統(tǒng)。
AJAX的缺點(diǎn)：
<1>.AJAX干掉了Back和History功能，即對(duì)瀏覽器機(jī)制的破壞。
在動(dòng)態(tài)更新頁(yè)面的情況下，用戶無(wú)法回到前一個(gè)頁(yè)面狀態(tài)，因?yàn)闉g覽器僅能記憶歷史記錄中的靜態(tài)頁(yè)面。一個(gè)被完整讀入的頁(yè)面與一個(gè)已經(jīng)被動(dòng)態(tài)修改過(guò)的頁(yè)面之間的差別非常微妙；用戶通常會(huì)希望單擊后退按鈕能夠取消他們的前一次操作，但是在Ajax應(yīng)用程序中，這將無(wú)法實(shí)現(xiàn)。
后 退按鈕是一個(gè)標(biāo)準(zhǔn)的web站點(diǎn)的重要功能，但是它沒(méi)法和js進(jìn)行很好的合作。這是Ajax所帶來(lái)的一個(gè)比較嚴(yán)重的問(wèn)題，因?yàn)橛脩敉窍Ｍ軌蛲ㄟ^(guò)后退來(lái) 取消前一次操作的。那么對(duì)于這個(gè)問(wèn)題有沒(méi)有辦法？答案是肯定的，用過(guò)Gmail的知道，Gmail下面采用的Ajax技術(shù)解決了這個(gè)問(wèn)題，在Gmail下 面是可以后退的，但是，它也并不能改變Ajax的機(jī)制，它只是采用的一個(gè)比較笨但是有效的辦法，即用戶單擊后退按鈕訪問(wèn)歷史記錄時(shí)，通過(guò)創(chuàng)建或使用一個(gè)隱 藏的IFRAME來(lái)重現(xiàn)頁(yè)面上的變更。（例如，當(dāng)用戶在Google Maps中單擊后退時(shí)，它在一個(gè)隱藏的IFRAME中進(jìn)行搜索，然后將搜索結(jié)果反映到Ajax元素上，以便將應(yīng)用程序狀態(tài)恢復(fù)到當(dāng)時(shí)的狀態(tài)。）
但是，雖然說(shuō)這個(gè)問(wèn)題是可以解決的，但是它所帶來(lái)的開(kāi)發(fā)成本是非常高的，并與Ajax框架所要求的快速開(kāi)發(fā)是相背離的。這是Ajax所帶來(lái)的一個(gè)非常嚴(yán)重的問(wèn)題。
一 個(gè)相關(guān)的觀點(diǎn)認(rèn)為，使用動(dòng)態(tài)頁(yè)面更新使得用戶難于將某個(gè)特定的狀態(tài)保存到收藏夾中。該問(wèn)題的解決方案也已出現(xiàn)，大部分都使用URL片斷標(biāo)識(shí)符（通常被稱(chēng)為 錨點(diǎn)，即URL中#后面的部分）來(lái)保持跟蹤，允許用戶回到指定的某個(gè)應(yīng)用程序狀態(tài)。（許多瀏覽器允許JavaScript動(dòng)態(tài)更新錨點(diǎn)，這使得Ajax應(yīng) 用程序能夠在更新顯示內(nèi)容的同時(shí)更新錨點(diǎn)。）這些解決方案也同時(shí)解決了許多關(guān)于不支持后退按鈕的爭(zhēng)論。
<2>.AJAX的安全問(wèn)題。
AJAX 技術(shù)給用戶帶來(lái)很好的用戶體驗(yàn)的同時(shí)也對(duì)IT企業(yè)帶來(lái)了新的安全威脅，Ajax技術(shù)就如同對(duì)企業(yè)數(shù)據(jù)建立了一個(gè)直接通道。這使得開(kāi)發(fā)者在不經(jīng)意間會(huì)暴露比 以前更多的數(shù)據(jù)和服務(wù)器邏輯。Ajax的邏輯可以對(duì)客戶端的安全掃描技術(shù)隱藏起來(lái)，允許黑客從遠(yuǎn)端服務(wù)器上建立新的攻擊。還有Ajax也難以避免一些已知 的安全弱點(diǎn)，諸如跨站點(diǎn)腳步攻擊、SQL注入攻擊和基于Credentials的安全漏洞等等。
<3>.對(duì)搜索引擎支持較弱。
對(duì)搜索引擎的支持比較弱。如果使用不當(dāng)，AJAX會(huì)增大網(wǎng)絡(luò)數(shù)據(jù)的流量，從而降低整個(gè)系統(tǒng)的性能。
<4>.破壞程序的異常處理機(jī)制。
至 少?gòu)哪壳翱磥?lái)，像Ajax.dll，Ajaxpro.dll這些Ajax框架是會(huì)破壞程序的異常機(jī)制的。關(guān)于這個(gè)問(wèn)題，曾在開(kāi)發(fā)過(guò)程中遇到過(guò)，但是查了一 下網(wǎng)上幾乎沒(méi)有相關(guān)的介紹。后來(lái)做了一次試驗(yàn)，分別采用Ajax和傳統(tǒng)的form提交的模式來(lái)刪除一條數(shù)據(jù)……給我們的調(diào)試帶來(lái)了很大的困難。
<5>.違背URL和資源定位的初衷。
例如，我給你一個(gè)URL地址，如果采用了Ajax技術(shù)，也許你在該URL地址下面看到的和我在這個(gè)URL地址下看到的內(nèi)容是不同的。這個(gè)和資源定位的初衷是相背離的。
<6>.AJAX不能很好支持移動(dòng)設(shè)備。
一些手持設(shè)備（如手機(jī)、PDA等）現(xiàn)在還不能很好的支持Ajax，比如說(shuō)我們?cè)谑謾C(jī)的瀏覽器上打開(kāi)采用Ajax技術(shù)的網(wǎng)站時(shí)，它目前是不支持的。
<7>.客戶端過(guò)肥，太多客戶端代碼造成開(kāi)發(fā)上的成本。
編寫(xiě)復(fù)雜、容易出錯(cuò) ；冗余代碼比較多（層層包含js文件是AJAX的通病，再加上以往的很多服務(wù)端代碼現(xiàn)在放到了客戶端）；破壞了Web的原有標(biāo)準(zhǔn)。
AJAX注意點(diǎn)及適用和不適用場(chǎng)景：
(1).注意點(diǎn)
Ajax 開(kāi)發(fā)時(shí)，網(wǎng)絡(luò)延遲——即用戶發(fā)出請(qǐng)求到服務(wù)器發(fā)出響應(yīng)之間的間隔——需要慎重考慮。不給予用戶明確的回應(yīng)，沒(méi)有恰當(dāng)?shù)念A(yù)讀數(shù)據(jù)，或者對(duì) XMLHttpRequest的不恰當(dāng)處理，都會(huì)使用戶感到延遲，這是用戶不希望看到的，也是他們無(wú)法理解的。通常的解決方案是，使用一個(gè)可視化的組件來(lái) 告訴用戶系統(tǒng)正在進(jìn)行后臺(tái)操作并且正在讀取數(shù)據(jù)和內(nèi)容。
(2).Ajax適用場(chǎng)景
<1>.表單驅(qū)動(dòng)的交互
<2>.深層次的樹(shù)的導(dǎo)航
<3>.快速的用戶與用戶間的交流響應(yīng)
<4>.類(lèi)似投票、yes/no等無(wú)關(guān)痛癢的場(chǎng)景
<5>.對(duì)數(shù)據(jù)進(jìn)行過(guò)濾和操縱相關(guān)數(shù)據(jù)的場(chǎng)景
<6>.普通的文本輸入提示和自動(dòng)完成的場(chǎng)景
(3).Ajax不適用場(chǎng)景
<1>.部分簡(jiǎn)單的表單
<2>.搜索
<3>.基本的導(dǎo)航
<4>.替換大量的文本
<5>.對(duì)呈現(xiàn)的操縱
15.peomise
Promise?異步編程的解決方案
Promise是ES6新增的異步編程的解決方案，它有三種狀態(tài)分別是pending進(jìn)行中、resolved已完成、rejected已失敗。
Promise可以鏈?zhǔn)秸{(diào)用，避免層層嵌套，異步操作更加容易方便，提升代碼可讀性。
Promise一旦創(chuàng)建就不可以取消，一旦在resolved與rejected中確立一種狀態(tài)，就不可以再發(fā)生改變
