お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

ありのまま起こった事(略)気がついたらデータが変わっていた(略)

非同期通信です。
画面更新を行わずデータ通信を行う手法の事です。

非同期通信

XMLHttpRequest(HTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。(原文ママ)
XMLHttpRequestを使って通信しているってことです。
結構ややこしいのでネイティブJS側では端折っていますが、ネイティブJSでも組めます。

load

htmlファイルの内容を読み込んでDOMに組み込みます。
読み込んで取得するのはbodyタグ内のコンテンツとなります。
また、一部のみ抜き取る事も可能です。
引数は3つです。

第一引数

読み込むHTMLファイルのパスを指定します。
別ドメインのHTMLファイルを読み込む事はできません。
また、ファイルパスのみの指定だと。body内のhtmlが全て読み込まれます。
一部抜き取る場合は、半角スペースを開けてセレクタで指定します。

第二引数

リクエストと一緒に送信する文字列またはプレーンオブジェクトを指定します。
省略が可能です。

第三引数

コールバック関数です。
処理完了後に実行されます。
通信状況のコールバックを確認することもできます。

// 全取得
$('#loadElem').load('./index2.html',function()
{
 console.log('読み込み完了っぽい');
});

// 一部取得
$('#loadElem').load('./index2.html .elem2',function()
{
 console.log('読み込み完了っぽい');
});

getJSON

JSONファイルの読み込みを行う事ができます。
読み込んだJSONファイルはこの関数のコールバック内でのみ使用できます。
また、この関数はajax関数の略式となりますので、ajax関数で記述することも可能です。

第一引数

読み込むJSONファイルのパスを指定します。
別ドメインのJSONファイルを読み込む事はできません。
別ドメインのJSONファイルを使用するときはJSONP形式を使用しましょう。

第二引数

リクエストと一緒に送信する文字列またはプレーンオブジェクトを指定します。
省略が可能です。

第三引数

コールバック関数です。
処理完了後に実行されます。
通信状況のコールバックを確認することもできます。
とはいえ、読み込みエラーが発生するとコールバック動かないので
基本データ取得だけの指定で大丈夫です。

$.getJSON('./js/module.json',function(data)
{
 // 取得したJSONデータはこの中でのみ使用可能
 console.log(data);
});

getScript

外部JSを読み込み実行させます。
htmlには書けないような動的にファイル名を変えるとかそんなときに使用します。
また、この関数はajax関数の略式となりますので、ajax関数で記述することも可能です。

第一引数

読み込むJSファイルのパスを指定します。
別ドメインのJSファイルを読み込む事はできません。

第二引数

リクエストと一緒に送信する文字列またはプレーンオブジェクトを指定します。
省略が可能です。

第三引数

コールバック関数です。
処理完了後に実行されます。
通信状況のコールバックを確認することもできます。
とはいえ、読み込みエラーが発生するとコールバック動かないので
無名関数の引数は指定なしでもいいと思います。

$.getScript('./js/module2.js',function()
{
 console.log('読み込み完了っぽい?');
});

ajax

非同期通信処理の大御所。ajaxさんです。
ちょっと複雑ですが、何度かやって慣れてください。

第一引数

オブジェクト形式でもろもろの設定を渡します。
もう一度いいます。オブジェクト形式で渡します。
引数は1個です。

設定の内容について

ajaxのリファレンス
にもありますが。結構な量があります。
例によって抜粋です。

url

通信先を指定します。
path指定、url指定なんでもいいです。

type

通信方式を指定します。
要するにGETかPOSTかの違いとなります。
デフォルトではGETとなります。

dataType

どんなデータを受け取るのかを指定します。
text、html、xml、 json、jsonp、scriptを指定します。
デフォルトでは自動判別をするようです。

cache

キャッシュするかどうかを設定します。
trueでキャッシュ有効 falseでキャッシュ無効とします。
デフォルトはtrue
ただし、dataTypeが'script'または'jsonp'の場合は、falseとなります。

jsonp

jsonpでの通信を行う場合でかつ、GET値のデータ名を指定します。
デフォルトは callback です。
callback=? の callback部分です。

jsonpCallback

jsonpでの通信を行う場合でかつ、GET値のデータを指定します。
デフォルトは ?(実際の通信ではランダムな数字jQuery1234567890のようなもの) です。
callback=? の ?部分です。

statusCode

レスポンスコードを指定し、レスポンスコードによって処理をすることができます。

$.ajax({
 statusCode: {
  404: function() {
   alert( "page not found" );
  }
 }
});

$.ajax(
{
 'url':'./js/modulessss.json',
 'type':'POST',
 'dataType':'json',
 'cache':true,
})
.done( function()
{
 // 通信成功時
 alert('done');
})
.fail(function()
{
 // 通信失敗時
 alert('fail');
})
.always(function()
{
 // 通信完了時(成功失敗を問わず)
 alert('always');
});