jQuery 言語

JQueryのAjax通信してみた

Ajax(asynchronous JavaScript+ XML)とは

JavaScriptとHTTP通信機能を使い、Webページのリロードや画面遷移を伴わずにサーバとのデータやり取りを行う処理のことを言います。ajaxは非同期処理方式にも対応しているため、ユーザ操作に影響することなく裏でデータを取得すること等を得意としています。

Jquery Ajaxについて

概要

ブラウザの互換性を意識することなく、Ajax通信を実現できます。以下のような短いコードで簡単にAjax通信を行うことができるので便利です。

$.ajax({
	type: "POST",
	dataType: 'json',
	data: JSON.stringify(param),
	contentType: "application/json; charset=utf-8",
	async: false,
	url: actionPath,
	timeout: 10000,
	beforeSend: function () {
  //通信前の処理
		});
	}
}).done(function (data) {
	//成功時の処理
}).fail(function (XMLHttpRequest) {
	//エラー時の処理
}).always(function (data) {
	//処理終了時の処理
});

主な通信オプション

type

HTTPリクエストの種類を指定します。

type: "リクエストの種類"

■リクエストの種類
・POST //POST通信
・GET  //GET通信

data

送信先に送るパラメータを指定します。

data : "データ"

■データ
・Hash形式
・string形式
・array形式

async

通信方式（同期：非同期）を指定します。未設定の場合は非同期通信とされます。

async: "通信方式"

■通信方式
・false //同期通信
・true  //非同期通信

dataType

サーバからの期待レスポンス形式を指定します。

dataType : ”期待レスポンス形式"

■期待レスポンス形式
・json
・html
・text
・xml
・json
・script
・jsonp

username、password

HTTP認証が必要な場合、認証情報を指定します。

username : 'ユーザネーム',
password : 'パスワード'

crossDomain

クロスドメイン許可設定を行います。指定なしの場合はクロスドメイン不可に設定されます。

crossDomain : "クロスドメイン設定"

■クロスドメイン設定
・true  //クロスドメイン許可
・false //クロスドメイン不可

cache

 通信結果のキャッシュ設定を行います。未設定の場合はキャッシュされる。

cache : "キャッシュ設定"

■キャッシュ設定
・true  //キャッシュする
・false //キャッシュしない

timeout

リクエストのタイムアウト(ミリ秒)で設定します。

timeout: "タイムアウトのミリ秒"

url

リクエストを送信するURLを指定します。

その他（以下URL参考）

http://js.studio-kingdom.com/jquery/ajax/ajax

イベント

$.ajax({
	beforeSend: function () {
  　　　//通信前の処理
		});
	}
}).done(function (data) {
	//成功時の処理
}).fail(function (XMLHttpRequest) {
	//エラー時の処理
}).always(function (data) {
	//処理終了時の処理
});

done

通信処理成功時のイベントです。

fail

通信失敗時のイベントです。

always

通信終了時のイベントです。失敗しても成功しても呼ばれます。

beforeSend

通信前のイベントです。通信前に設定したい情報を記載します。

-jQuery, 言語