同源策略及びドメイン間解決方法JSONP

10348 ワード

どうげんせんりゃく
ブラウザのセキュリティメカニズムで、ソースはプロトコル、ドメイン名、ポートの総称を指し、異なるソースではブラウザはデータを受信しません.
ドメイン間問題の解決方法
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()に渡して処理する.