jsonp의 원리, jsonp를 캡슐화하는 방법 소개

jsonp의 원칙:

　　제3자와의 통신 목적을 달성하기 위해 크로스 도메인 "취약점" 없이 <script> 태그를 사용하는 것입니다. 통신이 필요할 때 본 웹사이트의 스크립트는 스크립트 태그를 생성합니다. 주소는 타사 API</script>

주소를 가리키고 데이터를 수신하기 위한 콜백 함수를 제공합니다. 타사에서는 json 데이터에 대한 해당 래퍼를 생성하므로 브라우저는 callback() 함수를 호출하고 구문 분석된 json 개체를 다음과 같이 전달합니다. 매개변수. .

jsonp의 핵심:

　 서버에서 제공하는 js 스크립트를 호출하기 위해 스크립트 태그를 동적으로 생성하고 추가합니다.

더 말할 것도 없이 코드로 이동하세요.

HTML 코드;

2         
<input>3         
<div></div>4    

JS 코드:

 <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 || &#39;cb&#39;;               
 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 + &#39;=&#39; + json.data[name]);24                 }         
 //创建script标签27                
 var oScript = document.createElement("script");28                 
 //设置script的src属性29                 
 oScript.src = json.url + &#39;?&#39; + 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:&#39;https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su&#39;,42                         data:{43                             
 wd:oText.value44                         },45                         
 success:function(json){46                             
 var oDiv = document.getElementById("div").innerHTML = json.s;47                         }               
 }        
 </script>

이것은 jsonp 메소드를 캡슐화합니다. . .

위 내용은 jsonp의 원리, jsonp를 캡슐화하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!