JavaScript用JSONPドメイン間要求データインスタンスの詳細

前言
最近、仕事のために、愛詞覇の毎日の一言をページに導入する必要があります.愛詞覇はAPIを外に開放し、インタフェースはjsonデータを返します.ページをもっと軽くするために、私はjQueryではなく、直接純粋なjsでコードを書きました.

 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('Access-Control-Allow-Origin', '*');
 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 + '<br>');
 document.write(note);
 }

 httpGetAsync("http://open.iciba.com/dsapi/", showIcibaDS);

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

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.

これがドメイン間リクエストの問題です.では、ドメイン間リクエストとは何でしょうか.ブラウザは、セキュリティ上の理由から、同じドメインのインタフェースとのインタラクションのみを許可する同源ポリシー(Same origin Policy)を採用しています.
同ドメインとは、次のことです.

同プロトコル:httpまたはhttp

同ドメイン名:いずれも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)である.HTMLのscriptタグは他のドメインのjsをロードすることができ、JSONPはscriptタグによってデータをロードする方式でデータを取得してJSコードとして実行し、それから1つのコールバック関数でデータを抽出する.

 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('span');
 var note_span = document.createElement('span');
 var br = document.createElement('br')
 content_span.innerHTML = content
 note_span.innerHTML = note
 ds_p.appendChild(content_span);
 ds_p.appendChild(br);
 ds_p.appendChild(note_span);
 }

を べてみると、 かがパッケージを っていた.

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で データを できます.

$(function(){
 $.ajax({
 async: true,
 type: "GET",
 dataType: 'jsonp',
 jsonp: 'callback',
 jsonpCallback: 'callbackfunction',
 url: "http://open.iciba.com/dsapi/",
 data: "",
 timeout: 3000,
 contentType: "application/json;utf-8",
 success: function(data) {
 console.log(data);
 }
 });
})

まとめ
以上はこの文章のすべての内容で、本文の内容がみんなの学习あるいは仕事に対して一定の助けをもたらすことができることを望んで、もし疑问があればみんなは伝言を残して交流することができます.
参考資料
//www.jb51.net/article/75669.htm
https://zhuanlan.zhihu.com/p/22600501