Web - API (事件,Ajax,存儲(chǔ))-面試題

一、事件

1.編寫(xiě)一個(gè)通用的事件監(jiān)聽(tīng)函數(shù)

 1 function bindEvent(elem, type, selector, fn) {
 2     if(fn == null) {
 3         fn = selector
 4         selector = null
 5     }
 6     elem.addEventListener(type,function(e) {
 7         var target
 8         if(selector) {
 9             target = e.target
10             if(target.matches(selector)) {
11                 fn.call(target, e)
12             }
13         } else {
14             fn(e)
15         }
16     })
17 }

2.事件冒泡流程

1)DOM樹(shù)形結(jié)構(gòu)

2)事件冒泡

3)阻止冒泡

4)冒泡的應(yīng)用

3.對(duì)一個(gè)無(wú)限下拉加載圖片的頁(yè)面,如何給每一個(gè)圖片綁定事件?

使用代理

二、ajax

1.手動(dòng)編寫(xiě)一個(gè)ajax,不依賴第三方庫(kù)

(無(wú)論什么復(fù)雜的ajax的封裝,都是依照這個(gè)原理形式做的)

1 var xhr = new XMLHttpRequest()
2 xhr.open("GET","/api",false)  
3 xhr.onreadystatechange = function(){
4     if(xhr.readyState == 4 && xhr.status == 200) {
5         alert(xhr.responseText)
6     }
7 }
8 xhr.send(null)

<pre>readyState == 0 ?。ㄎ闯跏蓟€沒(méi)調(diào)用send()方法
         1  (載入),已調(diào)用send()方法,正在發(fā)送
         2 ?。ㄝd入完成),send()方法執(zhí)行完成,已經(jīng)接受到全部形影內(nèi)容
         3 ?。ń换ィ?,正在解析相應(yīng)內(nèi)容
         4 ?。ㄍ瓿桑?,響應(yīng)內(nèi)容解析完成,可以在客戶端調(diào)用</pre>

status == 2xx - 表示成功處理請(qǐng)求,如200

3xx - 需要重定向,瀏覽器直接跳轉(zhuǎn)

4xx - 客戶端請(qǐng)求錯(cuò)誤,如404

5xx - 服務(wù)器端錯(cuò)誤,如504(服務(wù)端連接數(shù)據(jù)庫(kù)超時(shí))

2.跨域

有三個(gè)標(biāo)簽允許跨域加載資源:<img src="xxx" > <link href="xxx" /> <script src="xxx"></script>

解決跨域方法:

1)JSONP實(shí)現(xiàn)原理

服務(wù)器可以根據(jù)請(qǐng)求動(dòng)態(tài)生成一個(gè)不存在的文件返回

window.callback = function(data) {

//這是我們跨域得到信息

console.log(data)

}

2)服務(wù)器端設(shè)置http header

另外一個(gè)解決跨域的解決方法需要服務(wù)器來(lái)完成

1 //不同的后盾語(yǔ)言的寫(xiě)法可能不一樣
2 
3 //第二個(gè)參數(shù)填寫(xiě)允許跨域的域名城,不建議直接寫(xiě)*
4 response.setHeader("Access-Control-Allow-Origin", "http://a.com,http://b.com");
5 response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
6 response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
7 
8 //接受跨域的cookie
9 response.setHeader("Access-Control-Allow-Credentials", "true");

三、存儲(chǔ)

1.cookie,sessionStorage和localStorage的區(qū)別

1)容量:cookie只有4kb,而sessionStorage和localStorage最大容量5M

2)是否會(huì)攜帶到ajax中:cookie每次都會(huì)帶,而sessionStorage和localStorage不會(huì)

3)API易用性:cookie要自己封裝且較麻煩,而sessionStorage和localStorage,getItem,setItem基本上就能搞定

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Web存儲(chǔ)API 對(duì)于任何程序來(lái)說(shuō),能夠?qū)崿F(xiàn)數(shù)據(jù)存儲(chǔ)是必備功能之一,并且在需要的時(shí)候能夠提供數(shù)據(jù)。但在過(guò)去的Web...
    云音流閱讀 1,092評(píng)論 0 1
  • web存儲(chǔ)API總覽 對(duì)于任何程序來(lái)說(shuō),能夠?qū)崿F(xiàn)數(shù)據(jù)存儲(chǔ)是必備功能之一,并且在需要的時(shí)候能夠提供數(shù)據(jù)。但在過(guò)去的W...
    Alone灬旅途閱讀 971評(píng)論 0 1
  • web存儲(chǔ)API 對(duì)于任何程序來(lái)說(shuō),能夠?qū)崿F(xiàn)數(shù)據(jù)存儲(chǔ)是必備功能之一,并且在需要的時(shí)候能夠提供數(shù)據(jù)。但在過(guò)去的Web...
    不住海邊也喜歡浪閱讀 559評(píng)論 0 0
  • 說(shuō)到web數(shù)據(jù)存儲(chǔ),我們可能會(huì)想到cookie,cookie畢竟存放的數(shù)據(jù)有限,在一個(gè)大數(shù)據(jù)時(shí)代,cookie已經(jīng)...
    lililifeng閱讀 1,021評(píng)論 0 0
  • 1.編寫(xiě)一個(gè)通用的事件監(jiān)聽(tīng)函數(shù) 2.描述事件冒泡流程 3.對(duì)于一個(gè)無(wú)限下拉加載圖片的頁(yè)面,如何給每一個(gè)圖片綁定事件...
    飛菲fly閱讀 344評(píng)論 0 0

友情鏈接更多精彩內(nèi)容