Ajax 도메인 간 요청의 원리(그래픽 튜토리얼)-JS 튜토리얼-php.cn

Ajax 도메인 간 요청의 원리(그래픽 튜토리얼)

亚连

풀어 주다： 2018-05-22 10:03:44

원래의

2054명이 탐색했습니다.

이 글에서는 주로 Ajax 교차 도메인 요청의 원칙을 자세히 소개합니다. Ajax는 어떻게 교차 도메인 요청을 하나요? 특정 참조 값이 있습니다. 관심 있는 친구가 참조할 수 있습니다.

이 문서의 예는 참조용으로 Ajax 교차 도메인 요청의 구체적인 구현 프로세스를 공유합니다.

우리는 두 개의 로컬 사이트를 구축합니다.

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

Ajax 도메인 간 요청의 원리(그래픽 튜토리얼)

다섯 번째 단계는 HTML5 아래에 a 폴더와 b 폴더를 만드는 것입니다.
6번째 단계는 그림과 같이 Apache 가상 호스트의 구성 파일을 수정하는 것입니다.

修改Ajax 도메인 간 요청의 원리(그래픽 튜토리얼)

7번째 단계는 호스트 파일을 수정하고 및 b. 일반적으로 호스트 파일 경로는 C:WindowsSystem32driversetc에 있습니다.

Ajax 도메인 간 요청의 원리(그래픽 튜토리얼)

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(&#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>
</head>
<body>
 <input type="button" value="获取同域下内容" id="btn" />
</body>
</html>

로그인 후 복사

먼저 동일한 도메인의 요청을 살펴보겠습니다

HTML5/a 아래에 PHP 파일을 생성하고 'hello'를 반환합니다.

Ajax 도메인 간 요청의 원리(그래픽 튜토리얼)

지금 현재 페이지가 열립니다Ajax 도메인 간 요청의 원리(그래픽 튜토리얼) , 버튼을 클릭하고 데이터가 요청된 것을 발견했습니다.
http://www.a.com/7.ajax .html

Ajax 도메인 간 요청의 원리(그래픽 튜토리얼)

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

예를 들어 이제 Ajax 도메인 간 요청의 원리(그래픽 튜토리얼) 파일을 HTML5/a 폴더 바로 아래에 넣습니다. b 폴더

이번에 클릭한 결과 요청에서 오류가 보고된 것을 발견했습니다. 이는 도메인 간 요청이 제한된다는 의미입니다

Ajax 도메인 간 요청의 원리(그래픽 튜토리얼)

이때 백엔드의 협조가 필요합니다. 백엔드에서 출력 시 "Access-Control-Allow-Origin" 헤더 정보를 추가합니다
예: 그림에 표시된 것처럼 이 도메인 이름에 대한 도메인 간 요청인 경우에는 영향을 받지 않습니다. 크로스 도메인 정책

Ajax 도메인 간 요청의 원리(그래픽 튜토리얼)

지금 클릭하면 정상적으로 크로스 도메인 데이터를 얻을 수 있습니다

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(&#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>
</head>

<body>
 <input type="button" value="获取同域下内容" id="btn" />
</body>
</html>

로그인 후 복사

위 내용을 제가 정리한 것입니다 모두를 위해, 앞으로 모든 사람에게 도움이 되기를 바랍니다.

AJAX 요청 큐 사용법 상세 설명

jQuery+ajaxget() 함수를 사용하여 페이지를 읽는 단계에 대한 자세한 설명

ajax단계에 대한 자세한 설명 속성 읽기

위 내용은 Ajax 도메인 간 요청의 원리(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!