Ajax로 도메인 간 요청을 구현하는 단계에 대한 자세한 설명

이번에는 Ajax로 크로스 도메인 요청을 구현하는 단계에 대해 자세히 설명하겠습니다. Ajax에서 크로스 도메인 요청을 구현할 때 주의사항은 무엇인가요?

아래에서 시연할 두 개의 로컬 사이트를 구축해 보겠습니다.

첫 번째 단계는 Apache 서버를 로컬로 구축하는 것입니다.
두 번째 단계는 서버가 구성된 후 두 개의 가상 도메인 이름을 로컬로 구성하는 것입니다. C 드라이브에 폴더를 만들고 이름을 "HTML5"로 지정합니다.
네 번째 단계는 Apache
가상 호스트의 구성 파일을 찾은 다음 구성 파일

을 여는 것입니다. 세 번째 단계에서는 HTML5 폴더 아래에 각각 a 폴더와 b 폴더를 만듭니다.

6번째 단계는 그림과 같이 Apache 가상 호스트의 구성 파일을 수정하는 것입니다.

7번째 단계는 호스트 파일을 수정하고 a와 b의 URL을 추가합니다. 일반적으로 호스트 파일 경로는 C:WindowsSystem32driversetc

HTML5/a 폴더에 7.ajax.html 파일을 생성합니다

nbsp;HTML>


<meta>
<title>获取同域下内容</title>
<script>
window.onload = function() {
 var oBtn = document.getElementById(&#39;btn&#39;);
 // 忽略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(&#39;get&#39;, &#39;Ajax로 도메인 간 요청을 구현하는 단계에 대한 자세한 설명&#39;, true);
 xhr.send();
 }
}
</script>


 <input>

먼저 동일한 도메인의 요청을 살펴보세요

우리는 HTML5에 있습니다/ a 아래에 PHP 파일을 만들고 'hello'를 반환합니다.

현재 페이지가 열립니다

http://www .a.com/7.ajax.html 버튼을 클릭하면 데이터가 요청됩니다.
Ajax로 도메인 간 요청을 구현하는 단계에 대한 자세한 설명

그러나 만약 그렇다면 즉, 요청한 데이터와 현재 파일이 동일한 도메인에 속하지 않는 경우 도메인 간 요청이 발생하며 일반적으로 이 경우 액세스가 금지됩니다

예를 들어, 지금은 HTML5/a 폴더 바로 아래에 있는 Ajax로 도메인 간 요청을 구현하는 단계에 대한 자세한 설명 파일을 b 폴더에 넣습니다

이번을 클릭한 후 요청에서 오류를 보고했습니다. 이는 도메인 간 요청이 제한됨을 의미합니다

At 이번에는 백엔드가 협력해야 합니다. 출력 시 "Access-Control-Allow-Origin" 헤더 정보를 추가하도록 백엔드에 지시해야 합니다.

예: 그림에 표시된 대로 크로스- 이 도메인 이름의 도메인 요청은 교차 도메인 정책의 영향을 받지 않습니다

이 때 클릭하면 정상적으로 교차 도메인 데이터를 얻을 수 있습니다

원하는 경우 IE와의 호환성이 필요합니다

nbsp;HTML>


<meta>
<title>ajax跨域请求</title>
<script>
window.onload = function() { 
 /*
 在标准浏览器下，XMLHttpRequest对象已经是升级版本，支持了更多的特性，可以跨域了
 但是，如果想实现跨域请求，还需要后端的相关配合才可以
 XMLHttpRequest : 增加很多功能，他也不推荐使用onreadystatechange这个事件来监听，推荐使用onload
 */
 var oBtn = document.getElementById(&#39;btn&#39;);
 oBtn.onclick = function() {
 // 这是标准浏览器写法
 var xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function() {
 if (xhr.readyState == 4) {
 if (xhr.status == 200) {
 alert(xhr.responseText);
 }
 }
 }
 xhr.open(&#39;get&#39;, &#39;http://www.b.com/Ajax로 도메인 간 요청을 구현하는 단계에 대한 자세한 설명&#39;, true);
 xhr.send();
 /*
 如果你想兼容IE浏览器,可以特地为IE做兼容,忽略IE6
 XDomainRequest : IE如果想实现跨域请求，则需要使用这个对象去实现
 var oXDomainRequest = new XDomainRequest();
 oXDomainRequest.onload = function() {
 alert(this.responseText);
 }
 oXDomainRequest.open(&#39;get&#39;, &#39;http://www.b.com/Ajax로 도메인 간 요청을 구현하는 단계에 대한 자세한 설명&#39;, true);
 oXDomainRequest.send();
 */
 }
}
</script>


 <input>

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

추천 자료:

kkpager Ajax 페이징 쿼리 기능 구현에 대한 자세한 설명(코드 포함)

Ajax가 콤보 상자의 동적 로딩을 구현하는 방법(코드 포함)

위 내용은 Ajax로 도메인 간 요청을 구현하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!