Comment JS implémente la communication du navigateur

Cet article vous explique principalement comment JS implémente la communication avec le navigateur, principalement sous forme de code. J'espère que cela pourra aider tout le monde.

Politique et restrictions de même origine

La politique de même origine restreint la manière dont les documents ou les scripts chargés à partir de la même source peuvent interagir avec des ressources provenant d'une autre source. Il s'agit d'un mécanisme de sécurité important pour isoler les fichiers potentiellement malveillants. (Trois sont identiques : protocole http/https, nom de domaine et port)

• Cookie/LocalStorage et IndexDB ne peuvent pas être lus

• DOM ne peut pas être lu être obtenu

• La requête Ajax ne peut pas être envoyée

Échec

URL

Résultat

Raison

http://store.company.com/dir2/other.html td>

Succès

URL	结果	原因
http://store.company.com/dir2/other.html	成功
http://store.company.com/dir/inner/another.html	成功
https://store.company.com/secure.html	失败	不同协议 ( https和http )
http://store.company.com:81/dir/etc.html	失败	不同端口 ( 81和80)
http://news.company.com/dir/other.html	失败	不同域名 ( news和store )

http://store.company.com/dir/inner/another.html

Succès

https://store.company.com/secure.html

Échec

Différents protocoles (https et http)

http://store.company.com:81/dir/etc.html

Différents ports (81 et 80)

http://news.company.com/dir/other.html

Échec

Différents noms de domaine (actualités et boutique)

Comment communiquer entre le front et le backend

• Ajax : Méthode de communication sous la même origine

• WebSocket : Aucune restriction sur la politique de même origine

• CORS : prend en charge la communication inter-domaines et la communication de même origine

Comment créer Ajax

• Workflow de l'objet XMLHttpRequest

• Traitement de compatibilité

• Conditions de déclenchement des événements

• Séquence de déclenchement des événements

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);
        }
    }
}

Plusieurs moyens de communication inter-domaines

方法	说明
JSONP	动态创建3f1c4e4b6b16bbbd69b2ee476dc4f83a标签，设置其src，回调函数在src中设置,一定要有callback=handleResponse函数，在页面中，返回的JSON作为参数传入回调函数中，我们通过回调函数来来操作数据。function handleResponse(response){// 对response数据进行操作代码}
Hash	Hash是url地址中#号之后的内容，其值改变不会触发页面刷新，search是url问号后面的，一旦改变会触发刷新
postMessage	window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机  (两个页面的模数 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 resource sharing）具体来说，就是在头信息之中，增加一个Origin字段。Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。

Explication détaillée du hachage :

// 利用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){
  })

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!