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

零到壹度
풀어 주다: 2018-03-23 11:40:33
원래의
2288명이 탐색했습니다.

이 기사에서는 주로 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동적 생성<script>标签,设置其src,回调函数在src中设置,一定要有callback=handleResponse函数,在页面中,返回的JSON作为参数传入回调函数中,我们通过回调函数来来操作数据。function handleResponse(response){// 对response数据进行操作代码}
HashHash는 URL 주소에서 # 숫자 뒤의 내용이 변경됩니다. 해당 값은 페이지 새로 고침을 트리거하지 않습니다. 검색은 URL 물음표 이후에 변경되면 새로 고침을 트리거합니다
postMessagewindow.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(&#39;iframe&#39;);
B.src = B.src + &#39;#&#39; + &#39;data&#39;;// 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(&#39;message&#39;, 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(&#39;wss://a.com&#39;);
//ws 类似http为非加密,wss类似https为加密
ws.onopen = function(){}//打开链接
ws.onmessage = function(){}//收到消息
ws.onclose = function(){}//关闭连接
로그인 후 복사

CORS

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

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

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