iframe に基づいて Ajax クロスドメインリクエストを実装し、Web ページ内の Ajax データを取得します-jsチュートリアル-php.cn

iframe に基づいて Ajax クロスドメインリクエストを実装し、Web ページ内の Ajax データを取得します

亚连

リリース： 2018-05-24 11:19:59

オリジナル

2427 人が閲覧しました

この記事では、iframe に基づいた Ajax クロスドメインリクエストの実装と、Web ページ上の Ajax データを取得する方法を主に紹介します。Web ページ上の Ajax リクエストによって公開されるインターフェイスを使用して Web ページデータをクロールする方法。必要な友達は参照してください

ご存知のとおり、Ajax リクエストは異なるドメインに送信できません。ブラウザーは次のエラーを報告します:

同時に、クロスドメイン通信は実行できません。これは、異なるドメインの iframe が相互にデータを読み取ることができないことを意味します (もちろん、ハッシュ変更を使用してデータを親ウィンドウから子 iframe に渡すことはできますが、それは意味がありません)。 iframe がドメインを越えて通信すると、ブラウザは次のエラーを報告します:

実際、これら 2 つの問題はクロスドメインによって引き起こされます。

この問題を解決する方法は次のとおりです。

実際、問題の鍵は、ブラウザが Ajax リクエストアドレスを解析するときに、それを現在の Web ページのアドレスと比較し、クロスドメインの場合は無効になり、エラーが発生することです。報告。では、ブラウザによって解析された ajax アドレスを現在の Web ページの解析されたアドレスと同じにすると、ブラウザはリクエストを禁止しないでしょうか?

では、ブラウザはどのようにして URL を解析するのでしょうか?

まず、ブラウザがドメイン名にアクセスすると、ローカルのDNSキャッシュに問い合わせを行い、そのURLに対応するIPアドレスがあるかどうかを確認し、あればローカルから直接IPアドレスを取得してアクセスします。そうでない場合、ブラウザは DNS に要求し、サーバーは DNS 要求を発行してドメイン名に対応する IP アドレスを取得し、それをローカルキャッシュに保存してアクセスします。

したがって、上記の問題のため、ローカルでドメイン名解決方法を偽造し、その後、偽造されたドメインとターゲットドメインを通じてクロスドメインリクエストを行うだけで済みます。

Windows で C:WindowsSystem32driversetc を開きます
Google にアクセスするためにホストを変更した場合は、次のコードを hosts ファイルに追加します:

127.0.0.1 a .target URL.com

このように、a.target URL.com への訪問は、ローカルサービスの確立を容易にすることを目的としています。クロスドメインの問題が発生するため、ターゲット Web ページに iframe タグを埋め込んでターゲットドメインへのクロスドメインリクエストをローカルに開始して、ターゲットドメインのデータを取得できます。

コードを直接追加します(jQueryを使用)

スクリプトコード、HTMLコードを親ドメインに直接挿入します

var mySrc = "http://a.目标网址.com:9000/myIframe.html";

document.domain = "目标网址.com";  //关键代码，将域提升到根域

$("body").append(&#39;<iframe src=&#39; + mySrc + &#39; name="myIframe" id="getData"></frame>&#39;);  //向目标网页插入iframe

var interval;

function start() {
 $("#getData").attr({"src": mySrc});
 interval = setInterval(function() {
  window.myIframe.run(getLogitic); //向子域传入回调函数  
 },10000)
}

function stop() {
 clearInterval(interval);
}

function getLogitic(orderId) {
 $.ajax({
  url: &#39;/query?&#39;+ orderId +&#39;&id=1&valicode=&temp=&#39; + Math.random(),
  method: &#39;GET&#39;,
  success: function(res) {
   console.log(res);    //可以在此再调用子域的方法，向本地文件传输数据
  },
  error: function(err) {
   console.log(&#39;err: &#39;, err);
  }
 })
}

ログイン後にコピー

iframe

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script src="bower_components/jquery/dist/jquery.js"></script>
 <script>
  document.domain = "目标网址.com"; //关键代码，将子域提升到根域
  var int;
  function run(callback) {
  //此请求用于向本地请求数据，然后根据本地的数据，利用父域传过来的回调函数向目标域发起请求，得到目标域的数据 
   $.ajax({
    url: &#39;./getOrderList.json&#39;,//本地数据存储的地方，偷懒直接写了个json文件，可以是数据库中的数据
    method: &#39;GET&#39;,
    success: function(res) {
     var data = res.list;
     int = setInterval(function(){
      callback(data[0]); //执行父域传入的回调函数
      data.shift();
      if (data.length === 0) clearInterval(int);
     }, 1000);
    },
    error: function(err) {
     console.log(err)
    }
   })
  }
 </script>
</body>
</html>

ログイン後にコピー

注:

iframeをルートドメインに昇格させるだけで、通信できるようになりますdocument.domain ディレクティブは、現在のドメインを現在のルートドメインに昇格させることしかできないため、これがクロスドメインの問題に対する根本的な解決策です。
ターゲット Web ページのデータをクロールする前に、まずターゲット Web ページが Ajax リクエストを送信する方法を調べ、要求された API を取得し、ターゲット Web ページのコンソールからスクリプトを挿入して、それを実行してデータを取得する必要があります。ローカルリクエストを通じてローカルに送信したい。
以下は物流クエリ Web ページから物流情報を取得するプロセスです: