Ajax 도메인 간 요청의 원리(그래픽 튜토리얼)
- 亚连원래의
- 2018-05-22 10:03:441974검색
이 글에서는 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!