최근 진행한 프로젝트에서 도메인 간 데이터를 얻기 위해 ajax가 필요했는데, 그 과정에서 약간의 오류가 있어서 ajax를 검토하고, 크로스 도메인 문제에 대한 핵심 사항을 기록해서 모두와 공유했습니다
1. Ajax
1.1 Ajax 소개
Ajax 소개 이번 편에서는 주로 Ajax의 유래에 대해 이야기하겠습니다. 왜냐하면 이것들은 기술과 아무 관련이 없기 때문입니다. 따라서 대부분의 세부 사항은 한 번에 언급됩니다.
Ajax의 유래는?
Ajax라는 용어는 Jesse James Garrett이 2005년에 발표한 "Ajax: A new Approach to Web Application"이라는 기사에서 유래되었습니다. 이 기사에서 그는 새로운 기술을 소개했는데, 그의 표현으로는 Ajax : Asynchronous JavaScript의 약어입니다. +XML.
Ajax란 무엇인가요?
이 새로운 기술의 주요 목적은 프런트 엔드 웹 페이지가 페이지를 언로드하지 않고도 서버에서 추가 데이터를 요청할 수 있도록 하는 것입니다. 이 기술이 등장한 이후 마이크로소프트가 앞장서 XHRt 객체(Ajax가 구현할 수 있는 핵심 객체)를 도입했고, 이후 다른 브라우저에서도 이 기술을 잇달아 구현했다. 전체적으로 ajax는 비동기 통신을 가능하게 하는 기술입니다.
1.2. Ajax의 핵심 객체---XMLHttpRequest
이 XHR 객체를 IE5에서 처음 도입했기 때문에 당시에는 사실상의 표준이 없었습니다. IE에는 MSXML2라는 세 가지 XHR 개체 버전이 있습니다. 이 개체를 도입한 후 다른 브라우저 제조업체도 이를 따랐으며 이제 XHR 개체가 사실상의 표준이 되었습니다.建 브라우저 전반에 걸쳐 XHR 객체 생성
function createXHR() { //IE7之前的版本通过这种方式
var versions = [
'MSXML2.XMLHttp',
'MSXML2.XMLHttp.3.0',
'MSXML2.XMLHttp.6.0'
];
var xhr = null;
for (var item in versions) {
try {
xhr = new ActiveXObject(item); //若不存在该版本，可能会出错
if (xhr) break;
} catch (e) {
//一般对这种错误不做处理
}
}
return xhr;
}로그인 후 복사
1.2.xmlhttpRequest 사용법
XMLHTTPREQUEST에는 6가지 기능이 있습니다:
Rreeee
XMLHTTPRequest 속성: ResponseText는 응답 테마로 설명됩니다. 반환 응답이 text/html 또는 애플리케이션인 경우 /xml 유형, 이 속성은 응답 XML 문서를 저장합니다.
status http 응답 상태 코드
statusText http 상태 설명
readyState XMLHttpRequest 객체의 상태 비트 0 1 2 3 4는 각각 5가지 상태를 나타냅니다.
timeout 시간 초과 시간, 단위를 설정합니다. 현재는 IE8+에서만 지원됩니다---아직 표준화되지 않았습니다(권장하지 않음)
XMLHttpRequest 개체의 onReadyStateChange 이벤트 속성:------모든 브라우저와 호환됩니다.
이 속성은 XMLHttpRequest 객체:
ReadyState의 변경 사항은 다음 상태에 해당합니다.
0: 아직 초기화되지 않았습니다. open()이 호출되기 전
1: 시작합니다. open()을 호출했지만 send()가 호출되지 않았습니다.
2: 보내기. send()를 호출했지만 아직 응답이 없습니다.
3: 데이터 수신. 응답 데이터를 수신한 시점부터 수신이 완료되는 시점까지입니다.
4: 완료. 데이터 수신이 완료되었습니다.
function createXHttpRequest() {
if (typeof XMLHttpRequest !== 'undefined') { //不要用 if(XMLHttpRequest){}这种形式，
return new XMLHttpRequest(); //如果是这种形式在找不到XMLHttpRequest函数的情况下，会报错。
} else if (typeof ActiveXObject !== 'undefined') {
return createXHR(); //用到刚才我们创建的函数
} else { throw new Error('不能创建XMLHttpRequest对象'); } }로그인 후 복사
open("method",url,boolean);
//该方法的三个参数,分别为----提交方式"get"或者"post"等
//&& url是相对于执行代码的当前页面的路径（使用绝对路径是允许的）&&是否异步
send();
//这个方法接收一个参数，这个参数是作为请求主体发送的数据,
//说明： 如果有参数，请使用post方式提交 使用方式如下，send("user="+username+"&pwd="+password);
//如果没有参数，为了兼容性考虑，必须在参数中传入null,即send(null)；该方式使用get方式提交
abort(); //取消当前响应，关闭连接并且结束任何未决的网络活动。
//这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决 //的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。
getResponseHeader()
//返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任 //何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。
//该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyStat //e 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并 //返回，使用逗号和空格分隔开各个头部的值。
getAllResponseHeaders()
//把 HTTP 响应头部作为未解析的字符串返回。
//如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的
//头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 "\r\n" 隔开。
setRequestHeader()
//向一个打开但未发送的请求设置或添加一个 HTTP 请求。로그인 후 복사
이러한 사용 방식에서 주의해야 할 문제가 있습니다. 즉, 시간 초과 후에도 데이터를 처리할 때 xhr.status 속성에 액세스하면 onreadystatechange 이벤트가 계속 발생합니다. onreadychange 이벤트가 발생하면 오류가 발생합니다. 따라서 이 속성에 액세스할 때{}catch 처리를 시도해야 합니다. 하지만 이 속성은 당분간 호환되지 않으므로 이에 대해서는 중점적으로 다루지 않겠습니다. PXmlhttpRequest 객체 이벤트 속성 ONLOAD One Onbort Onbort Onprogress:
----- IE가 아닌 브라우저와 IE 10+는 편의를 위해 구현되었습니다.
onload 및 onprogress 두 이벤트는 각각 ReadyState=4 및 ReadyState=3에 해당합니다. 사용 방법은 다음과 같습니다.
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status <== 300 || xhr.status == 304) {
alert(xhr.responseText);
//处理接收的数据
} else {
//请求失败，未得到响应数据
}
}
}; //补充说明：注册事件必须发生在send()以前로그인 후 복사
추가: 일부 이벤트는 ReadyState 상태에 따라 시뮬레이션될 수 있습니다. 일부 브라우저에서만 이 작업이 더 쉬워졌습니다.
3. 단방향 크로스 도메인 기술---CORS
오늘 이야기할 내용은 클라이언트가 반환된 데이터를 받을 때 클라이언트 웹 페이지가 동일한 도메인에 없는 서버에서 데이터를 요청한다는 것입니다. , 콜백 함수를 사용하여 데이터를 처리합니다.
즉,
1. 클라이언트는 도메인 외부의 서버에 데이터를 요청합니다.
2. 서버는 응답을 받은 후 클라이언트에 데이터를 보냅니다.
3. 클라이언트는 반환된 데이터를 기반으로 콜백 함수를 실행합니다.
我知道不同域下的iframe也可以进行通信，而且这也是一种跨域通信技术。但是，这种iframe页面之间的双向通信，我们在下一个专题里面讲解，今天主要讲的是单向通信。
3.1.CORS跨域请求的原理
在用xhr（XMLHttpRequest）对象或者xdr(XDomainRequest)对象，发送域外请求时，大概的实现原理如下图：
3.2.IE中CORS技术的实现
IE8引入了一个XDR类型，这个类型与XHR基本类似，但是其能实现安全可靠地跨域通信。
XHD的特点：
1.cookie不会随请求发送，也不会随响应返回。
2.只能设置请求头部中的Content-Type片段。
3.不能访问响应头部信息。
4.只是支持get和post请求。
XDR支持onload和onerror事件属性，且其使用方式和XHR基本一致，不过其open()只接收两个参数，默认是异步的。
var xdr = new XDomainRequest();
xdr.onload = function () {
//处理xdr.responseText
}
xdr.onerror = function () {
};
xdr.open('get', '绝对url');
xhr.send(null);로그인 후 복사
3.3.跨浏览器的CORS技术实现
在标准浏览器中XHR对象就已经可以自动实现跨域请求，但是XHR和XDR的不同之处：
1.XHR可以在设置 withCredentials =true时，浏览器会把cookie发送给服务器，服务器此时通过设置头部Access-Control-Allow-Credentials:true时来响应。如果，服务器不设置这个属性，则浏览器会触发onerror事件。
2.在回调函数中可以访问status和statusText属性，而且支持同步请求。
以下是实现跨域请求的代码：
function createCrosRequest(method, url) {
var xhr = new XMLHttpRequest(); //IE7+
if ('withCredentials' in xhr) { //IE8-IE9浏览器没有这个属性
xhr.open(method, url, true);
} else if (typeof XDomainRequest != 'undefined') {
xhr = new XDomainRequest(); //IE
xhr.open(method, url)
}
return xhr;
}
var request=CreateCrosRequest("get","url");
if(request){
request.onload=function(){
//处理request.responseText;
}
request.send(null);
}로그인 후 복사
4.单向跨域技术 ---JSONP技术
JSONP技术比较简单，其主要原理主要是利用script标签的特性。
script标签和image标签一样，它们都具有src属性，而且这个属性是可跨域的。
因为script标签返回的都是js代码，且该js代码会自动执行。所以，如果我们请求返回的数据也是类似一段js代码的形式，岂不是就可以实现在脚本加载完毕后自动执行。
如果我们的请求，返回的数据是 callback + '(' + json + ')'; 这种形式的数据, 那么在脚本加载完毕之后也就能自动执行callback()函数了.
4.1.客户端写法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<button id="button">请求数据</button>
</body>
<script>
window.onload=function(){
var button=document.getElementById("ibutton");
function callback(data){
//处理data
}
button.onclick=function(){
var script=document.createElement("script");
script="http://www.sasd.com/json/?callbak=callback";
document.body.insertBefore(script,document.body.firstChild);//加载脚本
}
}
</script>
</html>로그인 후 복사
1.客户端将回调函数名写入
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
