ajaxまとめ


ajax時に設定するオプション、通信結果をまとめてみました。

## $.getや$.postを使った時の通信結果

```php:msg.php
<?php
echo $POST['msg'];
?>
```

```javascript:sample.js
	$.get('msg.php',{ msg: 'てすと'}, function(data, status, xhr){

		console.log(this.url);			//msg.php?msg=%E3%81%A6%E3%81%99%E3%81%A8
		console.log(data);				//てすとを表示
		console.log(status);			//success

		console.log(xhr.status);		//200
		console.log(xhr.statusText);	//OK
		console.log(xhr.responseText);	//てすとを表示

		console.log(xhr.getAllResponseHeaders());   //すべてのレスポンスヘッダー

		//個別にヘッダーを取得する場合
		console.log(xhr.getResponseHeader("Date"));				//Sun, 07 Dec 2014 15:20:04 GMT 
		console.log(xhr.getResponseHeader("Content-Type"));		//text/html; charset=UTF-8
		console.log(xhr.getResponseHeader("Content-Length"));   //18
		console.log(xhr.getResponseHeader("Last-Modified"));	//12/07/2014 15:19:00

	});
```

 \$.getや$.post時に「404 Not Found」等のエラーの場合、**実行されない**のでajaxSetupでエラー処理する必要があります。


```javascript:sample.js
	$.ajaxSetup({
		error: function(xhr, status, error){
			console.log(this.url);		//msg.php?msg=%E3%81%A6%E3%81%99%E3%81%A8
			console.log(status);		//error
			console.log(xhr.status);	//404
			console.log(error);			//Not Found 
		}
	});
	
```

## $.ajaxを使った通信処理

```javascript:sample.js
	
	//fileタイプを送る場合はFormDataを使う
	var fd = new FormData($('#mainform'));
	fd.append("msg", "てすと");
	fd.append("upimg", $('input[name=upimg]').prop('files')[0] );

	$.ajax({
		url: 'msg.php',
		type: 'POST',
		//data: fd, 		//fileタイプを送る場合にセット
		data: {
				msg: 'てすと'
		},
		//processData: false,			//fileタイプを送る場合はfalse
		//contentType: false,			//fileタイプを送る場合はfalse
		dataType: 'html',				//text xml html script json jsonp
		jsonp: 'jsoncallback',			//dataTypeでjsonpを指定した場合
		crossDomain: true,				//クロスドメインの場合
		timeout: 3000,					//タイムアウト3秒
		async: true,					//非同期
		cache : false,					//キャッシュを残さない
		username: 'myname',				//HTTP認証が必要な場合
		password: 'mypassword',			//HTTP認証が必要な場合
		
		beforeSend: function (xhr) {	//リクエスト前に実行

				console.log('ヘッダーをセットして送信！');
				//xhr.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8");
		}
	}).done(function(data, status, xhr){	//通信成功時の処理

			console.log(data);				//てすとを表示
			console.log(status);			//success

			console.log(xhr.status);		//200
			console.log(xhr.statusText);	//OK
			console.log(xhr.responseText); 	//てすとを表示

			$(document.body).append(data);

	}).fail(function(xhr, status, errmsg) {		//通信失敗時の処理

			console.log(xhr.status);		//404
			console.log(status);			//error
			console.log(errmsg);			//Not Found

	}).always(function(arg1, status, arg2) {	//通信が完了したら呼ばれる

		console.log(this.url);	//msg.php

		//リクエストの結果によって引数のオブジェクトが変わるみたい
		if(status == 'success'){

				console.log(arg1);			//てすとを表示
				console.log(status);		//success
				console.log(arg2);			//xhrオブジェクト
				console.log(arg2.status);	//200

		}else if(status == 'error'){

				console.log(arg1);			//xhrオブジェクト
				console.log(arg1.status);   //404
				console.log(status);		//error
				console.log(arg2);			//Not Found
		}
	});
```

fileタイプを送る場合はformに「enctype="multipart/form-data"」を設定します。
ajaxにセットするパラメーターはFormDataとして送ります。
この時**「processData: false」、「contentType: false」**を設定します。

```:html
	
	<form action="msg.php" method="post" enctype="multipart/form-data" id="mainform">
			<input type="file" name="upimg">
	</form>
	
```

PHP側ではmsgとfileがあれば表示します。

```php:msg.php

	echo $_POST['msg'] . 'を表示<br>';

	if(isset($_FILES["upimg"]["tmp_name"])){

		$fp = fopen($_FILES["upimg"]["tmp_name"], "r");
		$contents = fread($fp, $_FILES["upimg"]["size"]);
		fclose($fp);

		echo '<img src="data:'. $_FILES['upimg']['type'] .';base64, ' . base64_encode($contents) . '" >';
		
	}
	
```

簡単な処理は\$.get、\$.postを使い、重い処理は\$.ajaxと使い分けるといいと思います。
注意点は、\$.ajaxのときに、alwaysで受け取る引数が通信ステータスによって変わってしまうので気をつけてください。