JavaScript で JSONP を使用したクロスドメイン データ リクエストの例の詳細な説明

はじめに

最近、仕事の都合上、iCiba の日常の文章をページに導入する必要があり、iCiba の API が外部に公開されており、ページを軽くするためにインターフェイスは JSON データを返しませんでした。 jQuery を使用しますが、純粋な js で直接コードを書きました:

<script type="text/javascript">
 function httpGetAsync(theUrl, callback)
 {
 xmlHttp = null;
 if (window.XMLHttpRequest)
 {// code for IE7, Firefox, Opera, etc.
 xmlHttp = new XMLHttpRequest();
 }
 else if (window.ActiveXObject)
 {// code for IE6, IE5
 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 if (xmlHttp != null)
 {
 xmlHttp.onreadystatechange = function() {
 if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
 {
  callback(xmlHttp.responseText);
 }
 else
 {
  console.error("Problem retrieving XML data");
 }
 }
 xmlHttp.open("GET", theUrl, true); // true for asynchronous
 xmlHttp.setRequestHeader(&#39;Access-Control-Allow-Origin&#39;, &#39;*&#39;);
 xmlHttp.send(null);
 }
 else
 {
 console.error("Your browser does not support XMLHTTP.");
 }
 }
 
 function showIcibaDS(ds_data)
 {
 // show daily sentence
 content = ds_data.content;
 note = ds_data.note;
 document.write(content + &#39;<br>&#39;);
 document.write(note);
 }
 
 httpGetAsync("http://open.iciba.com/dsapi/", showIcibaDS);
</script>

実行後、データは取得されませんでしたが、次のエラー メッセージが表示されました:

XMLHttpRequest cannot load http://open.iciba.com/dsapi/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 501.

これはクロスの問題です。ドメインリクエスト。では、クロスドメインリクエストとは何でしょうか?セキュリティ上の理由から、ブラウザは同じオリジン ポリシーを採用しており、同じドメイン内のインターフェイスとの対話のみを許可します。

同じドメインとは次のことを指します:

同じプロトコル: http または https など

同じドメイン名: http://konghy.cn/a または http://konghy.cn/b など

同じポート:どちらもポート 80 です

つまり、ユーザーが http://blog.konghy.cn ページを開き、現在のページの下の JS が http://blog.konghy.cn/ のインターフェイスにデータ リクエストを送信します。 XXX、およびブラウズデバイスが許可されます。ただし、データ リクエストを http://open.iciba.com/xxx に送信すると、クロスドメイン呼び出しが行われるため、ブラウザによってブロックされます。

クロスドメインリクエストの解決策は、JSONP (JSON with Padding) です。JSONP は、HTML 内の js をロードしてデータを取得し、JS コードとして実行します。コールバック関数を使用してデータを抽出します:

<script type="text/javascript">
 var cur_date = new Date();
 document.getElementById("cur_year").innerHTML = cur_date.getFullYear();
 
 function showIcibaDS(ds_data)
 {
 // show daily sentence
 content = ds_data.content;
 note = ds_data.note;
 ds_p = document.getElementById("iciba_ds")
 var content_span = document.createElement(&#39;span&#39;);
 var note_span = document.createElement(&#39;span&#39;);
 var br = document.createElement(&#39;br&#39;)
 content_span.innerHTML = content
 note_span.innerHTML = note
 ds_p.appendChild(content_span);
 ds_p.appendChild(br);
 ds_p.appendChild(note_span);
 }
</script>
<script type="text/javascript" src="http://open.iciba.com/dsapi/?callback=showIcibaDS"></script>

情報をもう一度確認すると、誰かがそれをカプセル化していることがわかります:

function jsonp(setting)
{
 setting.data = setting.data || {}
 setting.key = setting.key||'callback'
 setting.callback = setting.callback||function(){}
 setting.data[setting.key] = '__onGetData__'
 
 window.__onGetData__ = function(data) {
 setting.callback (data);
 }
 var script = document.createElement('script')
 var query = []
 for(var key in setting.data)
 {
 query.push(key + '=' + encodeURIComponent(setting.data[key]))
 }
 script.src = setting.url + '?' + query.join('&')
 document.head.appendChild(script)
 document.head.removeChild(script)
}
 
jsonp({
 url: 'http://photo.sina.cn/aj/index',
 key: 'jsoncallback',
 data: { page: 1, cate: 'recommend' },
 callback: function(ret) {
 console.log(ret)
 }
})

jQuery を使用している場合は、ajax を直接使用してデータをリクエストできます:

<script src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
 $.ajax({
 async: true,
 type: "GET",
 dataType: &#39;jsonp&#39;,
 jsonp: &#39;callback&#39;,
 jsonpCallback: &#39;callbackfunction&#39;,
 url: "http://open.iciba.com/dsapi/",
 data: "",
 timeout: 3000,
 contentType: "application/json;utf-8",
 success: function(data) {
 console.log(data);
 }
 });
})
</script>

概要

以上がこの記事の内容です。この記事の内容が皆さんの勉強や仕事に少しでも役立つことを願っています。ご質問があれば、メッセージを残して連絡してください。

JSONP を使用してドメイン間でデータをリクエストする JavaScript の詳細な例については、PHP 中国語 Web サイトの関連記事に注目してください。