이 글에서는 주로 Ajax 교차 도메인 요청의 원칙을 자세히 소개합니다. Ajax는 어떻게 교차 도메인 요청을 하나요? 특정 참조 값이 있습니다. 관심 있는 친구가 참조할 수 있습니다.
이 문서의 예는 참조용으로 Ajax 교차 도메인 요청의 구체적인 구현 프로세스를 공유합니다.
우리는 두 개의 로컬 사이트를 구축합니다.
첫 번째 단계는 Apache 서버를 로컬로 설정하는 것입니다.
두 번째 단계는 서버를 구성한 후 두 개의 가상 도메인 이름을 로컬로 구성하는 것입니다.
세 번째 단계는 C에 폴더를 만드는 것입니다. 드라이브 이름을 "HTML5"로 지정합니다.
네 번째 단계는 Apache 가상 호스트의 구성 파일을 찾은 다음 구성 파일을 여는 것입니다.
다섯 번째 단계는 HTML5 아래에 a 폴더와 b 폴더를 만드는 것입니다.
6번째 단계는 그림과 같이 Apache 가상 호스트의 구성 파일을 수정하는 것입니다.
7번째 단계는 호스트 파일을 수정하고 및 b. 일반적으로 호스트 파일 경로는 C:WindowsSystem32driversetc에 있습니다.
us HTML5/a 폴더에 7.ajax.html 파일을 만듭니다
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>获取同域下内容</title> <script> window.onload = function() { var oBtn = document.getElementById('btn'); // 忽略IE6 oBtn.onclick = function() { //创建一个ajax对象 var xhr = new XMLHttpRequest(); //监听事件 xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { alert(xhr.responseText); } } } xhr.open('get', 'Ajax 도메인 간 요청의 원리(그래픽 튜토리얼)', true); xhr.send(); } } </script> </head> <body> <input type="button" value="获取同域下内容" id="btn" /> </body> </html>
먼저 동일한 도메인의 요청을 살펴보겠습니다
HTML5/a 아래에 PHP 파일을 생성하고 'hello'를 반환합니다.
지금 현재 페이지가 열립니다Ajax 도메인 간 요청의 원리(그래픽 튜토리얼) , 버튼을 클릭하고 데이터가 요청된 것을 발견했습니다.
http://www.a.com/7.ajax .html
그러나 교차 도메인인 경우, 즉 요청한 데이터와 현재 파일 동일한 도메인에 있지 않으면 도메인 간 요청이 발생하며 일반적으로 이 경우 액세스가 금지됩니다
예를 들어 이제 Ajax 도메인 간 요청의 원리(그래픽 튜토리얼) 파일을 HTML5/a 폴더 바로 아래에 넣습니다. b 폴더
이번에 클릭한 결과 요청에서 오류가 보고된 것을 발견했습니다. 이는 도메인 간 요청이 제한된다는 의미입니다
이때 백엔드의 협조가 필요합니다. 백엔드에서 출력 시 "Access-Control-Allow-Origin" 헤더 정보를 추가합니다
예: 그림에 표시된 것처럼 이 도메인 이름에 대한 도메인 간 요청인 경우에는 영향을 받지 않습니다. 크로스 도메인 정책
지금 클릭하면 정상적으로 크로스 도메인 데이터를 얻을 수 있습니다
IE와 호환되려면
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ajax跨域请求</title> <script> window.onload = function() { /* 在标准浏览器下,XMLHttpRequest对象已经是升级版本,支持了更多的特性,可以跨域了 但是,如果想实现跨域请求,还需要后端的相关配合才可以 XMLHttpRequest : 增加很多功能,他也不推荐使用onreadystatechange这个事件来监听,推荐使用onload */ var oBtn = document.getElementById('btn'); oBtn.onclick = function() { // 这是标准浏览器写法 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { alert(xhr.responseText); } } } xhr.open('get', 'http://www.b.com/Ajax 도메인 간 요청의 원리(그래픽 튜토리얼)', true); xhr.send(); /* 如果你想兼容IE浏览器,可以特地为IE做兼容,忽略IE6 XDomainRequest : IE如果想实现跨域请求,则需要使用这个对象去实现 var oXDomainRequest = new XDomainRequest(); oXDomainRequest.onload = function() { alert(this.responseText); } oXDomainRequest.open('get', 'http://www.b.com/Ajax 도메인 간 요청의 원리(그래픽 튜토리얼)', true); oXDomainRequest.send(); */ } } </script> </head> <body> <input type="button" value="获取同域下内容" id="btn" /> </body> </html>
위 내용을 제가 정리한 것입니다 모두를 위해, 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 글:
jQuery+ajaxget() 함수를 사용하여 페이지를 읽는 단계에 대한 자세한 설명
위 내용은 Ajax 도메인 간 요청의 원리(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!