中小企業に勤めるITエンジニアの徒然日記

中小企業に勤めるITエンジニア(三十路女子)が日々のよしなしごとや、IT技術についての記事をつらつらと書いていきます。

Javascript

Xjqueryの$.ajaxで302リダイレクトされた場合はリダイレクト後のステータスが200が返ってくると聞いたので試してみました。

サンプルコード

test2.html
<!DOCTYPE html>
<html>
<head>
    <title>302リダイレクト時の動作</title>
    <script src="./js/jquery-3.1.0.min.js"></script>
</head>
<body>
 <script>
     $(function(){
         $.ajax({
             type: 'GET',
             url:'./ajax2.php',
             dataType:'json',
             statusCode:{
                 200:function(){
                     console.log('execute 200');
                 },
                 302:function(){
                     console.log('execute 302');
                 }
             }
         }).done(function(data){
             console.log('execute done');
         }).fail(function(){
             console.log('execute fail');
         }).always(function(){
             console.log('execute always');
         });
     });
 </script>
</body>
</html>

ajax2.php
<?php

header('Location:./ajax.json');
exit();

?>

結果

execute done
execute always
execute 200
これは$.ajaxの動作というよりXMLHttpRequestの動作なので、リダイレクト前の内容をajaxで取得することはできないと思われます。
このエントリーをはてなブックマークに追加

以前にも書きましたが、jquery1.8以降ではこれまでのsuccess, errorではなく、.done, .fail, .alwaysを使います。

また、HTTPステータスコードを判定し、処理を分けたい場合は、statusCodeというオプションを設定することで、HTTPステータスコードに応じた動作をさせることができます。

ここで疑問に思ったのが、

「doneとstatusCode:200はどちらが先に実行されるのか?」

ということ

というわけで下記のサンプルコードで調べてみました。

test1.html
<!DOCTYPE html>
<html>
<head>
    <title>done, fail, statusCodeの処理順確認</title>
    <script src="./js/jquery-3.1.0.min.js"></script>
</head>
<body>
 <script>
     $(function(){
         $.ajax({
             type: 'GET',
             url:'./ajax.json',
             dataType:'json',
             statusCode:{
                 200:function(){
                     console.log('execute 200');
                 },
                 404:function(){
                     console.log('execute 404');
                 }
             }
         }).done(function(data){
             console.log('execute done');
         }).fail(function(){
             console.log('execute fail');
         }).always(function(){
             console.log('execute always');
         });
     });
 </script>
</body>
</html>
ajax.json
[]



結果は以下の通り

成功時
execute done
execute always
execute 200

失敗時(404NotFound)
execute fail
execute always
execute 404

結論としては、
.doneまたは.fail→always→ステータスコードごとの処理
となりました。
このエントリーをはてなブックマークに追加

jqueryでAjaxを使いたい場合に$.ajax関数を使用しますが、コールバック関数にsuccessを使っているソースコードがありますが、この書き方はjquery1.8より以前の書き方です。

1.8以降のバージョンでは、.doneを使います。

	$.ajax({
		url: "data.json",
		cache: false,
		data: {
			"id" : "101"
		},
		statusCode: {
			404: function(){
				alert("Page not found.");
			},
500: function(){
alert("Occure Server Error.");
}
 }, type: "json"
}).done(function(data, textStatus, jqXHR){
// success
 }).fail(function(jqXHR, textStatus, errorThrown){
// error
 }).always(function(param1, textStatus, param3){
// successの場合、param1=data, param3=jqXHR
// failの場合、param1=jqXHR, param3=errorThrown
}); });
なお、現在のjqueryのバージョンは以下の通り

メジャーVer.マイナーVer.備考
1.x系1.12※開発終了
2.x系2.2※開発終了
3.x系3.1

という状況なので未だにsuccessを使っている人がいれば教えてあげましょう。
このエントリーをはてなブックマークに追加

css(key, value)を使用する。

例)クリックするとdivを非表示にする
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>test</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="test">click!</div>
<script>
$(function() {
$("#test").click(function(){
$("#test").css("display","none");
});
});
</script>
</body>
</html>
このエントリーをはてなブックマークに追加

オフラインでいろいろしたい場合、
・Web Storage
・IndexedDB
・Application Cache
など、HTML5にはオフラインでWebアプリケーションを利用するための方法がいくつかあります。

IndexedDBの特徴としては、

・Key-Value型
・javascriptから操作ができる
・オリジン(プロトコル/ドメイン/ポート番号)ごとににデータをもつ
・Cookieのようにサーバに自動的に送られはしない

といったところでしょうか。

私が持っているイメージはCookieを大容量・高機能にした、という感じです。


ただし、IndexedDBはKey-Value型なので、それなりのデータ量を扱う場合は、普段からRDBMSをデータストアとしている人には使いづらいところがあるかもしれません。

そんな人におすすめ、IndexedDBをRDBMSのように使える「lovefield」のご紹介をします。


http://qiita.com/ryo-ma/items/33386ec4b4c3b0261ce3


以下がテーブル定義を作成してInsert、Selectするサンプルコードです。



// スキーマを作成
var schemaBuilder = lf.schema.create('SchemaName', 1);

// テーブルを作成
schemaBuilder.createTable('TableName').
    addColumn('id', lf.Type.STRING).
    addColumn('name', lf.Type.STRING).
    addPrimaryKey(['id']);

// テーブルにレコードを追加
schemaBuilder.connect().then(function(db) {
	table = db.getSchema().table('TableName');
	var row = table.createRow({'id': '1', 'name': 'name1'});
	db.insertOrReplace().into(table).values([row]).exec();
});

// テーブルからレコードを抽出する
schemaBuilder.connect().then(function(db) {
	db.select().from(orders).exec().then(function(rows) {
		rows.forEach(function(row){
			console.log(row.id);
		});
	});
});

テーブル操作は非同期なので、同期処理をしたい場合はthenで処理を書いてください。

あとテーブル構造が変わるとよく考えないと面倒です。

私の場合は重複したデータをもつカラムをキー設定してしまったらしく、手動でブラウザのキャッシュを消すまでconnectができなくなりました。。


どうテーブル構造が変わった場合にどうアップデートさせるかはここに書いている模様。

https://github.com/google/lovefield/blob/master/docs/spec/03_life_of_db.md


あまり情報は多くなく、現時点でQiitaに2件、StackOverFlow(英語)に17件と、Googleが開発している割にいまいち人気がないようです。

かなり使いやすいので広まるといいなー。

このエントリーをはてなブックマークに追加

↑このページのトップヘ