同源策略
- 限制：Ajax
- 向別的網站發Ajax請求，在拿回數據的時候，已經在拿回來的時候，發送給瀏覽器，瀏覽器阻止了，請求已經發送給服務器並執行了
- 不限制：有src屬性的，如script 標籤
- 限制：Ajax
但是在開發過程中有這樣的需求：向其他網站發送Http請求。
- 瀏覽器直接發送請求【考慮同源】
- 瀏覽器-> 服務端 -> 發送請求
瀏覽器直接發送請求【考慮同源】
# jsonp.html
<body>
<input type="button" value="獲取用戶列表" onclick="getUsers();" />
<ul id="user_lsit"></ul>
<script>
// Ajax 請求有限制，同源策略
/*
function getUsers() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
var content = xhr.responseText;
console.log(content)
}
};
xhr.open('GET','http://www.s4.com:8001/users/?callback=bbb');
xhr.send();
}
function bbb(arg) {
console.log(arg)
}
*/
// jsonp
function getUsers() {
var tag = document.createElement('script');
tag.src = 'http://www.s4.com:8001/users/?callback=bbb';
document.head.appendChild(tag);
}
function bbb(arg) {
console.log(arg)
}
</script>
</body># 請求目標網站
# veiws.py
def users(request):
funcname = request.GET.get('callback')
print('請求來了')
user_list = [
'summer','spring','autumn'
]
user_list_str = json.dumps(user_list)
temp = '%s(%s)' % (funcname,user_list_str)
print(temp)
return HttpResponse(temp)
- jsonp要求：
- 1.客戶端
- tag.src = ‘http://www.s4.com:8001/users/?callback=bbb‘;
- function bbb(arg) { console.log(arg) }
- 2.服務端
- 獲取 funcname = request.GET.get(‘callback’)
- 返回 funcname(數據)
- 1.客戶端
- 用jQuery Ajax 來發送請求
<body>
<input type="button" value="獲取用戶列表" onclick="getUsers();" />
<ul id="user_lsit"></ul>
<script src="/static/jquery-3.2.1.js"></script>
<script>
function getUsers() {
$.ajax({
url: 'http://www.s4.com:8001/users/',
type: 'GET',
// 改用jsonp去發，改下面幾個參數，原用XMLHttpRequest。
dataType: 'JSONP',
jsonp: 'callback',
jsonpCallback: 'bbb'
})
}
function bbb(arg) {
console.log(arg)
}
</script>
</body>- 使用
使用：
1. 自己寫動態創建script
function getUsers(){
var tag = document.createElement('script');
tag.src = "http://www.s4.com:8001/users/?callback=bbb";
document.head.appendChild(tag);
}
2. jQuery
$.ajax({
url: 'http://www.s4.com:8001/users/',
type: 'GET',
dataType: 'JSONP',
jsonp: 'funcname',
jsonpCallback: 'bbb'
})
其他：
- 只能發GET請求
- 約定，客戶端服務端制定好規則
JSONP是一種技術，一種方式，目的解決跨域問題