JS가 브라우저 통신을 구현하는 방법

이 기사에서는 주로 JS가 브라우저 통신을 주로 코드 형식으로 구현하는 방법을 공유합니다. 이것이 모든 사람에게 도움이 되기를 바랍니다.

동일 출처 정책 및 제한 사항

동일 출처 정책은 동일한 소스에서 로드된 문서나 스크립트가 다른 소스의 리소스와 상호 작용하는 방식을 제한합니다. 이는 잠재적인 악성 파일을 격리하기 위한 중요한 보안 메커니즘입니다. (3개는 동일함: 프로토콜 http/https, 도메인 이름 및 포트)

• Cookie/LocalStorage 및 IndexDB를 읽을 수 없음

• DOM을 얻을 수 없음

• Ajax 요청을 보낼 수 없음

URL	Result	Cause
http://store.company.com/dir2/other.html	Success
http://store.company.com/ dir/inner/ another.html	Success
https://store.company.com/secure.html	Failed	다른 프로토콜(https 및 http)
http:// store.company.com:81/dir/etc.html	Failed	다른 포트(81 및 80)
http://news.company.com/dir/other.html	failed	다른 도메인 이름(뉴스 및 스토어)

프론트 엔드와 백엔드 간의 통신 방법

• Ajax: 동일 출처에서의 통신 방법

• WebSocket: 동일 출처 정책에 제한이 없습니다

• CORS: 도메인 간 통신 및 동일 출처 통신 지원

Ajax 생성 방법

• XMLHttpRequest 객체 워크플로

• 호환성 처리

• 이벤트 트리거 조건

• 이벤트 트리거 순서

var xht = XMLHttpRequest ? new XMLHttpRequest():new window.ActiveXObject('Microsoft.XMLHTTP');var data = opt.data,
    url = opt.url,
    type=opt.type.toUpperCase(),
    dataArr=[];for(var k in data){
    dataArr.push(k+'='+data[k]);
}if(type === 'GET'){
    url = url + '?' + dataArr.join("&");
    xhr.open(type, url.replace(/\?s/g,''), true);
    xhr.send();
}if(type === 'POST'){
    xhr.open(type, url, true);
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xhr.send(dataArr.join('&'));
}
xhr.onload = function(){
    if(xhr.status === 200 || xhr.status === 304){ //媒体资源需要206
        var res;        if(opt.success && opt.success instanceof Function){
            res = xhr.responseText;            if(typeof res === 'string'){
                res = JSON.parse(res);
                opt.success.call(xhr, res);
            }
        }
    }else{        if(opt.error && opt.error instanceof Function){
            opt.error.call(xhr, res);
        }
    }
}

도메인 간 통신의 여러 가지 방법

방법	지침
JSONP	동적 생성3f1c4e4b6b16bbbd69b2ee476dc4f83a标签，设置其src，回调函数在src中设置,一定要有callback=handleResponse函数，在页面中，返回的JSON作为参数传入回调函数中，我们通过回调函数来来操作数据。function handleResponse(response){// 对response数据进行操作代码}
Hash	Hash는 URL 주소에서 # 숫자 뒤의 내용이 변경됩니다. 해당 값은 페이지 새로 고침을 트리거하지 않습니다. 검색은 URL 물음표 이후에 변경되면 새로 고침을 트리거합니다
postMessage	window.postMessage() 메서드는 크로스 소스 통신을 안전하게 구현할 수 있습니다. 일반적으로 서로 다른 두 페이지에 대한 스크립트는 스크립트가 실행되는 페이지가 동일한 프로토콜(일반적으로 https), 포트 번호(https의 기본값은 443) 및 호스트(모듈로 Document.domain)를 사용하는 페이지에 있는 경우에만 실행됩니다. 두 페이지 모두 동일한 값으로 설정) 두 스크립트가 서로 통신할 수 있도록 합니다. window.postMessage() 메서드는 이러한 제한을 우회하는 제어된 메커니즘을 제공하며 올바르게 사용되는 한 안전합니다. https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
WebSocket	은 동일한 출처 정책 https://developer.mozilla.org/zh-의 영향을 받지 않습니다. CN/ docs/Web/API/WebSocket
CORS	은 "Cross-origin 리소스 공유"(Cross-origin 리소스 공유)를 의미합니다. 구체적으로는 헤더 정보에 Origin 필드를 추가하는 것을 의미합니다. 원본 필드는 이 요청이 어느 소스에서 왔는지(프로토콜 + 도메인 이름 + 포트)를 나타내는 데 사용됩니다.

해시 상세 설명:

// 利用Hash，场景是当前页面A通过iframe或者frame嵌入了跨域页面B//A中伪代码如下：var B = document.getElelementByTagName('iframe');
B.src = B.src + '#' + 'data';// B中伪代码window.onhashchange = function(){
    var data = window.location.hash;
}

postMessage

// 窗口A(http://A.com)向跨域的窗口B(http://B.com)发送信息window.postMessage(data, "http://B.com");()//在窗口监听window.addEventListener('message', function(event){
    console.log(event.origin)//http://A.com
    console.log(event.source)//引用A window
    console.log(event.data) //数据}, false)

WebSocket

var ws = new WebSocket('wss://a.com');
//ws 类似http为非加密，wss类似https为加密
ws.onopen = function(){}//打开链接
ws.onmessage = function(){}//收到消息
ws.onclose = function(){}//关闭连接

CORS

//使用 fetch 的构造函数请求数据后，返回一个 Promise 对象，处理即可。
//Fetch 常见坑
//Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: 'include'})
//服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
 fetch("/some/url", {
    method:'get
 '}).then(function(response){
    }).catch(function(err){
  })

위 내용은 JS가 브라우저 통신을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!