Le principe de jsonp : Il s'agit d'utiliser la balise sans "vulnérabilités" inter-domaines pour atteindre l'objectif de communication avec un tiers. Lorsqu'une communication est requise, le script de. ce site Web crée une balise de script, une adresse Pointez vers l'adresse de l'API tierce </p> <p> et fournissez une fonction de rappel pour recevoir des données. Le tiers génère un package correspondant pour les données json, de sorte que le navigateur appellera le rappel (. ) et transmettez l'objet json analysé en tant que paramètre. . </p> <p>Le cœur de jsonp : </p> <p> Créez et ajoutez dynamiquement des balises de script pour appeler le script js fourni par le serveur. </p> <p>Pas grand chose d'autre à dire, il suffit d'aller voir le code : </p> <p>Code HTML ;</p> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><body>2 <input type="text" name="text" id="text" value="" />3 <div id="div"></div>4 </body></pre><div class="contentsignin">Copier après la connexion</div></div></div> <p>Code JS :</p> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre> <script> 2 //封装一个jsonp方法 3 function jsonp(json){ 4 //判断路径是否正确 5 if(!json.url){ 6 alert("请输入正确路径"); 7 return; 8 } 9 //设置默认值10 json.data = json.data || {};11 json.cbName = json.cbName || 'cb'; var fnName = "show" + Math.random();15 fnName = fnName.replace(".","");16 window[fnName] = function(json2){17 json.success && json.success (json2);18 oHeade.removeChild(oScript);19 }20 json.data[json.cbName] = fnName;21 var arr = [];22 for(name in json.data){23 arr.push(name + '=' + json.data[name]);24 } //创建script标签27 var oScript = document.createElement("script");28 //设置script的src属性29 oScript.src = json.url + '?' + arr.join("&");30 //获取head标签31 var oHeade = document.getElementsByTagName("head")[0];32 //将动态创建的script标签添加到head中33 oHeade.appendChild(oScript);34 } window.onload = function(){38 var oText = document.getElementById("text");39 oText.onkeyup = function(){40 jsonp({41 url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',42 data:{43 wd:oText.value44 },45 success:function(json){46 var oDiv = document.getElementById("div").innerHTML = json.s;47 } } Copier après la connexion Ceci encapsule une méthode jsonp. . .
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
