ITメモ
JavaScript
「Javascript」の基礎知識
「Javascript」とは「Node.js」とは「Ajax」とは「chart.js」とは「Javascript」の使い方「Javascript」の「エラーチェック」をする方法「Javascript」の「変数」「Javascript」の「配列(Array)」「Javascript」の「DOM(Document Object Model)」の「使い方」「Javascript」の「関数 / Function」「Javascript」の「条件分岐・繰り返し」「Javascript」の「イベントハンドラー(Event Handler)」「Javascript」の「文字」を操作する方法「Javascript」の「文字」を検索する方法「Javascript」の「スコープ」「Javascript」の「ファイル操作方法」「Javascript」の「画像操作方法」「Javascript」の「情報」を出力・チェックする方法「Javascript」での「ヒアドキュメント」の使い方「Javascript」の「Built-in Object(ビルトインオブジェクト)」「Javascript」の「ライブラリー / Library」
Reference
数字
「Javascript」で「計算」に誤差が出る時の解決方法
ファイル読み込み
「XMLHttpRequest」オブジェクト - サーバーのファイルを読み込む方法
イベント
ページ読み込み時に「Javascript」を実行する方法画像読み込みが完了してから、次の処理を実行する方法「addEventListener()」の使い方 - イベントが発生したのを検知して実行する方法
要素情報
HTMLタグの「class」属性値を取得、変更する方法「querySelector()」の使い方 - HTML要素の情報を参照・設定する方法「querySelectorAll()」の使い方 - 要素内の指定した子要素を参照・設定する方法「classList」プロパティ - HTMLタグ属性値「class」の情報を参照・確認・追加・削除する方法「getElementById()」の使い方 - HTML要素の情報を「ID名」で参照・設定する方法「getElemetnsByClassName()」の使い方 - HTML要素の情報を「クラス名」で参照・設定する方法「Node.Childnodes」の使い方 - 要素内の子要素を参照・設定する方法「ParentNode.children」の使い方 - 要素内の子要素を参照・設定する方法要素の配置位置を確認する方法
Style関連
スタイル属性(色・線・大きさなど)を参照・変更する方法「getPropertyValue」メソッド - 指定されたCSSプロパティの値などを取得する「getComputedStyle」メソッド - CSSを適用したスタイルを参照する
ページ関連
Webページのタイトルを変更する方法「モニター」情報を取得する方法「ブラウザ」情報を取得する方法「ページ」情報を取得する方法「イベント」情報を取得する方法「マウス」情報を取得する方法
サイズ関連
要素の縦・横サイズを参照・変更する方法「モニター」「ブラウザ」のサイズ情報を取得する方法
端末情報
スマートフォンからのアクセスを識別する方法
Library「jQuery」
【jQuery】とは【jQuery】の書式【jQuery】「Javascript」にリンクさせる方法【jQuery】「Javascript」に記述する方法【jQuery】のオブジェクト【jQuery】「CSS」を参照・設定する方法【jQuery】「HTML」要素の情報を参照・設定する方法【jQuery】「HTML」タグを追加する方法【jQuery】ユーティリティ関数【jQuery】イベントアクションを設定する方法【jQuery】イベントオブジェクト「.on」の使い方【jQuery】読み込み完了してから実行する「.ready」の使い方【jQuery】「Ajax」を使う方法【jQuery】「エフェクト」「アニメーション」を使う方法





【Javascript + jQuery】「jQuery」で「Ajax」を使う方法

【Javascript + jQuery】
「jQuery」で「Ajax」を使う方法




「Ajax」は、
正式名「 Asynchronous JavaScript and XML」といい、
「Javascript」の技術の1つで、HTMLページから独立して、
バックグラウンドにおいて「Javascript」だけで、サーバー通信する非同期通信技術。
「Ajax」によって、「javascript」でサーバーとの通信中であっても、ユーザーは画面上で、HTML画面を操作し続けることができる。


「jQuery」でも、「Ajax」を使用することができる。
「Javascript」で「Ajax」を利用すると、
かなり複雑なコードと知識が必要ですが、
「jQuery」では、比較的シンプルなコードで、
「Ajax」を利用することができる。



「Ajax」を使うための関数・メソッド

関数・メソッド説明
$.ajax() ・$.ajax()
・jQuery.ajax()
.load() 指定URLから、「Ajax」でコンテンツを取得し、
HTMLとして要素内に配置・置換する。
$.get()「$.ajax()」の簡易版
$.post()「$.ajax()」の簡易版
$.getJSON()
$.getScript()
$.param()
.serialize()
.serializeArray()


「$.ajax()」の書式

jQuery.ajax({url, type, dataType, beforeSend, success, error, complete, timeout, cache});
jQuery.ajax(url[,settings])
jQuery.ajax([settings])


プロパティ説明
送信設定
url 通信 する URL( デフォルト、 現在 開い て いる URL)
type デフォルトは、「GET」。
「GET」か「POST」を指定。
「type」ではなく「method」で指定しても可能。
data サーバーに送信するデータ。
文字列やオブジェクト形式で指定可能。
受信設定
dataType 受信時に受け取るデータタイプを指定。
「text」「html」「xml」「json」「jsonp」「script」などが設定可能。
省略すると「jQuery」が自動検出・設定してくれる。
beforeSend AJAX通信開始前に呼ばれるコールバック関数を指定。
success 成功時に実行されるコールバック関数。
成功した時のデータの処理を記述する。
error 通信に失敗したときに呼ばれるコールバック関数。
通信の失敗したときに、どうするかを記述する。
complete 「Ajax」の通信終了時に呼ばれるコールバック関数。
通信の成功・失敗にかかわらず実行される処理。
timeout 通信がエラーとして処理されるまでの時間(ミリ秒)を指定。
デフォルトは、「0(制限なし)」。
cache 「GET」方式において、「false」に設定すると、
毎回最新データを取得しに行く。
キャッシュデータを利用しない設定になる。
デフォルト設定は、「true( キャッシュ する)」なので、
キャッシュデータを取得していることもある。


「$.ajax」のサンプルコード


<form><input type =" button" id ="ib001" value ="送信"></form>

テキストファイルを受信して、全部をコンソール表示する

$("#ib001").on("click", function(){
$.ajax({
url:'./ディレクトリ名/ファイル名.txt',
type: "GET",
dataType: "text",
success: function (data) {
console. log(data);
}
});
});


「json」ファイルを受信して表示する

$("#ib001").on("click", function(){
$.ajax({
url:'./ディレクトリ名/ファイル名.json',
type: "GET",
dataType: "json",
success: function (data) {
console. log("データ内容は、Sample1 = "+data.sample1+" & Sample2 = "+data.sample2+"です。");
}
});
});


「POST」でPHPファイルを送受信する

$("#ib001").on("click", function(){
$.ajax({
url:'./ディレクトリ名/ファイル名.php',
type: "POST",
dataType: "json",
data:{ "myname": "Tony", "mypass": "abc123", }, success: function (data) {
if(data.result==="OK"){ console. log(data.message);
}else{ console. log("You can’t login.");
} }
});
});


Back