jsonp原理及同源策略

時間 2019-11-20

標籤 jsonp 原理同源策略欄目 JSON 简体版

原文原文鏈接

【我的學習筆記，若有問題還請前輩糾正】javascript

jsonp 是用來跨域讀取數據的，爲何從不一樣的域訪問數據要用jsop呢？這源於一個著名的安全策略--同源策略，即：php

　　協議、端口號、域名相同html

　　舉例說明：http://www.myweb.com:8080/demo/index.html [協議：http:// 端口：8080 域名：www.myweb.com]java

　　http://www.myweb.com:8080/src/list.html [同源]web

　　http://www.myweb.com/src/list.html [不一樣源：端口不一樣]json

　　http://myweb.com:8080/src/list.html [不一樣源：域名不一樣]跨域

同源策略會限制安全

　　1.cookie、localStorage、indexDB沒法讀取，服務器

　　2.DOM沒法得到，cookie

　　3.Ajax請求不能發送。

這樣作的好處在於保護了用戶信息安全。爲了既保護用戶信息安全，又規避跨域（不一樣源則爲跨域）限制，所以須要使用這種特殊的技術--jsonp.

jsonp利用script標籤具備跨域能力的特色，容許用戶經過script的src屬性向服務器發送請求，並傳遞一個函數名做爲參數，服務端返回數據時會將這個callback函數做爲函數名包裹住從服務端接收的json數據，客戶端會按照定義好的方式處理數據。舉例以下：

<!DOCTYPE html>

<html>

<head>

<title>JSONP 實例</title>

</head>

<body>

function callbackFunction(result, methodName) {

　　var html = '<ul>';

　　for(var i = 0; i < result.length; i++) {

　　　　html += '<li>' + result[i] + '</li>';

　　}

　　html += '</ul>';

　　document.getElementById('list').innerHTML = html;

}

</script>

</body>

</html>

以上，callbackFunction函數名做爲參數傳遞給服務器，服務器返回數據形式爲:callbackFunction(["list1","list2"]),顯示結果會按照 callbackFunction()函數來處理。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。