AJAX는 프록시, JSONP 및 XHR2를 사용하여 도메인 간을 달성합니다.

이번에는 프록시, JSONP, XHR2를 사용하여 크로스 도메인 구현을 구현한 AJAX용 Notes에 대해 함께 살펴보겠습니다.

도메인: 도메인은 WIN2K 네트워크 시스템의 보안 경계입니다. 우리는 컴퓨터 네트워크의 가장 기본적인 단위가 "도메인"이라는 것을 알고 있습니다. 이는 WIN2K에만 있는 것은 아니지만 Active Directory는 하나 이상의 도메인을 통해 실행될 수 있습니다. 독립적인 컴퓨터에서 도메인은 컴퓨터 자체를 의미합니다. 동시에 물리적 위치는 여러 네트워크 세그먼트로 나누어져 있으며 각 도메인에는 고유한 보안 정책이 있습니다. 다른 도메인과의 신뢰 관계와의 관계. 여러 도메인이 신뢰 관계를 통해 연결된 경우 Active Directory는 여러 신뢰 도메인에서 공유될 수 있습니다.

회사에서 다른 도메인 이름으로 요청을 요청하려면 AJAX를 사용해야 하기 때문에 액세스가 거부됩니다. 보안상의 이유로 AJAX는 로컬 리소스에만 액세스할 수 있고 교차 도메인 리소스에는 액세스할 수 없기 때문입니다.

예를 들어 웹사이트 도메인 이름이 aaa.com이고 AJAX를 통해 bbb.com 도메인 이름의 콘텐츠를 요청하려는 경우 브라우저는 이를 안전하지 않은 것으로 간주하여 액세스를 거부합니다.

크로스 도메인 문제가 발생할 수 있는 상황은 여러 가지가 있습니다.

이 문제를 해결하기 위해 배경이 Baidu에서 솔루션을 검색했으며 프록시, JSONP 및 XHR2(XMLHttpRequest 레벨 2) 총 세 가지 솔루션이 요약되었습니다. ).

첫 번째 방법 프록시: 이 방법은 백엔드(ASP, PHP, JAVA, ASP.NET)를 통해 다른 도메인 이름의 콘텐츠를 얻은 다음 가져온 콘텐츠를 프런트 엔드에 반환하는 것입니다. 동일한 도메인 이름이면 도메인 간 문제가 발생하지 않습니다.

구현 코드: AJAX 요청을 생성합니다. (페이지 주소는 http://localhost/ajax/proxy.html입니다.)

var request = null;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHttp");
}
request.onreadystatechange = function(){
console.log(this.readyState);
if(this.readyState===4 && this.status===200){
var resultObj = eval("("+this.responseText+")"); //将返回的文本数据转换JSON对象
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex; //将返回的内容显示在页面中
}
}
request.open("POST","proxy.php",true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send("name=吕铭印&sex=男");

AJAX 요청을 생성합니다.

proxy.php 코드

header("Content-type:text/html;charset=utf-8");
$url = "http://localhost:63342/ajax/proxy.js";
$contents = file_get_contents($url);
echo $contents;

php 코드를 사용하여 localhost:63342 아래에 Proxy.js 파일을 가져옵니다.

proxy.js 코드

{
name : "吕铭印",
sex : "男"
}

proxy.html 실행 결과

이 시점에서는 프록시를 사용하여 서로 다른 도메인 간의 파일에 액세스합니다.

먼저 AJAX를 사용하여 Proxy.html의 백그라운드에서 Proxy.php 파일에 액세스한 다음, Proxy.php가 요청을 받은 후 localhost:63342의 Proxy.js 파일에 액세스합니다. 프런트 엔드 페이지는 도메인 간 기능을 실현합니다.

여러 크로스 도메인 파일에 액세스하려는 경우 백그라운드 Proxy.php 파일에 액세스하려는 파일의 주소를 매개변수 형식으로 알려줄 수 있습니다.

두 번째 방법 JSONP(GET 요청만 지원): 나중에 JS 파일을 호출할 때 도메인 간 영향이 없다는 사실을 발견하여 두 번째 방법이 파생되었습니다.

클라이언트 호출 및 추가 처리를 위해 데이터를 원격 서버의 js 파일로 로드하는 것입니다.

jsonp.html

var url = "http://localhost:63342/ajax/jsonp.php?name=吕铭印&sex=男&callbackname=jsonp_callback"; //访问localhost:63342下的jsonp.php
var scriptTag = document.createElement("script"); //创建一个script标签
scriptTag.setAttribute("src",url); //设置script的src属性
document.body.appendChild(scriptTag); //将script标签添加到body中
//回调函数
var jsonp_callback = function(resultObj){
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex;
}

jsonp.php

$name = $_GET["name"];
$sex = $_GET["sex"];
$callbackname = $_GET["callbackname"]; //回调函数名称
echo "$callbackname({name:'$name',sex:'$sex'})";

jsonp.html 실행 결과:

구현 원칙: 스크립트 태그를 사용하여 원격 js 파일을 호출하는 것은 도메인 간 영향을 받지 않으므로 script 태그, src 속성을 통해 원격 파일에 액세스하세요.

사실 이는 AJAX에 속하지는 않지만 AJAX와 유사한 기능을 구현할 수 있습니다.

세 번째 방법 XMLHttpRequest 레벨 2: HTML5에서 제공하는 XMLHttpRequest 레벨 2는 도메인 간 액세스 및 기타 새로운 기능을 구현했습니다.

이를 위해서는 원격 서버 측에 다음 코드를 추가해야 합니다.

header('Access-Control-Allow-Origin:*'); //*代表可访问的地址，可以设置指定域名
header('Access-Control-Allow-Methods:POST,GET');

이 방법을 사용하면 client일반 AJAX 코드이면 충분합니다.

요약: 프록시 구현은 가장 번거롭지만 가장 널리 사용되는 방법입니다. AJAX를 지원하는 모든 브라우저에서 이 방법을 사용할 수 있습니다.

JSONP는 비교적 간단하지만 GET 메서드 호출만 지원합니다.

XHR2는 가장 간단하지만 HTML5만 지원합니다. 모바일 단말용으로 개발하는 경우 XHR2를 사용하도록 선택할 수 있습니다.

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

추천 자료:

동일 도메인의 JS 캡슐화, jsonp 크로스 도메인(코드 포함)

jQuery는 텍스트 상자 포커스를 전환하도록 키보드를 설정합니다

위 내용은 AJAX는 프록시, JSONP 및 XHR2를 사용하여 도메인 간을 달성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!