Le principe de jsonp, introduction à la méthode d'encapsulation de jsonp

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

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. .

Le cœur de jsonp :

Créez et ajoutez dynamiquement des balises de script pour appeler le script js fourni par le serveur.

Pas grand chose d'autre à dire, il suffit d'aller voir le code :

Code HTML ;

2 3 4 Code JS :

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 } } Ceci encapsule une méthode jsonp. . .