同源策略及びドメイン間解決方法JSONP
10348 ワード
どうげんせんりゃく
ブラウザのセキュリティメカニズムで、ソースはプロトコル、ドメイン名、ポートの総称を指し、異なるソースではブラウザはデータを受信しません.
ドメイン間問題の解決方法
Ajaxの実行は同源ポリシーによって制限されますが、scriptラベルは同源ポリシーの影響を受けません.この特徴を利用して、scriptに関数を書いて、パラメータをデータとして受信することができます.
scriptラベルを動的に作成する
JSONPはコールバック関数とデータの2つの部分から構成されています.動的scriptにより、他のドメインからコードをロードして実行
このようなコードは,入力傍受のたびにgetList()メソッドをトリガして動的scriptタグを確立し,要求されたscriptタグをコールバック関数getData()に渡して処理する.
ブラウザのセキュリティメカニズムで、ソースはプロトコル、ドメイン名、ポートの総称を指し、異なるソースではブラウザはデータを受信しません.
ドメイン間問題の解決方法
Ajaxの実行は同源ポリシーによって制限されますが、scriptラベルは同源ポリシーの影響を受けません.この特徴を利用して、scriptに関数を書いて、パラメータをデータとして受信することができます.
scriptラベルを動的に作成する
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<input type="text">
<ul>ul>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">script>
<script>
function getData(data) {
var script = document.querySelector('#jsonp');
script.parentNode.removeChild(script)
$('ul').html('');
for(var i = 0; i< data.s.length;i++){
$('' + data.s[i] + '').appendTo('ul');
}
}
function getList(wd) {
var script = document.createElement('script');
script.id = 'jsonp';
//cb = callback , getData();
//wd =
script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=getData&wd='+wd;
document.body.appendChild(script)
}
$('input').keyup(function () {
var wd = $(this).val();
getList(wd)
})
script>
body>
html>
JSONPはコールバック関数とデータの2つの部分から構成されています.動的scriptにより、他のドメインからコードをロードして実行
このようなコードは,入力傍受のたびにgetList()メソッドをトリガして動的scriptタグを確立し,要求されたscriptタグをコールバック関数getData()に渡して処理する.