jsonp解決跨域(案例 動態獲取百度資料)

2021-09-25 13:18:56 字數 812 閱讀 3061

jsonp了解一下,只要你看了,相信你就能懂!

首先我們先簡單回憶一下ajax,ajax我們都不陌生,經常用,ajax的優點是不重新整理整個頁面從後台獲取資料,但是也有缺點啊,不能跨域啊!但是好多時候我們還就得跨域請求資料。所以jsonp出場了。

必須清楚的一點,json和jsonp是沒有任何關係的。jsonp是一種可以跨域獲取資料的手段。

jsonp實現原理:動態建立script標籤,在全域性設定乙個函式來接收script標籤引進來的函式呼叫,然後在全域性這個函式中接收資料。

接下來。。。**演示

// input框輸入內容,下面li裡會顯示相對應的資料

// js** 

var oinp = document.queryselector('#inp');

var oul = document.queryselector('.ul');

function show(json) { // 全域性函式show

console.log(json.s); // 這個s 不知道是啥? 先別管。繼續往下看

oul.innerhtml = ''; // 每次載入清空原先的

for(var i=0; i最後我們看看script標籤引入的那串src怎麼擷取到的。。。

script.src = ''+inpval+'&

今天太累了,改天繼續。。。

想知道的朋友點個關注唄,下次持續更新。。。嘿嘿

JSONP解決跨域詳解

由於ajax的是通過xmlhttprequest物件請求資料的,在同源的條件 協議,網域名稱,埠號都相同 下,這沒什麼問題,但在不同源的情況下,瀏覽器是不允許xmlhttprequest物件跨域請求的,所以便提出很多實現跨域的方案,如iframe,jsonp等方法,但jsonp最常用,其實jquer...

jsonp解決ajax跨域問題

利用jsonp解決ajax跨域問題 至於success裡面的操作可以忽略 某工程下ajax請求 var isvisible true function getlog var startpage data.startpage var endpage data.endpage 拼接 導航 按鈕 和 資料...

解決跨域問題,聊聊JSONP

跨域這個問題在工作偶爾能夠碰到,但是一旦跨域傳送資料就成了問題,所以就用到了jsonp,今天我們來聊聊jsonp。jsonp是一種為了解決跨域的資料交換問題,從而衍生出來的資料交換協議。因為瀏覽器的 同源策略 也就是瀏覽器限制指令碼程式只能和同協議 同網域名稱 同埠的指令碼進行互動,但是在資料交換的...