집 > 기사 > 웹 프론트엔드 > Ajax를 사용하여 도메인 간 액세스를 달성하는 세 가지 방법 요약

Ajax를 사용하여 도메인 간 액세스를 달성하는 세 가지 방법 요약

php中世界最好的语言원래의: 2018-04-24 16:51:422078검색

이번에는 크로스 도메인 액세스를 달성하기 위한 Ajax의 세 가지 방법을 요약해 보겠습니다. Ajax에서 크로스 도메인 액세스를 달성하기 위한 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

1. 크로스 도메인이란

먼저 도메인 이름 주소 구성을 검토해 보겠습니다:

http:// www . google: 8080/script/jquery.js

　　 http:// ( 프로토콜 번호)

~ 하위 도메인 이름, 기본 도메인 이름, 포트 번호 중 하나가 다를 경우 모두 다른 "도메인"으로 간주됩니다.

* 서로 다른 도메인이 서로 리소스를 요청하는 경우를 "교차 도메인"이라고 합니다.

예: http://www.abc.com/index.html 요청 http://www.def.com/sever.php

두 번째, 교차 도메인 처리를 위한 방법 1 -- 프록시

(이것은 방법은 "Stupid"를 비교합니다(자세한 소개는 생략하겠습니다)

예를 들어 베이징(www.beijing.com/sever.php)과 상하이(www.shanghai.com/sever.php)에 두 개의 서버가 있습니다. ), 베이징의 백엔드(www.beijing.com/sever.php)는 상하이의 서비스에 직접 접속한 후, 획득한 응답값을 프런트엔드에 반환합니다. 즉, 베이징의 서비스는 백그라운드에서 프록시 역할을 하며 프런트 엔드는 베이징의 서버에만 액세스하면 되며 이는 상하이의 서버에 액세스하는 것과 같습니다. 이런 종류의 에이전트는 배경 기술에 속하므로 자세한 설명은 생략하겠습니다.

3. 크로스 도메인 처리 방법 2 -- JSONP

http://www.aaa.com/index.php 페이지가 http://www.bbb.com/getinfo에 제출되었다고 가정합니다. php GET 요청을 수행한 후 www.aaa.com 페이지에 다음 코드를 추가합니다.

　　var eleScript= document.createElement("script"); //创建一个script元素
　　eleScript.type = "text/javascript"; //声明类型、
　　eleScript.src = "http://www.bbb.com/getinfo.php"; //添加src属性 引入跨域访问的url
　　document.getElementsByTagName("HEAD")[0].appendChild(eleScript); //在页面中添加新创建的script元素

GET 요청이 http://www.bbb.com/getinfo.php에서 반환되면 JavaScript 코드가 반환될 수 있습니다. 코드는 자동 실행을 사용하여 http://www.aaa.com/index.php 페이지에서 콜백 함수를 호출할 수 있습니다. 다음 예를 살펴보세요.

www.aaa.com 페이지에서:

<script>
　　function jsonp( json ){
　　　　document.write( json.name ); //输出周星驰
}
<script>
<script src="http://www.bbb.com/getinfo.php"></script>

www.bbb.com 페이지에서:

　jsonp({ "name":"Stephen Chow","age":45 }) ;

즉, www.aaa.com 페이지에서 선언하고 www.bbb.com 페이지에서 호출한다는 것입니다. 그러나 JSONP는 "GET" 요청만 지원하고 "POST" 요청은 지원하지 않습니다.

3. 크로스 도메인 처리 방법 2 - XHR2(권장 방법)

"XHR2" 전체 이름 "XMLHttpRequest Level2"는 HTML5에서 제공하는 메서드로 크로스 도메인 액세스를 잘 지원합니다. 일부 새로운 기능.

* IE10 이하 버전은 지원되지 않습니다

* 서버 측 헤더에 다음 두 줄의 코드를 추가하면 됩니다: 　header( "Access-Control-Allow-Origin:*" );

　header( "Access -Control-Allow-Methods:POST,GET" );

"XHR2"에 대한 자세한 내용은 공식 문서를 확인하세요. 여기서는 자세한 내용을 다루지 않겠습니다. 한마디로 이 방법은 매우 유용한 방법입니다.

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