課程
/前端開發(fā)
/JavaScript
/搜索框制作
用JS怎么實(shí)現(xiàn)JSONP跨域請求??？求代碼和講解
2016-08-17
源自：搜索框制作 2-8
正在回答
這是用jsonp訪問豆瓣圖書公開api
<!DOCTYPE html>
<html>
<head>
? <meta charset="UTF-8">
? <title>豆瓣圖書</title>
</head>
<body>
<script>
function show( data ){
? console.log( data );
}
</script>
<script src="https://api.douban.com/v2/book/4866934?callback=show"></script>
</body>
</html>
原生JS實(shí)現(xiàn)JSONP：
addEvent('search-input-text', 'keyup', function() {
? ? ? ? var searchText = getDOM("search-input-text").value;
? ? ? ? //供jsonp服務(wù)的url地址（不管是什么類型的地址，最終生成的返回值都是一段javascript代碼）
? ? ? ? //其實(shí)參數(shù)都是前端和后臺程序員規(guī)定的，前端傳過去，后端判斷獲取即可。
? ? ? ? var url = "http://api.bing.com/qsonhs.aspx?type=cb&cb=jsonpcallback&q=" + searchText;
? ? ? ? var script = document.createElement('script');
? ? ? ? script.setAttribute('src', url);
? ? ? ? // 把script標(biāo)簽加入body，此時調(diào)用開始 ? ? ? ?
? ? ? ? document.getElementsByTagName('body')[0].appendChild(script);
? ? ? ? getDOM('search-suggest').style.top = getElementTop(getDOM('search-form')) + 38 + 'px';
? ? ? ? getDOM('search-suggest').style.left = getElementLeft(getDOM('search-form')) + 'px';
? ? ? ? getDOM('search-suggest').style.position = 'absolute';
? ? ? ? getDOM('search-suggest').style.display = 'block'; ? ? ? ?
? ? });
? ? function jsonpcallback(data) {
? ? ? ? var data = data.AS.Results[0].Suggests;
? ? ? ? var html = "";
? ? ? ? console.log(data);
? ? ? ? for (var i=0;i<data.length;i++) {
? ? ? ? ? ? html += "<li>" + data[i].Txt + "</li>"
? ? ? ? }
? ? ? ? getDOM('search-result').innerHTML = html;
? ? };
跨域請求三種方法:
? ?1.第三方服務(wù)器端添加header('Access-Control-Allow-Origin:*');
? ?2.通過跨域訪問資源的標(biāo)簽：
? a標(biāo)簽 ?img標(biāo)簽 ? iframe標(biāo)簽 ? link標(biāo)簽
? script標(biāo)簽
? 3.服務(wù)器代理的方式:curl
curl : 相當(dāng)于是服務(wù)器端的 XMLHttpRequest() （實(shí)際 curl 比 XMLHttpRequest（）要強(qiáng)大太多了）。
jsonp : 在遠(yuǎn)程服務(wù)器上輸出一個調(diào)用函數(shù)的字符串代碼，利用script加載文本信息會自動解析的特性來將遠(yuǎn)程服務(wù)器輸出的字符串形式函數(shù)調(diào)用直接解析成函數(shù)執(zhí)行語句，從而實(shí)現(xiàn)在遠(yuǎn)程服務(wù)器上調(diào)用本地函數(shù)的目的。
? 只要能在遠(yuǎn)程服務(wù)器上調(diào)用到本地函數(shù)，就可以把遠(yuǎn)程服務(wù)器的數(shù)據(jù)，以參數(shù)形式傳送到本地頁面中。
?
JSON.parse('{"name":"xiaomi"}'):JSON.parse()
舉報
本課程從簡入深講解搜索框的制作，學(xué)習(xí)JQ與JS實(shí)現(xiàn)Ajax技術(shù)的不同點(diǎn)
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2016-08-30
這是用jsonp訪問豆瓣圖書公開api
<!DOCTYPE html>
<html>
<head>
? <meta charset="UTF-8">
? <title>豆瓣圖書</title>
</head>
<body>
<script>
function show( data ){
? console.log( data );
}
</script>
<script src="https://api.douban.com/v2/book/4866934?callback=show"></script>
</body>
</html>
2016-11-09
原生JS實(shí)現(xiàn)JSONP：
addEvent('search-input-text', 'keyup', function() {
? ? ? ? var searchText = getDOM("search-input-text").value;
? ? ? ? //供jsonp服務(wù)的url地址（不管是什么類型的地址，最終生成的返回值都是一段javascript代碼）
? ? ? ? //其實(shí)參數(shù)都是前端和后臺程序員規(guī)定的，前端傳過去，后端判斷獲取即可。
? ? ? ? var url = "http://api.bing.com/qsonhs.aspx?type=cb&cb=jsonpcallback&q=" + searchText;
? ? ? ? var script = document.createElement('script');
? ? ? ? script.setAttribute('src', url);
? ? ? ? // 把script標(biāo)簽加入body，此時調(diào)用開始 ? ? ? ?
? ? ? ? document.getElementsByTagName('body')[0].appendChild(script);
? ? ? ? getDOM('search-suggest').style.top = getElementTop(getDOM('search-form')) + 38 + 'px';
? ? ? ? getDOM('search-suggest').style.left = getElementLeft(getDOM('search-form')) + 'px';
? ? ? ? getDOM('search-suggest').style.position = 'absolute';
? ? ? ? getDOM('search-suggest').style.display = 'block'; ? ? ? ?
? ? });
? ? function jsonpcallback(data) {
? ? ? ? var data = data.AS.Results[0].Suggests;
? ? ? ? var html = "";
? ? ? ? console.log(data);
? ? ? ? var html = "";
? ? ? ? for (var i=0;i<data.length;i++) {
? ? ? ? ? ? html += "<li>" + data[i].Txt + "</li>"
? ? ? ? }
? ? ? ? getDOM('search-result').innerHTML = html;
? ? };
2016-09-02
跨域請求三種方法:
? ?1.第三方服務(wù)器端添加header('Access-Control-Allow-Origin:*');
? ?2.通過跨域訪問資源的標(biāo)簽：
? a標(biāo)簽 ?img標(biāo)簽 ? iframe標(biāo)簽 ? link標(biāo)簽
? script標(biāo)簽
? 3.服務(wù)器代理的方式:curl
curl : 相當(dāng)于是服務(wù)器端的 XMLHttpRequest() （實(shí)際 curl 比 XMLHttpRequest（）要強(qiáng)大太多了）。
2016-09-02
jsonp : 在遠(yuǎn)程服務(wù)器上輸出一個調(diào)用函數(shù)的字符串代碼，利用script加載文本信息會自動解析的特性來將遠(yuǎn)程服務(wù)器輸出的字符串形式函數(shù)調(diào)用直接解析成函數(shù)執(zhí)行語句，從而實(shí)現(xiàn)在遠(yuǎn)程服務(wù)器上調(diào)用本地函數(shù)的目的。
? 只要能在遠(yuǎn)程服務(wù)器上調(diào)用到本地函數(shù)，就可以把遠(yuǎn)程服務(wù)器的數(shù)據(jù)，以參數(shù)形式傳送到本地頁面中。
?
2016-08-20
JSON.parse('{"name":"xiaomi"}'):JSON.parse()