Jsonp跨域請求

2024-04-27 15:18:50

字體：大中小

來源：轉載

供稿：網友

一、前言

jsonp之前寫個ssm項目時，使用到過，但是只是過了一遍，最近學習一些前端的東西，又涉及了這方面的只是，于是準備細細學一下。

二、jsonp的理解

在談什么是jsonp之前，我們需要知道一個名詞：同源策略

同源策略

如果協議，端口（如果指定了一個）和主機對于兩個頁面是相同的，則兩個頁面具有相同的源。

下面給出了相對http://store.company.com/dir/page.html同源檢測的示例:

http://store.company.com/dir2/other.html 成功 dir2/other.html http://store.company.com/dir/inner/another.html 成功 dir/inner/another.html https://store.company.com/secure.html 失敗不同的協議 ( https ) http://store.company.com:81/dir/etc.html 失敗不同的端口 ( 81 ) http://news.company.com/dir/other.html 失敗不同的主機 ( news )

怎樣的兩個源算是兩個不同的源呢？

ip相同，端口不同ip不同，端口相同

ip不同，端口不同

注意：ip和端口都相同而后面的路徑不同的話是同源

基于安全的原因，瀏覽器是存在同源策略這個機制的，同源策略阻止從一個源加載的文檔或腳本獲取或設置另一個源加載的文檔的屬性。

而在我們使用Ajax請求不同源的數據時是不能成功的！！！這也就是跨域問題了。這個時候我們就需要使用jsonp了。

jsonp

談到jsonp，我們首先要知道它不是一個設計模式，還有就是不是一個語言格式（和json沒啥關系）。它只是一種解決跨域請求的方法。就一個例子來更加深刻理解jsonp

三、簡單jsonp的例子

首先這個jsonp名不用管，只是一個函數，用來我們實現跨域請求的，我們可以看第一個參數，是一個豆瓣的api，和我本機肯定不是同源的。正常要想請求到數據肯定是會報錯的。而這個 $jsonp名不用管，只是一個函數，用來我們實現跨域請求的，我們可以看第一個參數，是一個豆瓣的api，和我本機肯定不是同源的。正常要想請求到數據肯定是會報錯的。而這個$ jsonp就是需要我們實現的。

/** * 手寫跨域組件 */(function(window, document, undefined) { var jsonp = function(url, data, callback) { var cbName = 'my_json_cb_' + Math.random().toString().replace('.', ''); window[cbName] = callback; //1、將data轉換為url字符串 var queryString = url.indexOf('?') == -1 ? '?' : '&'; for (var key in data) { queryString += key + '=' + data[key] + '&'; } queryString += 'callback=' + cbName; var scriptElement = document.createElement('script'); scriptElement.src = url + queryString; document.body.appendChild(scriptElement); }; // 全局使用 window.$jsonp = jsonp;})(window, document)

這個jsonp函數至少要接受兩個參數：分別是url和回調函數，我這里傳了三個來限制了獲取數據的多少。

可以看出，主要是通過創建一個script標簽來實現的。在script的src屬性是添加上參數url。不過在添加url之前，我們需要對url做一個處理。也就是將回調函數添加上去。最后，將script添加到body上，頁面一初始化就加載數據并且執行這個回調了。這樣就解決了跨域請求。

跨域的標簽： script、img、iframe、link。不過我們最常用的是script，因為其它幾個或多或少都有點小問題或者麻煩。