【jQuery】Ajax

「Ajax」とは?

簡単に言うとJavaScriptでサーバー側と非同期通信を行うためのものになります。

サーバーと通信中であっても別の処理を引き続き行えます。

ユーザーに待ち時間を感じさせないサイトを作ることができます。

 

 

jQueryでAjax

jQueryでなくてもjavascriptやaxiosなどでできますが、ここではjQueryによる方法を紹介します。

書き方①


$.ajax({
    url: サーバーのURLなど,
    type: 方法(GET / POSTなど),
    success: function(data) {
        //データ取得が成功したときの処理
    },
    //通信エラーになった場合の処理
    error: function(err) {
        //データ取得が失敗したときの処理
    }
});
 

書き方➁


$.ajax({ 
   url: サーバーのURLなど, 
   type: 方法(GET / POSTなど),
      data:,サーバーへ送信するデータです。 もし文字列で無ければ、クエリー文字列に変換されます。(【JSON.stringify(jsonデータ)】),
    ContentType: ファイル形式(【application/json; charset=UTF-8】や【text/html; charset=UTF-8】など),
     cache:【false】を指定するとキャッシュが残らない。,
     timeout:通信がうまく終わらないときに指定した秒数後エラーにします。指定しないと通信が終わるまでローディングになります。(【10000】など),
     xhrFields:ネイティブのXHRオブジェクト上に設定する、フィールド名/フィールド値のペアのオブジェクトを指定します。(クロスドメイン対策の【withCredentials: true】など),
     beforeSend:function(xhr, setting) {
           //Ajax通信を送信する前に任意の処理(以下はベーシック認証の情報を付与してベーシック認証が必要なサイトでも通信ができるようにする)
          xhr.setRequestHeader('Authorization', 'Basic ' + $.base64.encode(ベーシック認証ID:ベーシック認証pass));  
   }
  }).done(
    //通信が成功した場合の処理または関数
  ).fail(
       //通信が失敗した場合の処理または関数
    );

 

 

 

投稿者 PASOMEN

関連投稿

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です