リクエストを使用してページをフェッチすると、ブラウザで表示されるものとは異なる結果が得られる場合があります。通常、ページデータはブラウザに表示され、リクエストを使用しても結果はありません。これは、取得したリクエストがすべて元のHTMLドキュメントであり、ブラウザのページがJavaScriptデータ処理後に生成された結果であるためです。これらのデータのソースは多数あり、Ajaxを介してロードされたり、HTMLドキュメントに含まれたり、JavaScriptや特定のアルゴリズムによる計算の後に生成されたりします。
最初のケースでは、データの読み込みは非同期の読み込みメソッドです。元のページにはデータが含まれていません。読み込み後にのみ、サーバーからデータを取得するためのインターフェースを要求し、データが処理されてWebページに表示されます上記では、このプロセスは実際にAjaxリクエストをサーバーインターフェイスに送信します。
Webの開発動向によると、このフォームのページはますます多くなります。Webページの元のHTMLドキュメントにはデータが含まれていません。データはAjaxを介して均一にロードされた後に表示されるため、Web開発でフロントエンドとバックエンドを分離でき、ページを直接レンダリングするサーバーによる圧力を軽減できます。
そのため、このようなページに遭遇した場合、元のページを取得するリクエストなどのライブラリを直接使用して有効なデータを取得することはできません。このとき、Webページのバックエンドによってインターフェースに送信されたAjaxリクエストを分析する必要があります。リクエストを使用してAjaxリクエストをシミュレートできれば、正常にキャプチャできます。
したがって、このレッスンでは、Ajaxとは何か、Ajaxリクエストを分析およびキャプチャする方法を理解します。
Ajaxとは
Ajaxの正式名称は、非同期JavaScriptとXML、つまり非同期JavaScriptとXMLです。これはプログラミング言語ではありませんが、JavaScriptを使用してサーバーとデータを交換し、Webページの一部を更新しながら、ページが更新されず、ページのリンクが変更されないようにする技術です。
従来のWebページの場合、そのコンテンツを更新するには、ページ全体を更新する必要があります。Ajaxを使用すると、完全に更新することなくページのコンテンツを更新できます。このプロセスでは、ページが実際にバックグラウンドでサーバーとデータのやり取りを実行し、データを取得した後、JavaScriptを使用してページを変更し、ページのコンテンツを更新します。
W3Schoolにアクセスして、いくつかのデモを体験して、その感触をつかむことができます：http : //www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp。
インスタンスの紹介
Webを閲覧すると、多くのWebページが下にスクロールしてより多くのオプションを表示していることがわかります。例として、私のWeiboのホームページをご覧ください：https : //m.weibo.cn/u/2830678474。Weiboページに切り替えたところ、いくつかのWeiboを下にスライドすると、次のコンテンツは直接表示されませんが、読み込み中のアニメーションが表示されます。読み込みが完了すると、新しいWeiboコンテンツが引き続き下に表示されます。このプロセスは実際にはAjaxですロードプロセスを図に示します。
ページが完全に更新されていないことがわかりました。つまり、ページのリンクは変更されていませんが、ページに新しいコンテンツがあります。これは、後で投稿された新しいWeiboです。これは、Ajaxを通じて新しいデータを取得して表示するプロセスです。
基本的
Ajaxを予備的に理解した後、そのAjaxの基本原理についてさらに学びましょう。AjaxリクエストをWebページの更新に送信するプロセスは、次の3つのステップに単純に分けることができます。
- リクエストを送信
- コンテンツを解析する
- ウェブページをレンダリング
これらのプロセスを以下に詳しく紹介します。
リクエストを送信
JavaScriptはページのさまざまなインタラクティブ機能を実装できることがわかっており、Ajaxも例外ではなく、JavaScriptによって実装され、次のコードが実際に実行されます。
var xmlhttp;
if (window.XMLHttpRequest) {
//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();} else {
//code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","/ajax/",true);
xmlhttp.send();
これは、AjaxのJavaScriptの最下位レベルの実装です。このプロセスは、実際には新しいXMLHttpRequestオブジェクトを作成し、次にonreadystatechangeプロパティを呼び出してモニターを設定し、最後にopen（）メソッドとsend（）メソッドを呼び出してリンク（つまりサーバー）にリクエストを送信します。
Pythonを使用してリクエストを送信した後、レスポンス結果を取得できますが、ここではリクエストはJavaScriptによって送信されます。監視が設定されているため、サーバーが応答を返すと、onreadystatechangeに対応するメソッドがトリガーされ、このメソッドで応答の内容を解析できます。
コンテンツを解析する
レスポンスを取得すると、onreadystatechange属性に対応するメソッドがトリガーされますが、このときxmlhttpのresponseText属性を使用してレスポンスの内容を取得できます。これは、リクエストを使用してPythonでサーバーへのリクエストを開始し、レスポンスを取得するプロセスに似ています。
返されるコンテンツはHTMLまたはJSONであり、その後の処理のためにメソッドでJavaScriptを使用するだけで済みます。たとえば、返されたコンテンツがJSONの場合、解析して変換できます。
ウェブページをレンダリング
JavaScriptには、Webページのコンテンツを変更する機能があります。応答コンテンツを解析した後、JavaScriptを呼び出して、解析されたコンテンツに基づいてWebページを処理する次のステップを実行できます。たとえば、document.getElementById（）。innerHTMLなどの操作によって、特定の要素のソースコードが変更され、Webページに表示されるコンテンツが変更されます。DocumentWebページドキュメントの変更や削除などのこの種の操作は、 DOM操作を行います。
上記の例では、操作document.getElementById（ "myDiv"）。innerHTML = xmlhttp.responseTextにより、IDがmyDivであるノード内のHTMLコードがサーバーから返されたコンテンツに変更され、サーバーから返された新しい要素がmyDiv要素内に表示されます。 Webページのコンテンツの一部が更新されているようです。
ご覧のとおり、リクエストの送信、コンテンツの解析、Webページのレンダリングの3つのステップは、実際にはJavaScriptによって完了しています。
Ajax分析
前のWeiboを例にとると、ドラッグによって更新されるコンテンツはAjaxによって読み込まれ、ページのURLは変更されていません。現時点では、これらのAjaxリクエストをどこで確認すればよいですか？
ここでもブラウザーの開発者ツールを使用する必要があります。以下では、Chromeブラウザーを例として紹介します。
まず、Chromeブラウザーを使用してWeiboリンクhttps://m.weibo.cn/u/2830678474を開き、ページで右マウスボタンをクリックして、ポップアップショートカットメニューから[チェック]オプションを選択すると、開発がポップアップ表示されます次に示すメーカーツール：
前述のように、ここには、ページのロードプロセス中にブラウザとサーバー間で送信されたリクエストと受信されたレスポンスのすべてのレコードがあります。
Ajaxには、xhrと呼ばれる特別な要求タイプがあります。この図では、TypeがxhrのgetIndexで始まるリクエストが見つかります。これはAjaxリクエストです。このリクエストの詳細情報を表示するには、このリクエストをマウスでクリックしてください。
リクエストヘッダー、URL、レスポンスヘッダーなどの情報が右側に表示されます。図に示すように、リクエストヘッダーにメッセージがX-Requested-With：XMLHttpRequestとしてあり、リクエストをAjaxリクエストとしてマークし
ます。次に[プレビュー]をクリックすると、JSON形式のレスポンスのコンテンツが表示されます。ここでChromeが自動的に分析を行います。矢印をクリックして、対応するコンテンツを展開したり折りたたんだりします。
返された結果は、ニックネーム、プロフィール、アバターなどの私の個人情報であることがわかります。これは、個人のホームページのレンダリングに使用されるデータでもあります。JavaScriptがこれらのデータを受信すると、対応するレンダリングメソッドが実行され、ページ全体がレンダリングされます。
さらに、[Response]タブに切り替えて、
次のように実際の戻りデータを確認することもできます。次に、最初のリクエストに戻り、次のようにその応答を確認します。
これは元のリンクhttps://m.weibo.cn/u/2830678474によって返された結果は、50行未満のコードと非常に単純な構造ですが、一部のJavaScriptが実行されます。
したがって、表示されるWeiboページの実際のデータは元のページから返されませんが、JavaScriptを実行した後、Ajaxリクエストをバックグラウンドに再度送信し、ブラウザーがデータを取得してさらにレンダリングします。
フィルター要求
次に、Chromeデベロッパーツールのフィルタリング機能を使用して、すべてのAjaxリクエストを除外します。リクエストの上にフィルターバーのレイヤーがあり、XHRを直接クリックします。このとき、下に表示されるすべてのリクエストはAjaxリクエストです（図に示すように）。
次に、ページをスライドし続けると、ページの下部に新しいリクエストがあることがわかりますWeiboが投稿され、すべてのAjaxリクエストをキャプチャできるように、Ajaxリクエストは引き続き開発者ツールの下に表示されました。
アイテムを自由にクリックすると、リクエストURL、リクエストヘッダー、レスポンスヘッダー、レスポンスボディ、およびその他のコンテンツを明確に表示できます。現時点では、リクエストのシミュレーションと抽出は非常に簡単です。
下の図に示されている内容は、私のWeiboの特定のページのリスト情報です。
これまでは、Ajaxリクエストの詳細情報を分析することができ、これらのAjaxリクエストをプログラムでシミュレートするだけで簡単に抽出できます必要な情報。