1. ホーム
  2. JavaScript

jquery.ajaxのbeforeSendメソッド(プログレスバー、「お待ちください」プロンプトなどを解決する .............................)。

2022-02-20 04:22:04

ajaxでリクエストすると、リクエストが返される前に小さな回転するローディングアイコンまたは "コンテンツ読み込み中..."が表示されます。 は、データがリクエストされていることをユーザーに通知するために使用されます。これは beforeSend メソッドで行うことができます。

デモをダウンロードする AJAXローディング

コードは以下の通りです。

コピーコード コードは以下の通りです。

function test_ajax(){
   $.ajax(
   {
      type:"GET",// 通常は2つのタイプが使用されます。GET,POST。デフォルトは GET
      url:"a.php",//(default: 現在のページのアドレス) リクエストを送信するアドレスです。
      dataType:"html",// サーバーから返されることが期待されるデータのタイプです。
      beforeSend:beforeSend, //送信要求
      success:コールバック, //リクエスト成功
      error:error,//Error on request 
      complete:complete//リクエストが完了しました。
   });
}
function error(XMLHttpRequest, textStatus, errorThrown){ (XMLHttp リクエスト、テキストステータス、エラースロー)。
  // 通常はtextStatusとerrorThownのどちらか一方だけが値を持ちます。 
  $("#showResult").append("<div>Request error! </div>") を実行します。
}
関数 beforeSend(XMLHttpRequest){
  $("#showResult").append("<div><img src='loading.gif' /><div>") を実行します。
}
function complete(XMLHttpRequest, textStatus){.
  $("#showResult").remove() を実行します。
}
関数コールバック(msg){
  $("#showResult").append("<div>Request successful, callback number:"+msg+"<div>") を追加します。
}

メソッド beforeSend は、サーバーにリクエストを送信する前に、いくつかのハンドラ関数を追加するために使用されます。これは ajax リクエストが開始される前に発生する ajax イベントで、通常、ユーザは XMLHttpRequest オブジェクトを変更できます (例: 追加のヘッダー情報を設定する)。ajaxイベントの説明については、以下のドキュメントを参照してください。 http://docs.jquery.com/Ajax_Events

また、多くのサイトでは、コンテンツの読み込み中に "データ読み込み中です、お待ちください" と表示し、読み込みが終了したらコンテンツを表示するという状況が見受けられます。ロードプロンプトとして表示するデフォルトテキストを設定し、コンテンツがロードされたら、IDセレクタを介してそのタグ内のテキストを最終的なコンテンツに置き換えることができるのです。beforeSendをこれに置き換えると、より効率的です。

beforeSendをいつ使うか、テキスト置換をいつ使うかは、ajaxリクエストの前後に表示するDOM要素が一致しているかどうかで決まります。もし表示するDOM要素がリクエストの前に既に存在していたなら、上記のようにテキスト置換で処理する方が良いでしょう。.