js學習總結 同源與非同源 jsonp

2022-07-12 23:09:23 字數 1435 閱讀 4650

jsonp和ajax相同,都是客戶端向伺服器端傳送請求:給伺服器端傳遞內容 或者 從服務端獲取資料

ajax屬於同源策略

jsonp屬於非同源策略(跨域請求) ->實現跨域請求的方式有很多種,只不過jsonp是最常用的

區分同源和非同源:

當前頁面的位址 && 資料請求的介面位址

1)、協議

2)、網域名稱或者ip

3)、埠號

以上三部分完全相同屬於同源策略,我們使用ajax技術獲取資料;只要有乙個不一樣,就屬於非同源,我們一般使用jsonp獲取資料。

如果我們想要在本地檔案index.html中把本地的data.txt的內容獲取到,直接通過本地url位址就可以獲取到localhost:8080/data.txt

如果想請求本地之外的位址例如www.baidu.com,這就涉及的跨域了。

jsonp的原理:(jsonp請求一定需要對方的伺服器做支援才可以)

在script的世界中,沒有同源跨域這一說,只要你給我src屬性中的位址是乙個合法的位址,script標籤就可以把對應的內容請求回來。

jsonp就是利用了script的這個原理

1)、我們把需要請求資料的那個跨域的api資料介面的位址賦值給script的src

2)、把當前頁面中的某乙個函式名當做引數值傳遞給需要跨域請求資料的伺服器(url問號傳參:?callback=fn)

3)、伺服器接收到你的請求後,需要進行特殊的處理:把你傳遞進來的函式名和它需要給你的資料拼接成乙個字串 例如我們傳遞進去的函式名是fn,它準備好的資料是'fn()' ->我們傳遞的函式名(需要給我們的資料)

4)、最後伺服器把準備的資料通過協議返回給我們客戶端,客戶端發現其實就是讓我們的fn執行,而且還給fn傳遞了一堆的資料,那些資料就是我們想要的

**如下:

模擬後台jsonp處理**

if(pathname==="/getall"));

res.end(fnname+"("+con+")");

}

在jsonp中伺服器端返回給客戶端的資料一般都是json格式的字串

js學習筆記 079 同源策略

同源策略是對js 能夠操作哪些web內容的一條完整的安全限制。注意 指令碼本身的 和同源策略並不相關,相關的是指令碼所嵌入的文件 實際上,同源策略並非應用於不同源視窗中的所有物件的所有屬性。不過它應用到了其中的大多數屬性,尤其是對document物件的幾乎所有屬性。凡是包含另乙個伺服器中文件的視窗或...

js回顧之跨域 跨越瀏覽器的同源策略

今天來回顧一下跨域的三種方式 同源策略是瀏覽器不讓你請求別人家的伺服器 如果別人家的伺服器告訴瀏覽器,我允許這個網域名稱請求我,瀏覽器就管不著了,就可以正常請求了 header access control allow origin 允許哪些網域名稱請求我 header access control...

js學習總結

ps.第一次在掘金上寫文章,記錄我的學習歷程,這篇文章是對最近學習js的乙個總結,主要是手寫一些常見的功能函式以及10種常見排序演算法。1.jsonp解決跨域 常用功能 2.拖動 常用功能 3.分頁 常用功能 4.搜尋框 常用功能 5.超長截斷顯示省略號 常用功能 6.js手寫實現氣泡排序 常見面試...