jsonp의 원칙: 제3자와의 통신 목적을 달성하기 위해 크로스 도메인 "취약점" 없이 태그를 사용하는 것입니다. 통신이 필요할 때 본 웹사이트의 스크립트는 스크립트 태그를 생성합니다. 주소는 타사 API</p> <p> 주소를 가리키고 데이터를 수신하기 위한 콜백 함수를 제공합니다. 타사에서는 json 데이터에 대한 해당 래퍼를 생성하므로 브라우저는 callback() 함수를 호출하고 구문 분석된 json 개체를 다음과 같이 전달합니다. 매개변수. . </p> <p>jsonp의 핵심: </p> <p> 서버에서 제공하는 js 스크립트를 호출하기 위해 스크립트 태그를 동적으로 생성하고 추가합니다. </p> <p>더 말할 것도 없이 코드로 이동하세요. </p> <p> 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">로그인 후 복사</div></div></div> <p> 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 } } 로그인 후 복사 이것은 jsonp 메소드를 캡슐화합니다. . .
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
