Ajax 및 크로스 도메인 jsonp

이번에는 ajax와 cross-domain jsonp에 대해 소개하겠습니다. ajax와 cross-domain jsonp의 주의사항은 무엇이며, 다음은 실제 사례입니다. 살펴보겠습니다.

실행 효과는 다음과 같습니다. show를 클릭하면 ajax를 통해 로컬 .txt 파일이 요청됩니다.

코드는 비교적 간단하고 주석도 있어서 이해하기 쉬울 것이라고 생각합니다.

하지만 직장에서는 (동일 출처 정책으로 인해) 다른 도메인의 리소스를 요청하는 경우가 많습니다. 이때 크로스 도메인(프로토콜, 포트, 도메인 이름의 차이는 크로스 도메인으로 간주됨)이 발생합니다.

도메인 간 문제를 해결하는 일반적인 방법은 jsonp입니다. 제한이 있지만(요청 가져오기만 지원) 이전 브라우저와 호환된다는 장점이 있습니다(그러나 현재는 이전 브라우저에 관심을 두는 사람이 거의 없는 것 같습니다).

jsonp의 기본 원칙은 스크립트 태그를 동적으로 생성하는 것입니다. 스크립트 태그의 src에는 도메인 간 제한이 없습니다.

다음으로 Baidu 검색 드롭다운

nbsp;html>


  <meta>
  <title>Title</title>
  <script>
    window.onload =function(){
      var oBtn = document.getElementById(&#39;btn&#39;);
      oBtn.onclick = function(){
        //创建XHR对象
        var xhr = new XMLHttpRequest();
        //请求的方式，地址，是否异步
        xhr.open(&#39;get&#39;,&#39;test.txt&#39;,true);
        //请求的确定操作，初始化，相当于搜索时，敲击的回车
        xhr.send(null);
        //请求的readyState每变化一次就执行一次onreadystatechange函数
        //其中readyState表示的是：请求/响应过程的当前活动阶段
        //readyState有如下取值
        /*
        *  0：未初始化，尚未调用send()方法
        *  1: 启动
        *  2：发送
        *  3：接收
        *  4：完成
        */
        xhr.onreadystatechange =function(){
          if(xhr.readyState ==4){
            alert(xhr.responseText);
          }
        }
      };
    };
  </script>


<input>

과 유사한 페이지로 이동합니다.

코드도 상대적으로 간단합니다. 코드의 주석을 사용하면 이해하기 쉬워야 합니다. 이는 도메인 간 문제를 해결하는 일반적인 방법입니다. x 다른 것에는 역방향 프록시, CORS 등이 포함됩니다. 그것들을 배우십시오.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

위 내용은 Ajax 및 크로스 도메인 jsonp의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!