ドメイン間実装
2879 ワード
ドメイン間
プロトコル、ドメイン名、ポートのいずれかが異なる限り、異なるドメインと見なされ、ポートとプロトコルの違いはバックエンドでしか解決できません.ブラウザでは、通常、1つのページが別のページのスクリプト情報にアクセスできません.
ドメイン間での実装方法
ドメイン間での実装方法には、次のようなものがあります.
JSONP
JSONPはJSON paddingの略で、JSONを応用する新しい方法で、webサービスで非常に流行しています.JSONPはJSONと差が少ないように見えますが、関数に含まれているJSONにすぎません.次のように
JSONはコールバック関数とデータの2つの部分からなり、コールバック関数はページが応答したときにページが呼び出されるデータである.コールバック関数の名前は、一般的にリクエストで指定されます.データはコールバック関数に入力されたJSONデータです.たとえばhttp://jrg.com/index.html?callback=handlerここで指定したコールバック関数の名前はhandler()です.JSONPは動的ラベルで使用され、使用時にsrc属性にドメイン間URLを指定できます.<script>要素と<code><img></code>要素は同様で、他のドメインからのデータのロードを制限することなく実行できます.またJSONPは有効なjavascriptコードなので、ロードが完了するとすぐに実行されます.例えば次の例</p>
<pre><code>function handleResponse(response){
console.log("You`re at IP address"+ response.ip + ", which is in"
+ response.city + ", "+ response.region_name);
}
var script = document.createElement("script");
srcipt.src = "htt[://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
</code></pre>
<p>この例では、地理的位置特定サービスを問い合わせることで、Ipと位置情報を表示します.<br> JSONPは開発者の間で非常に流行している.主な原因はJSONPが簡単で使いやすいことであり、画像pingに比べて、対応するテキストに直接アクセスし、ブラウザとサーバ間の双方向通信をサポートできるという利点があるが、不足している点もある.<br> 不十分な点は2つの面に現れ、まずJSONPは他のドメインからコードをロードして実行し、他のドメインが安全でなければ、応答に悪意のあるコードを挟む可能性が高いが、この時JSONP呼び出しを完全に放棄する以外、追及できない.次にJSONPリクエストが失敗したかどうかを確認するのは容易ではありません.HTML 5は<script>要素にonerrorイベントハンドラが追加されましたが、ブラウザではサポートされていません.そのため、開発者はタイマを使用して、指定された時間に応答が受信されたかどうかを検出しなければなりません.<br> 具体例は以下の通り</p>
<pre><code>//フロントエンド
<html>
<head>
<style>
.container{
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class = "container">
<ul class = "news">
<li>第11日展望:中国衝撃4金ボルト再戦</li>
<li>双争会師決勝戦</li>
<li>女子バレーボールはブラジル</li>
</ul>
<button class ="switch">グループを変更</button>
</div>
</boyd>
<script>
var btn = document.querySelector(".switch");
var container = document.querySelector(".news")
btn.addEventListener("click", function(){
var script = document.createElement("script");
script.src = 'http://localhost:8080/getNews?callback=appendHtml';
document.head.appendChild(script);
document.head.removeChild(script);
})
function appendHtml(news){
var html = '';
for(var i = 0; i < news.length; i++){
html += '<li>' + news[i] + '</li>';
console.log(html);
container.innerHTML = html;
}
}
プロトコル、ドメイン名、ポートのいずれかが異なる限り、異なるドメインと見なされ、ポートとプロトコルの違いはバックエンドでしか解決できません.ブラウザでは、通常、1つのページが別のページのスクリプト情報にアクセスできません.
ドメイン間での実装方法
ドメイン間での実装方法には、次のようなものがあります.
JSONP
JSONPはJSON paddingの略で、JSONを応用する新しい方法で、webサービスで非常に流行しています.JSONPはJSONと差が少ないように見えますが、関数に含まれているJSONにすぎません.次のように
callback({"name": "Nicolas" })
JSONはコールバック関数とデータの2つの部分からなり、コールバック関数はページが応答したときにページが呼び出されるデータである.コールバック関数の名前は、一般的にリクエストで指定されます.データはコールバック関数に入力されたJSONデータです.たとえばhttp://jrg.com/index.html?callback=handlerここで指定したコールバック関数の名前はhandler()です.JSONPは動的ラベルで使用され、使用時にsrc属性にドメイン間URLを指定できます.<script>要素と<code><img></code>要素は同様で、他のドメインからのデータのロードを制限することなく実行できます.またJSONPは有効なjavascriptコードなので、ロードが完了するとすぐに実行されます.例えば次の例</p>
<pre><code>function handleResponse(response){
console.log("You`re at IP address"+ response.ip + ", which is in"
+ response.city + ", "+ response.region_name);
}
var script = document.createElement("script");
srcipt.src = "htt[://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
</code></pre>
<p>この例では、地理的位置特定サービスを問い合わせることで、Ipと位置情報を表示します.<br> JSONPは開発者の間で非常に流行している.主な原因はJSONPが簡単で使いやすいことであり、画像pingに比べて、対応するテキストに直接アクセスし、ブラウザとサーバ間の双方向通信をサポートできるという利点があるが、不足している点もある.<br> 不十分な点は2つの面に現れ、まずJSONPは他のドメインからコードをロードして実行し、他のドメインが安全でなければ、応答に悪意のあるコードを挟む可能性が高いが、この時JSONP呼び出しを完全に放棄する以外、追及できない.次にJSONPリクエストが失敗したかどうかを確認するのは容易ではありません.HTML 5は<script>要素にonerrorイベントハンドラが追加されましたが、ブラウザではサポートされていません.そのため、開発者はタイマを使用して、指定された時間に応答が受信されたかどうかを検出しなければなりません.<br> 具体例は以下の通り</p>
<pre><code>//フロントエンド
<html>
<head>
<style>
.container{
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class = "container">
<ul class = "news">
<li>第11日展望:中国衝撃4金ボルト再戦</li>
<li>双争会師決勝戦</li>
<li>女子バレーボールはブラジル</li>
</ul>
<button class ="switch">グループを変更</button>
</div>
</boyd>
<script>
var btn = document.querySelector(".switch");
var container = document.querySelector(".news")
btn.addEventListener("click", function(){
var script = document.createElement("script");
script.src = 'http://localhost:8080/getNews?callback=appendHtml';
document.head.appendChild(script);
document.head.removeChild(script);
})
function appendHtml(news){
var html = '';
for(var i = 0; i < news.length; i++){
html += '<li>' + news[i] + '</li>';
console.log(html);
container.innerHTML = html;
}
}