課程
/前端開發(fā)
/JavaScript
/搜索框制作
用JS怎么實現(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實現(xiàn)JSONP：
addEvent('search-input-text', 'keyup', function() {
? ? ? ? var searchText = getDOM("search-input-text").value;
? ? ? ? //供jsonp服務的url地址（不管是什么類型的地址，最終生成的返回值都是一段javascript代碼）
? ? ? ? //其實參數(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標簽加入body，此時調用開始 ? ? ? ?
? ? ? ? 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.第三方服務器端添加header('Access-Control-Allow-Origin:*');
? ?2.通過跨域訪問資源的標簽：
? a標簽 ?img標簽 ? iframe標簽 ? link標簽
? script標簽
? 3.服務器代理的方式:curl
curl : 相當于是服務器端的 XMLHttpRequest() （實際 curl 比 XMLHttpRequest（）要強大太多了）。
jsonp : 在遠程服務器上輸出一個調用函數(shù)的字符串代碼，利用script加載文本信息會自動解析的特性來將遠程服務器輸出的字符串形式函數(shù)調用直接解析成函數(shù)執(zhí)行語句，從而實現(xiàn)在遠程服務器上調用本地函數(shù)的目的。
? 只要能在遠程服務器上調用到本地函數(shù)，就可以把遠程服務器的數(shù)據(jù)，以參數(shù)形式傳送到本地頁面中。
?
JSON.parse('{"name":"xiaomi"}'):JSON.parse()
舉報
本課程從簡入深講解搜索框的制作，學習JQ與JS實現(xiàn)Ajax技術的不同點
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關注慕課網(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實現(xiàn)JSONP：
addEvent('search-input-text', 'keyup', function() {
? ? ? ? var searchText = getDOM("search-input-text").value;
? ? ? ? //供jsonp服務的url地址（不管是什么類型的地址，最終生成的返回值都是一段javascript代碼）
? ? ? ? //其實參數(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標簽加入body，此時調用開始 ? ? ? ?
? ? ? ? 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.第三方服務器端添加header('Access-Control-Allow-Origin:*');
? ?2.通過跨域訪問資源的標簽：
? a標簽 ?img標簽 ? iframe標簽 ? link標簽
? script標簽
? 3.服務器代理的方式:curl
curl : 相當于是服務器端的 XMLHttpRequest() （實際 curl 比 XMLHttpRequest（）要強大太多了）。
2016-09-02
jsonp : 在遠程服務器上輸出一個調用函數(shù)的字符串代碼，利用script加載文本信息會自動解析的特性來將遠程服務器輸出的字符串形式函數(shù)調用直接解析成函數(shù)執(zhí)行語句，從而實現(xiàn)在遠程服務器上調用本地函數(shù)的目的。
? 只要能在遠程服務器上調用到本地函數(shù)，就可以把遠程服務器的數(shù)據(jù)，以參數(shù)形式傳送到本地頁面中。
?
2016-08-20
JSON.parse('{"name":"xiaomi"}'):JSON.parse()