Ajax 크로스 도메인의 기본 프로세스

1. AJAX

AJAX(비동기 JavaScript 및 XML)는 JavaScript를 사용하여 비동기 네트워크 요청을 수행하는 것을 의미합니다.
교차 도메인은 주로 프록시 서버, JSONP 및 CORS를 설정하여 달성할 수 있습니다.
JavaScript로 완전한 AJAX 코드를 작성하는 것은 복잡하지 않지만 주의해야 합니다. AJAX 요청은 비동기식으로 실행됩니다. 콜백 응답을 통해 얻습니다.

관련 권장 사항: "python video"

Ajax를 만드는 과정은 일반적으로 다음과 같습니다.

XMLHttpRequest 객체를 생성합니다. 즉, XHR 객체 속성을 결정합니다. 새로운 HTTP 요청을 생성하고 HTTP 요청의 상태 변경에 응답하는 기능을 설정하고 비동기 호출에서 반환된 데이터를 얻습니다. 부분 새로 고침을 구현하는 DOM입니다.

코드.

var xmlhttp;function createXMLHttpRequest () { xmlhttp = null; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } // 异步调用服务器段数据 if (xmlhttp != null) { // 创建http请求 xmlhttp.open('GET/POST', url, true); // 设置http请求状态变化的函数 xmlhttp.onreadystatechange = httpStateChange; // 发送请求 xmlhttp.send(null); } else { console.log('不支持XHR'); } } // 响应HTTP请求状态变化的函数function httpStateChange () { //判断异步调用是否完成 if (xmlhttp.readyState == 4) {//readyState==4表示后台处理完成了 if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status == 304){ //判断异步调用是否成功,如果成功开始局部更新数据 //code... } else{ console.log("出错状态码：" + xmlhttp.status + "出错信息：" + xmlhttp.statusText); } } }

낮은 버전의 IE에서는 ActiveXObject 객체로 변경해야 합니다. 표준 쓰기와 IE 쓰기를 혼합하려면 이렇게 쓰면 됩니다.

var request;if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else { request = new ActiveXObject('Microsoft.XMLHTTP'); }

창 객체에 XMLHttpRequest 속성이 있는지 감지하여 브라우저가 표준 XMLHttpRequest를 지원하는지 확인합니다. 브라우저가 특정 JavaScript 기능을 지원하는지 여부를 감지하기 위해 브라우저의 navigator.userAgent를 사용하지 마십시오. 첫째, 문자열 자체가 위조될 수 있으며 둘째, IE 버전을 통해 JavaScript 기능을 판단하는 것은 매우 복잡합니다.

XMLHttpRequest 객체를 생성한 후에는 먼저 onreadystatechange
콜백 함수를 설정해야 합니다. 콜백 함수에서는 보통 ReadyState === 4를 통해 요청이 완료되었는지 여부만 판단하면 됩니다. 완료되면 상태를 기준으로 성공적인 응답인지 여부를 판단합니다.

XMLHttpRequest 객체의 open() 메소드에는 3개의 매개변수가 있습니다. 첫 번째 매개변수는 GET인지 POST인지 지정하고, 두 번째 매개변수는 URL 주소를 지정하며, 세 번째 매개변수는 비동기식을 사용할지 여부를 지정하므로 기본값은 true입니다. 쓸 필요가 없습니다. 세 번째 매개변수를 false로 지정하지 마십시오. 그렇지 않으면 AJAX 요청이 완료될 때까지 브라우저가 응답을 중지합니다. 이 요청에 10초가 걸리면 10초 이내에 브라우저가 "일시 중단" 상태에 있음을 알게 됩니다.

마지막으로 send() 메서드를 호출하여 실제로 요청을 보냅니다. GET 요청에는 매개변수가 필요하지 않으며 POST 요청에는 문자열 또는 FormData 개체로 전달되는 본문 부분이 필요합니다.

2. 크로스 도메인 보안 제한

브라우저의 "동일 출처 정책"으로 인해 프로토콜, 도메인 이름, 포트 번호가 다를 경우 접속이 불가능합니다. AJAX 자체는 도메인을 넘을 수 없습니다. AJAX는 허가 없이 도메인 간 액세스 문제가 있는 일반 파일을 직접 요청할 수 있지만 도메인 간 요청인 경우에는 허용되지 않습니다. 백엔드.

동일 출처 정책은 브라우저를 제한하지만 서버를 제한하지 않기 때문에 서버는 도메인을 넘을 수 있습니다.
자바스크립트가 외부 도메인(즉, 다른 웹사이트)의 URL을 요청할 수 없기 때문인가요? 여전히 방법이 있습니다. 아마도 다음과 같습니다.

2.1 CORS

CORS(Cross-Origin Resource Sharing)는 도메인 간 리소스에 액세스해야 할 때 브라우저와 서버가 통신해야 하는 방법을 정의하는 W3C 초안입니다.

CORS의 기본 아이디어는 사용자 정의 HTTP 헤더를 사용하여 브라우저가 서버와 통신하여 요청이나 응답이 성공할지 실패할지 여부를 결정하도록 하는 것입니다.

예를 들어 GET 또는 POST를 사용하여 전송된 간단한 요청에는 사용자 정의 헤더가 없으며 주요 내용은 text/plain입니다. 이 요청을 보낼 때 서버가 이 헤더 정보를 기반으로 응답할지 여부를 결정할 수 있도록 요청한 페이지의 소스 정보(프로토콜, 도메인 이름 및 포트)가 포함된 추가 Origin 헤더를 첨부해야 합니다. 다음은 Origin 헤더의 예입니다.

Origin: http://www.nczonline.net

서버가 요청이 허용된다고 생각하면 Access-Control-Allow-Origin 헤더에 동일한 소스 정보를 다시 보냅니다(공용 리소스인 경우 '*'를 다시 보낼 수 있음). 예:

Access-Control-Allow-Origin: http://www.nczonline.net

해당 헤더가 없거나, 이 헤더가 있지만 소스 정보가 일치하지 않는 경우 브라우저는 요청을 거부합니다. 일반적으로 브라우저가 요청을 처리합니다. 요청이나 응답에는 쿠키 정보가 포함되어 있지 않습니다.

현재 모든 브라우저에서 이 기능을 지원하며, IE 브라우저는 IE10 이하일 수 없습니다. 전체 CORS 통신 프로세스는 브라우저에 의해 자동으로 완료되며 사용자 참여가 필요하지 않습니다. 개발자의 경우 동일한 소스의 CORS 통신과 AJAX 통신 간에 차이가 없으며 코드도 완전히 동일합니다. 브라우저가 AJAX 요청이 교차 출처임을 발견하면 자동으로 추가 헤더 정보를 추가하고 때로는 추가 요청이 이루어지지만 사용자는 이를 느끼지 못할 것입니다.

그러므로 CORS 통신을 이루기 위한 핵심은 서버입니다. 서버가 CORS 인터페이스를 구현하면 Cross-Origin 통신이 가능합니다.

일반적인 Ajax 요청은 다음과 같습니다.

위의 damonare 부분은 상대 경로입니다. CORS를 사용하려는 경우 관련 Ajax 코드는 다음과 같습니다.

코드와 이전 코드의 차이점 하나는 상대 경로가 다음으로 대체된다는 것입니다. 다른 도메인의 절대 경로는 도메인 간에 액세스하려는 인터페이스 주소입니다.

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

2.2 图像Ping

我们知道，一个网页可以从任何网页中加载图像，不用担心跨域不跨域。这也是在线广告跟踪浏览量的主要方式。我们也可以动态的创建图像，使用它们的onload和onerror事件处理成西来确定是否接收到了响应。

动态创建图像经常用于图像Ping。
图像Ping是与服务器进行简单、单向的跨域通信的一种方式。请求的数据是通过查询字符串形式发送的，而响应可以是任意内容，但通常是像素图或204响应。通过图像Ping，浏览器得不到任何具体的数据，但通过侦听load和error事件，它能知道响应是什么时候收到的。

来看下面的例子。

var img = new Image(); img.onload = img.onerror = function () { console.log('Done'); }; img.src = 'http://www.example.com/test?name=Nico';

这里创建了一个Image的实例，然后将onload和onerror事件处理程序指定为同一个函数。这样无论是什么响应，只要请求完成，就能得到通知。请求从设置src属性那一刻开始，而这个例子在请求中发送了一个name参数。

图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。
图像Ping有两个主要的缺点：

只能发送GET请求。无法访问服务器的响应文本。

因此，图像Ping只能用于浏览器与服务器间的单向通信。

2.3 JSONP

JSONP是JSON with padding（填充式JSON或参数式JSON）的简写，是应用JSON的一种新方法。JSONP与JSON看起来差不多，只不过是被包含在函数调用中的JSON，如下。

callback({'name': 'Azure'});

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的，而数据就是传入回调参数中JSON数据。下面是一个典型的JSONP请求。

http://freegeoip.net/json/?callback=handleResponse

这个URL是在请求一个JSONP地理定位服务。通过查询字符串来指定JSONP服务的回调参数是很常见的，就像上面的URL所示，这里指定的回调函数的名字叫handleResponse()。

JSONP是通过动态