JS がブラウザ通信を実装する方法

この記事では、JS がブラウザー通信をどのように実装するかを主にコードの形で紹介します。皆さんのお役に立てれば幸いです。

同一生成元ポリシーと制限

同一生成元ポリシーは、同じソースからロードされたドキュメントまたはスクリプトが別のソースからのリソースと対話する方法を制限します。これは、潜在的に悪意のあるファイルを隔離するための重要なセキュリティ メカニズムです。 (プロトコル http/https、ドメイン名、ポートの 3 つは同じです)

• Cookie/LocalStorage と IndexDB を読み取れません

• DOM を取得できません

• Ajax リクエストを送信できません

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	失敗しました	違うドメイン名 (ニュースとストア)

フロントエンドとバックエンド間の通信方法

​​

• Ajax: 同一オリジンでの通信方法

​​

• WebSocket: 同一オリジンポリシーの制限なし

• CORS: クロスドメイン通信と同一オリジン通信をサポート

Ajaxの作成方法

• XMLHttpRequestオブジェクトのワークフロー

• 互換処理

• イベントトリガー条件

• 注文しました

りー

クロスドメイン通信のいくつかの方法

メソッド	手順
JSONP	動的作成3f1c4e4b6b16bbbd69b2ee476dc4f83a标签，设置其src，回调函数在src中设置,一定要有callback=handleResponse函数，在页面中，返回的JSON作为参数传入回调函数中，我们通过回调函数来来操作数据。function handleResponse(response){// 对response数据进行操作代码}
ハッシュ	ハッシュは後のコンテンツですURL アドレスの # 番号が変更されます。その値の検索はページの更新をトリガーしません。URL の疑問符の後、それが変更されると、更新がトリガーされます
postMessage	window.postMessage() メソッドは、クロスソース通信を安全に実装できます。通常、2 つの異なるページのスクリプトは、実行されるページが同じプロトコル (通常 https)、ポート番号 (https のデフォルトは 443)、およびホスト (モジュロ Document.domain のページ上にある場合にのみ実行されます)両方のページで同じ値に設定されます)、2 つのスクリプトが相互に通信できるようになります。 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 フィールドは、このリクエストの送信元 (プロトコル + ドメイン名 + ポート) を示すために使用されます。

ハッシュの詳細な説明:

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

postMessage

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

WebSocket

// 窗口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)

CORS

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

以上がJS がブラウザ通信を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。