jquery ajaxメソッド

TOPページに戻る > jquery入門

jquery ajax()メソッド

ajaxメソッドは、様々な外部ファイルを読み込むメソッドです
jqueryでajaxを利用するための基本的なメソッドです。エラー時のコールバックなど複雑な機能を使うことができます
サーバーからtextファイルやHTMLファイル、xmlファイルなど様々なファイルを読み込むことができます
jqueryでajaxを使う時はutf-8以外は文字化けするので文字コードはmetaタグでutf-8にしてください。読み込むファイルもutf-8で保存してください

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

複数の設定を指定した例、この場合はファイルurl、送信方法、成功した時の処理を設定しました。他にもいくつも設定できます

$(function() {
	$.ajax({
		url: 'ファイルのurl',
		type: '送信方法',
		success:  function(data) {
		 成功したときの処理
		}
	});
});

ajax()でファイル成功処理と失敗したときの処理

textファイルを読み込んでボタンをクリックしたときに#hogeに取得したデータを表示します。もし、ファイルがない場合はエラーの処理をします

jquery

$(function() {
	$.ajax({
		url: './hoge.txt',
		type: "get",
		success:  function(data, textStatus) {
	      $('button').click(function(){
		     $('#hoge').html(data);
		  });
		},
		error: function(xhr, status, err) {
		  $('button').click(function(){
		     $('#hoge').html('エラー発生');
		  });
		}
	});
});

css

#hoge{
 border: solid 1px;
 width: 250px;
 height: 250px;
 }

html

<div id="hoge"></div>
<button>ボタン</button>

サンプル

textファイルを読み込む
読み込むファイル:hoge.txt

設定一覧

設定	説明
async	非同期通信フラグ。初期値ではtrue（非同期通信）。false（同期通信）
beforeSend	Ajaxリクエストが送信される前に実行されるAjaxイベント（受け取る引数はXMLHttpRequestオブジェクト）
cache	通信結果のキャッシュ設定。true、false
complete	AJAX通信完了時に実行されるAjaxイベント
contentType	content-typeヘッダの値。初期値は"application/x-www-form-urlencoded"
data	サーバに送信する値。文字列
dataFilter	データをフィルタリングするための関数
dataType	サーバから返されるデータ形式、html、text、xml、script、jsonなど
error	通信がエラーのときに呼び出されるAjaxイベントです。受け取る引数は、MLHttpRequestオブジェクト、エラーの種類("timeout", "error", "notmodified", "parsererror"など)、エラーオブジェクトを受け取ります
global	グローバルイベントを実行。初期値はtrue。falseにもできる
ifModified	前の通信から変更がある場合に成功ステータスを返します。初期値はfalse。trueにもできる
jsonp	jsonpリクエストのパラメータ名を指定できる
password	認証が必要なときに設定するパスワード。文字列
processData	dataオブジェクトをクエリ文字列に変換する設定。初期値はtrue。falseにもできる
scriptCharset	dataType="script"、"jsonp"の文字コードが違う場合に指定する
success	通信が成功したときに実行される関数。引数には(data, dataType)を受け取る
timeout	タイムアウト時間を設定(ミリ秒)
type	HTTP通信の種類を設定。初期値はget、postにもできる
url	通信先のURL。初期値は現在のページ
username	認証パスワードを設定したときのユーザー名
xhr	XMLHttpRequestオブジェクトを作成したときに実行されるコールバック関数