ホームページ >ウェブフロントエンド >jsチュートリアル >jquery.ajax_jquery の beforeSend メソッドの使用方法の概要
jquery.ajax_jquery の beforeSend メソッドの使用方法の概要
- WBOYオリジナル
- 2016-05-16 16:28:291767ブラウズ
一般的な効果は、ajax リクエストを行うときに、戻る前に小さな回転読み込みアイコンまたは「コンテンツ読み込み中...」が表示され、データがリクエストされていることをユーザーに知らせることです。これは、beforeSend メソッドを使用して実現できます。
デモをダウンロード: ajax 読み込み
コードは次のとおりです:
関数 test_ajax(){
$.ajax(
{
Type: "GET", // 通常、GET と POST の 2 つのタイプが使用されます。デフォルトは: GET
URL: "a.php", // (デフォルト: 現在のページのアドレス) リクエストを送信するアドレス
DataType: "html", //サーバーによって返されることが予期されるデータ型。
beforeSend:beforeSend, //リクエストを送信
Success:callback, //リクエストは成功しました
error:error,//リクエストエラー
complete:complete//リクエストが完了しました
});
}
関数 error(XMLHttpRequest, textStatus, errorThrown){
// 通常、textStatus と errorThown のいずれか 1 つだけが値
を持ちます。 $("#showResult").append("
}
関数 beforeSend(XMLHttpRequest){
$("#showResult").append("
}
function complete(XMLHttpRequest, textStatus){
$("#showResult").remove();
}
関数コールバック(msg){
$("#showResult").append("
}
beforeSend メソッドは、リクエストをサーバーに送信する前にいくつかの処理関数を追加するために使用されます。これは、ajax リクエストが開始される前にトリガーされる ajax イベントで、通常、ユーザーは XMLHttpRequest オブジェクトを変更できます (追加のヘッダー情報の設定など)。ajax イベントの説明については、ドキュメントを参照してください。 http://docs.jquery.com/Ajax_Events
多くの Web サイトで、コンテンツの読み込み中に「データを読み込んでいます。お待ちください」というプロンプトが表示され、コンテンツの読み込み後にコンテンツが表示される状況も確認されています。コンテンツがロードされるときに、読み込みプロンプトとして表示されるデフォルトのテキストを設定できます。ID セレクターを使用して、タグ内のテキストを最終コンテンツに置き換えることができます。これを使用して beforeSend を置き換えると、より効率的になります。
いつ beforeSend を使用するか、いつテキスト置換を使用するかは、ajax リクエストの前後で表示する DOM 要素が一貫しているかどうかによって決まります。表示する DOM 要素がリクエストの前にすでに存在している場合は、上記のテキスト置換メソッドを使用します。さらに他の要件を追加する必要がある場合は、 beforeSend を使用して処理する方が良いでしょう。