元のJavaScriptはAJAX、JSONPを実現します。

8221 ワード

ほとんどのフロントエンドの開発者はバックエンドとデータのやりとりが必要な時、便利さのためにJQueryにパッケージされているAJAX方法を選択しますが、ある時はJQueryのAJAX要求方法だけが必要です。他の機能は少ないです。これは必要ないです。
実は、元のJavaScriptがAJAXを実現するのは難しくないです。この文章は簡単なAJAXの実現方法を説明します。また、国境を越えてJSONPを要求します。
一、AJAX
AJAXの核心はXMLtpRequestです。
一つの完全なAJAX要求は、通常以下のステップを含む。

実装XMLttpRequestオブジェクト

接続サーバ

送信要求

受信応答データ

AJAX要求をajax（）方法にカプセル化し、設定対象のparamsを受け入れる。


function ajax(params) {  
 params = params || {};  
 params.data = params.data || {};  
 //    ajax    jsonp  
 var json = params.jsonp ? jsonp(params) : json(params);  
 // ajax    
 function json(params) {  
  //     ，   GET
  params.type = (params.type || 'GET').toUpperCase(); 
  //        ，          
  params.data = formatParams(params.data);  
  var xhr = null;  
  //    XMLHttpRequest    
  if(window.XMLHttpRequest) {  
   xhr = new XMLHttpRequest();  
  } else {  
   // IE6        
   xhr = new ActiveXObjcet('Microsoft.XMLHTTP');  
  }; 
  　　 //     ，   readyState     ，     readystatechange   
  xhr.onreadystatechange = function() { 
   // readyState      /           ，4   ，           
   if(xhr.readyState == 4) {  
    var status = xhr.status; 
    // status：   HTTP   ， 2       
    if(status >= 200 && status < 300) {  
     var response = ''; 
     //             
     var type = xhr.getResponseHeader('Content-type');  
     if(type.indexOf('xml') !== -1 && xhr.responseXML) {  
      response = xhr.responseXML; //Document      
     } else if(type === 'application/json') {  
      response = JSON.parse(xhr.responseText); //JSON    
     } else {  
      response = xhr.responseText; //       
     }; 
     //        
     params.success && params.success(response);  
    } else {  
     params.error && params.error(status);  
    }  
   };  
  }; 
  //          
  if(params.type == 'GET') {
   //     ：    、    (get   ，           )、      (         )；
   xhr.open(params.type, params.url + '?' + params.data, true);  
   xhr.send(null);  
  } else {  
   xhr.open(params.type, params.url, true);  
   //  ，            
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 
   //      
   xhr.send(params.data);  
  }  
 } 
 //       
 function formatParams(data) {  
  var arr = [];  
  for(var name in data) { 
   //  encodeURIComponent() ：    URI           
   arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));  
  };  
  //          ，      
  arr.push('v=' + random());  
  return arr.join('&');  
 }
 //        
 function random() {  
  return Math.floor(Math.random() * 10000 + 500);  
 }
}

上のコードにおけるreadyStateの値は、要求／応答プロセスの現在の活動段階を表し、その意味は以下の通りである。
0:初期化です。open()メソッドが起動されていません。
1：起動します。openメソッドを起動しましたが、send()メソッドはまだ起動されていません。
2：送信します。send()メソッドは起動されましたが、応答はまだ受け入れられていません。
3：受付。部分応答データを受信しました。
4：完了します。全ての応答データを受信し、クライアントで使用することができる。
使用例:


ajax({  
 url: 'test.php',  //     
 type: 'POST',  //     ，  "GET"，    "POST"
 data: {'b': '    '},  //     
 success: function(res){  //          
  console.log(JSON.parse(res));  
 },
 error: function(error) {}  //          
});

二、JSONP
ソースポリシー
AJAXが「ドメイン横断」を必要としている理由は、ブラウザの同ソース戦略である。つまり、1ページのAJAXはこのページの同じソースまたは同じドメインのデータしか取得できません。どうやって「同源」または「同域」と呼びますか？――プロトコル、ドメイン名、ポート番号は同じでなければなりません。例えば
http://example.com 和 https://example.comは契約が違うからです。
http://localhost:8080 和 http://localhost:1000はポートが違うからです。
http://localhost:8080 和 https://example.comは違っています。プロトコル、ドメイン名、ポート番号は全部違っています。
ドメインをまたぐ要求時、このエラーは一般的に見られます。
XMLHttp Request cannot load http://ghmagical.com/article/?intro=jsonp%E8%AF%B7%E6%B1%82&v=5520.No'Access-Coontrol-Alllow-Origin'header is present on the requested reource.Origin'http://localhost'is therefore not allowed access.
じゃどうやって国境を越えて請求しますか？そんな時、JSONPが登場！
JSONPはJSON With Padding（充填式JSONまたはパラメータ式JSON）の簡略であり、非常に一般的なクロスドメイン要求方式である。主な原理は、scriptタグを利用してドメインをまたぐ要求ができるという特性を利用して、そのsrc属性からサーバに要求を送信し、サーバがJavaScriptコードに戻り、ブラウザが応答を受け、そのまま実行したということです。
JSONPは二つの部分からなります。コールバック関数とデータ、コールバック関数は応答が来たらページで呼び出すべき関数で、コールバック関数の名前は要求で指定されます。サーバが応答すると、サーバ端はこの関数とデータを文字列にして返します。
JSONPの要求過程：

要求段階：ブラウザはscriptタグを作成し、そのsrcに値を付与する（http://example.com/api/?callback=jsonpCallbackと同様）。

は、scriptのsrcに値を割り当てると、ブラウザが要求を開始する要求を送信する。

データ応答：サービス端末が返されるデータはパラメータと関数名としてつなぎ合わせられます。ブラウザが応答データを受信すると、開始要求はscriptであるため、JsonpCallbackメソッドを直接起動するのに相当し、パラメータが入力される。

ここで原生JavaScriptでどうやって実現するか説明します。
依然としてajax()の方法の中でJSONPを添加して、後は両者を統合していっしょにいます。JSONPの配置パラメータは主に一つのjsonpパラメータが多くなりました。それはあなたのコールバック関数名です。


function ajax(params) {  
 params = params || {};  
 params.data = params.data || {};  
 var json = params.jsonp ? jsonp(params) : json(params);   
 // jsonp    
 function jsonp(params) {  
  //  script           
  var callbackName = params.jsonp;  
  var head = document.getElementsByTagName('head')[0];  
  //                
  params.data['callback'] = callbackName;  
  var data = formatParams(params.data);  
  var script = document.createElement('script');  
  head.appendChild(script);  
  //  jsonp      
  window[callbackName] = function(json) {  
  head.removeChild(script);  
  clearTimeout(script.timer);  
  window[callbackName] = null;  
  params.success && params.success(json);  
  };  
　　//      
  script.src = params.url + '?' + data;  
  //            ，        
  if(params.time) {  
   script.timer = setTimeout(function() {  
    window[callbackName] = null;  
    head.removeChild(script);  
    params.error && params.error({  
     message: '  '  
    });  
   }, time);  
  }  
 };  
 //       
 function formatParams(data) {  
  var arr = [];  
  for(var name in data) {  
   arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));  
  };  
  //        ，      
  arr.push('v=' + random()); 
  return arr.join('&');  
 }  
 //        
 function random() {  
  return Math.floor(Math.random() * 10000 + 500);  
 }
}

注意：scriptタグのsrc属性は初めて設定した時にしか機能しないので、scriptタグが再使用できなくなります。毎回操作が終わったら削除します。
使用例:


ajax({  
  url: 'test',  //     
 jsonp: 'jsonpCallback', //   jsonp  ，       "jsonpCallbak"，           
 data: {'b': '    '},  //     
 success:function(res){  //          
  console.log(res);  
 },
 error: function(error) {}  //          
});

JSONPはとても簡単で使いやすいですが、2点足りないところもあります。

JSONPは他のドメインからコードをロードして実行しています。他のドメインが安全でないと、悪意のあるコードを挟むことができます。JSONP呼び出しを完全に放棄する以外は、

を追及することができません。

JSONP要求が失敗したかどうかを確認するのは容易ではない。
以上が本文の全部です。本文の内容は皆さんの学習や仕事に一定の助けをもたらしてくれると同時に、私達を応援してください。

ORACLE変数の定義と使用の詳細について

C++関数のパラメータは標準値の詳細を取ります。