某一天 我只是想模擬實現(xiàn)一下百度下拉搜索 結(jié)果發(fā)現(xiàn)小小的一點代碼 居然可以有這么多的知識點 涉及到JSONP 以及 事件委托 還有如何實現(xiàn)在點擊頁面其他地方的時候?qū)崿F(xiàn)下拉框的收起...生命在于折騰
(●'?'●) 不用后臺請求 不用ajax請求 直接使用百度的jsonp請求地址進(jìn)行請求就可以啦~~~(●'?'●)
1 先看結(jié)果
2 涉及知識點
- JSONP 是什么？??
- 事件委托的使用。??
- 點擊其他位置實現(xiàn)下拉框收起。??
3 知識點詳解
- JSONP
我們都知道 在使用ajax請求的時候 跨域這種情況是要另外處理的 那JSONP就是可以解決這種問題的。具體是使用什么原理呢？你想一下，平時我們在頁面中引入script標(biāo)簽之后，script標(biāo)簽也有相關(guān)的url發(fā)起請求，而且可以請求任何有效地址的數(shù)據(jù)，正是因為這個漏洞，我們可以發(fā)起跨域請求。那么機智的程序員們，就這么想，我可不可以將需要用到的JSON 數(shù)據(jù)填充回來.所以就有了JSONP。
JSONP執(zhí)行之后，會返回包含json編碼數(shù)據(jù)的響應(yīng)體，也就是會自動執(zhí)行。
當(dāng)通過<script>元素調(diào)用數(shù)據(jù)時，響應(yīng)內(nèi)容必須是用js函數(shù)名和圓括號包裹起來，而不是發(fā)這樣的json數(shù)據(jù)。
[1,2,{"name": "katherine"}]
它會發(fā)送一個這樣被js包裹后的JSON響應(yīng)
handleResponse (
[1,2,{"name": "katherine"}]
)
所以我們可以事先在js代碼中定義一個類似handleResponse的函數(shù)，這樣我們就可以在響應(yīng)獲取到這些JSON響應(yīng)之后，通過事先定義好的函數(shù)，對傳過來的數(shù)據(jù)為所欲為了。
其實說簡單一點，JSONP就是在你向頁面填充某個url的<script>標(biāo)簽之后，返回一個可以執(zhí)行的函數(shù)名，同時是有帶參數(shù)的函數(shù)名。所以只要我們事先定義好這個函數(shù)的相關(guān)操作就可以了。
當(dāng)然，如果這個函數(shù)名是定死的話，那就不好玩了，所以一般支持JSONP的服務(wù)不會強制指定客戶端必須實現(xiàn)的回調(diào)函數(shù)名，如果每次函數(shù)名都一定是handleResponse,豈不是很受限。所以，一般會用查詢參數(shù)的值，允許客戶端指定一個函數(shù)名，然后使用函數(shù)名去填充響應(yīng)。也就是說我們在這個script標(biāo)簽的url給定地址中填充類似 ？cb=callbackname來告訴服務(wù)端，我們這邊客戶端需要什么樣的函數(shù)名。
這里推薦一個覺得講得很好的地址：談?wù)凧SON和JSONP
后面我在實際應(yīng)用中也會說到。
- 事件委托
在這個例子中，需要實現(xiàn)一個就是，當(dāng)有下拉熱詞出現(xiàn)的時候，其實是包裹來一個ul內(nèi)部的，而這些填充的很多的li，每一個li都需要綁定一個click事件，用來干什么呢？當(dāng)點擊其中一個li的時候，需要將這個li的內(nèi)容填充到搜索輸入框。
因為這些li是動態(tài)生成的，不可能每一個li都去綁定點擊事件。而且這樣對于性能消耗也很大，所以，可以使用事件冒泡的特點，將點擊件綁定在父級元素ul上。
然后通過事件的屬性，event.target來獲取當(dāng)前真正被點擊的元素，然后就可以獲取這個被點擊元素的內(nèi)容啦。??
因為篇幅有限 我也沒有講得很詳細(xì) 傳送門： 事件委托和事件代理
4 實際代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<body>
<div id="search-arr"><input type="text" id="searchInput" type="search" placeholder="search"><ul id="selectItem"></ul></div>
</body>
</head>
</html>
<script>
// 執(zhí)行JSONP操作的函數(shù)，設(shè)置添加script.
// 這個看不懂的話 建議參考一下js權(quán)威指南 第507頁
function getJSON (url,callback) {
// 因為百度的那個請求的地址是 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=迷糊查詢參數(shù)名&cb=回調(diào)函數(shù)名
// 所以這里會每次給getJSON 函數(shù)添加一個
var cbnum = "cb" + getJSON.counter++ // 假設(shè)這里就是cb1
var cbname = "getJSON." + cbnum // 這里的函數(shù)名字就是 getJSON.cb1
url+="&cb="+ cbname // 將這個回調(diào)函數(shù)名添加 到url后面
var script = document.createElement("script") // 創(chuàng)建一個script標(biāo)簽
getJSON[cbnum] = function(response) { // 給這個getJSON函數(shù)添加一個getJSON.cb1的函數(shù)屬性。這也就是我們的回調(diào)函數(shù)
try {
callbackfn(response) // 對獲取到的response數(shù)據(jù)進(jìn)行處理的回調(diào)函數(shù)
}
finally { // 記得哦 執(zhí)行完函數(shù)之后 要刪除這個添加的屬性 同時刪除這個script標(biāo)簽 不然查詢次數(shù)增加之后 會越來越多
delete getJSON[cbname]
script.parentNode.removeChild(script)
}
}
script.src = url // 添加url屬性
document.body.appendChild(script)
}
getJSON.counter = 0 // 初始化一個counter的值
// 對獲取到的JSONP數(shù)據(jù)進(jìn)行處理的回調(diào)函數(shù)
function callbackfn(data) {
var selectList = document.getElementById("selectItem")
// 可以通過視頻中看到，數(shù)據(jù)的結(jié)構(gòu)中的關(guān)鍵字存在data.s中
if (data.s.length !== 0) {
let newList = data.s.map((item) => `<li><a target="_blank" >${item}</a></li>`)
let newStr = newList.join('')
selectList.innerHTML = newStr
selectList.style.display = 'block'
}
}
window.onload = function () {
var target = document.getElementById("searchInput")
var selectList = document.getElementById("selectItem")
AutoCompleteInput()
// 定義一個隱藏下拉單的函數(shù)
function hideList (selectList) {
selectList.innerHTML = ''
selectList.style.display = 'none'
}
// 對輸入框進(jìn)行監(jiān)聽 數(shù)據(jù)變化就執(zhí)行g(shù)etJSONP函數(shù)，請求新的關(guān)鍵字
function AutoCompleteInput() {
target.addEventListener('input', () => {
let oldValue = ''
let newValue = target.value
if (newValue !== '' && newValue !== oldValue) {
getJSON('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+(newValue))
} else {
hideList(selectList)
}
oldValue = target.value
})
// 點擊除了下拉框和輸入框之外的其他地方 要隱藏下拉框
document.addEventListener('click', (e) => {
// 這里使用了contains，contaisn可以知道某個元素是否是其子元素
if(selectList.contains(e.target)||e.target.getAttribute('id') !== 'searchInput') {
hideList(selectList)
}
})
target.addEventListener('keydown', () => {
hideList(selectList)
})
// 事件代理部分代碼
selectList.addEventListener('click', (e) => {
e.preventDefault() // 我為了防止點擊之后跳轉(zhuǎn)到搜索頁面，所以寫了這句，你可以去掉，就可以跳轉(zhuǎn)到搜索結(jié)果頁面了
let selectValue = ''
if (e.target && e.target.nodeName == "A") {
selectValue = e.target.innerHTML
} else {
selectValue = e.target.getElementByTagName('a').innerHTML
}
target.value = selectValue
})
}
}
</script>
<style>
* {
padding:0;
margin:0;
box-sizing:border-box;
}
#search-arr {
position:relative;
width:200px;
margin:50px auto;
}
#searchInput {
outline: none;
width:200px;
height:30px;
border:1px solid rgba(109,207,246,.5);
border-radius:25px;
padding:10px 10px 10px 20px;
background:#ededed;
transition:all ease .4s;
}
#searchInput:focus {
/* width:250px; */
box-shadow: 0 0 5px rgba(109,207,246,.5);
background:white;
}
ul#selectItem {
display: none;
position:absolute;
top:31px;
width:100%;
border:1px solid gray;
border-top:none;
}
li {
width:100%;
list-style-type:none;
background:white;
color:black;
/* padding:10px; */
cursor:pointer;
}
li:hover {
background: #ededed;
}
a {
display: inline-block;
text-decoration: none;
color:black;
width:100%;
padding:1px 5px;
}
</style>
5 遺留問題
1 JSONP請求的錯誤處理： 我想了這個問題，像我們在執(zhí)行ajax請求的時候，是可以有相應(yīng)狀態(tài)碼告訴我們發(fā)生錯誤的，404啊，之類的。但是這個JSONP請求我們要怎么知道錯誤呢？怎么處理錯誤呢？
2 JSONP請求之后動態(tài)添加script標(biāo)簽，需要移除這些新添加的script標(biāo)簽，那是不是也會有漏洞或者會有問題呢？
??然后我驚訝地發(fā)現(xiàn)，有人的問題和我一樣，我就。。。。 遺留問題
我看了答案還不是很理解。
會的歡迎評論喲~~~??
