> 웹 프론트엔드 > JS 튜토리얼 > Ajax 크로스 도메인 구현 방법

Ajax 크로스 도메인 구현 방법

php中世界最好的语言
풀어 주다: 2018-04-04 14:22:23
원래의
979명이 탐색했습니다.

이번에는 Ajax 크로스 도메인 구현 방법을 알려드리겠습니다. Ajax 크로스 도메인 구현 시 주의 사항은 무엇인가요?

ajax 소개

AJAX는 "Asynchronous Javascript And XML"(Asynchronous JavaScript and XML)을 의미하며 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 의미합니다.

AJAX = 비동기 JavaScript 및 XML(표준 범용 마크업 언어의 하위 집합).

AJAX는 빠르고 동적인 웹 페이지를 만드는 기술입니다.

AJAX를 사용하면 백그라운드에서 서버와 소량의 데이터를 교환하여 웹페이지를 비동기적으로 업데이트할 수 있습니다. 이는 전체 페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있음을 의미합니다.

AJAX를 사용하지 않는 기존 웹페이지에서는 콘텐츠를 업데이트해야 하는 경우 전체 웹페이지를 다시 로드해야 합니다.

본론으로 들어가자

이틀 전 xz가 나에게 ajax로 도메인 간 호출을 구현하는 방법을 알고 있는지 물었습니다. 저는 이 개념을 들어본 적이 없기 때문에 구현 방법도 알고 있었습니다. xz는 Ajax 크로스 도메인을 호출하는 방법에는 여러 가지가 있다고 말했습니다. 하나는 document.domain을 설정하여 달성되는 iframe 방식이고, 다른 하나는 jsonp를 설정하여 달성됩니다. 지난 이틀 동안 정보를 확인하고 몇 가지 데모를 작성했습니다.

로컬에 사이트 3개를 구축하고 호스트 파일을 설정하여 하위 도메인 및 도메인 간 시뮬레이션을 진행했습니다.

coolkissbh.com

blog.coolkissbh.com

coolkiss.com

1. Ajax 도메인 간 호출 What 문제가 있을까요?

coolkissbh.com은 jquery의 $.get을 사용하여 blog.coolkissbh.com 페이지를 호출합니다

교차 도메인 요청, IE 7과 8에서는 액세스 거부 오류를 보고합니다
IE 6.0에서 이 팝업이 표시됩니다. 페이지가 통제할 수 없는 정보에 액세스하고 있습니다. 이는 보안 위험을 초래합니다. 계속하시겠습니까? 프롬프트 상자

firefox는 오류를 보고하지 않지만 요청을 하지 않습니다

2. Ajax 크로스 도메인 구현 방법

1. 하위 도메인 전반에 걸쳐 ajax 구현

요구사항: blog.coolkissbh.com

에서 페이지를 비동기적으로 요청하려면 Coolkissbh.com 페이지를 구현하세요. 구현 방법: iframe의 도움으로 , AjaxProxy.aspx와 같은 iframe.com의 src 속성을 설정하여 blog.coolkissbh를 삽입하면 페이지에서 Ajax를 요청합니다

AjaxProxy 요청이 완료된 후 반환된 데이터가 coolkissbh의 기본 페이지로 다시 전달됩니다. com은 상위 개체를 통해 이루어집니다. 따라서 실제 비동기 요청은 여전히 ​​blog.coolkissbh.com이라는 도메인 이름에서 발생합니다

참고: 이 방법을 통해 구현된 하위 도메인 간 Ajax 요청은 Coolkissbh.com의 요청 페이지와 AjaxProxy.aspx에서 동일한 설정을 지정해야 합니다. page 도메인 이름, 즉
document.domain = "coolkissbh.com";

참고: 도메인 설정 문제와 관련하여 전체 도메인에 걸쳐 있는 경우 위 방법을 사용하면 Firefox에서
불법 문서라는 메시지가 표시됩니다. 도메인 값" 코드: "1009 오류이므로 반환된 데이터를 처리하기 위해 전체 도메인에서 두 번째 방법만 사용할 수 있습니다.

AjaxProxy.aspx는 ajax에서 반환한 데이터를 전역 변수에 저장하고, coolkissbh.com은 setInterval을 사용하여 iframe 페이지가 로드되었는지 확인하고, 로드가 완료되면 AjaxProxy.aspx의 전역 변수 값을 가져옵니다. 그런 다음 다른 처리를 수행하십시오.

여기에 문제가 있습니다. 원래는 AjaxProxy.aspx의 ajax 요청이 완료된 후 부모 메서드를 호출하고 동시에 데이터를 반환하려고 계획했지만 IE에서는 처음으로 "권한 거부" 오류가 나타납니다. 클릭하고 다시 클릭하면 정상이 됩니다. Firefox에는 문제가 없습니다. 이유를 모르겠습니다.

2. 전체 도메인에 걸쳐 ajax를 구현합니다

요구 사항: Coolkissbh.com 페이지를 구현하여 Coolkiss.com 아래의 페이지를 비동기적으로 요청합니다.

구현 방법: 위에서 언급한 것처럼 도메인 방법. 하지만 스크립트 태그를 사용하면 스크립트 태그의 src 속성을 Coolkiss.com 도메인 이름 아래의 페이지로 설정하고 콜백 함수를 페이지에 전달하면 됩니다. 예:

RequestAjax_CrossSite = function() {
var obj = $("#crossSitePage");
obj.attr("src", "http://coolkiss.com/CrossSite.aspx?callback=handleData3");
}
handleData3 = function(data) {
$("#ResponseData").html(data);
}
로그인 후 복사

CrossSite.aspx는 string을 반환하고, 반환된 데이터를 콜백에 전달하고, 콜백 함수를 실행하고, ajax를 구현합니다. 예:

Response.Clear();
Response.Write(string.Format( " {0}('{1}')", Request["callback"], responseData));
Response.End();

참고: 이 방법은 하위 도메인 간 Ajax 문제를 처리하는 데에도 사용할 수 있습니다. 하지만 jquery와 같은 ajax 호출의 다양한 상태를 얻는 것은 불가능합니다.

3. Cross-domain ajax는 jquery의 jsonp를 통해 구현됩니다. 실제로 원칙은 두 번째 방법과 동일합니다. -domains.

jquery 1.2에는 Cross-domain ajax 호출, 즉 $.getJSON 함수에 대한 지원이 추가되었습니다.

호출 방법은 다음과 같습니다.

다음은 coolkissbh.com

//使用jsonp实现跨全域
RequestAjax_JSONP = function() {
var obj = $("#crossSitePage");
$.getJSON("http://coolkiss.com/CrossSite.aspx?callback=?&t=" + Math.random(), function(data) {
//alert(data);
$("#ResponseData").html(data.content);
});
}
로그인 후 복사

coolkiss.com 아래 페이지입니다. 백그라운드 처리 코드, json 객체를 콜백에 전달:

public partial class CrossSite : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
LoadData_JSONP();
}
}
protected void LoadData_JSONP()
{
string responseData = "{content:\"hello world from coolkiss.com\"}";
if (Request["callback"] != null && !string.IsNullOrEmpty(Request["callback"]))
{
Response.Clear();
Response.Write(string.Format("{0}({1})", Request["callback"], responseData));
Response.End();
}
}
}
로그인 후 복사

callback =? function(data) 함수로 자동 대체됩니다.

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

추천 자료:

JSONP가 Ajax 도메인 간 액세스를 처리하는 방법

Ajax+Session이 실패한 후 즉시 로그인 페이지로 리디렉션

위 내용은 Ajax 크로스 도메인 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿