Das Prinzip von JSONP, Einführung in die Methode zur Kapselung von JSONP

Das Prinzip von

jsonp:

Es besteht darin, das -Tag ohne domänenübergreifende „Schwachstellen“ zu verwenden, um den Zweck der Kommunikation mit Dritten zu erreichen Diese Site erstellt ein Skript-Tag, eine Adresse, die auf die API-

-Adresse des Drittanbieters verweist und eine Rückruffunktion zum Empfangen von Daten bereitstellt. Der Drittanbieter generiert ein entsprechendes Paket für JSON-Daten, sodass der Browser den Rückruf aufruft. )-Funktion und übergeben Sie das analysierte JSON-Objekt als Parameter. .

Der Kern von JSONP:

Erstellen Sie dynamisch Skript-Tags und fügen Sie sie hinzu, um das vom Server bereitgestellte JS-Skript aufzurufen.

Mehr gibt es nicht zu sagen, gehen Sie einfach zum Code:

HTML-Code;

2 3 4 JS-Code:

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 } } Dies kapselt eine JSONP-Methode. . .