WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

Ajax

Ajax (エイジャックス)とは、Asynchronous JavaScript + XML の略で、非同期通信を利用してデータを取得したり、動的にウェブページの内容を書き換える技術のことです。

http://ajax.pgtop.net/category/4229716-1.html

非同期通信は、通信を開始したら次の処理に進んでしまうので、
終了時間が分からない。

JSONの読み込み

var _url = 'JSONのURL';
var jsonload = function(){
  $.ajax({
    url: _url,
    dataType: "jsonp",
    jsonpCallback: "callback",
    crossDomain: true,
    cache: false,
    success: function(json) {
      通信が成功した時の処理
    },
    error: function() {
      console.log('error');
    }
});
}

JSONファイルは同一ドメイン間でなければ読み込みができないので
ドメインにあるデータを読み込む場合は必ずJSONPの方を利用する。

www.jquerystudy.info

設定可能なプロパティ

【cache】-キャッシュ

設定する値:true,false
デフォルト:true(dataTypeがscriptとjsonpの場合はfalse)

ブラウザによるキャッシュを有効にするかどうかを設定する。
注意しなければならないのは、JSONの場合はデフォルトで
cache:true、JSONPの場合はcache:falseとなっている点。
JSONをキャッシュしたくない場合はfalseを設定する必要がある。

【complete(jqXHR,textStatus)】-コンプリート

設定する値:functionまたは配列
デフォルト:なし

通信完了時に実行するfunctionを設定する。
引数で渡される「textStatus」は「success/notmodified/error/timeout/about or parsererror」の5種類

【crossDomain】-クロスドメイン

設定する値:true,false
デフォルト:同じドメインはfalse,異なるドメインはtrue

同じドメインにも関わらず、強制的にクロスドメインでリクエストしたいときにtrueにする。
他のドメインにリダイレクトするときなどに利用する。

【dataType】-データタイプ

設定する値:文字
デフォルト:xml,json,script,htmlの中から自動判別

サーバーから受け取るであろうデータの形式を設定する。
v1.5からは半角スペースを挟んで複数のタイプを設定できる。
指定しておくと何のデータ形式か分かりやすく、間違った形式を自動判別されることがないので
追加しておいたほうが良い。

error(errorThrown,jqXHR,textStatus)】-エラー

設定する値:function
デフォルト:なし

通信が失敗した時に実行するfunctionを設定する。
textStatusには失敗した原因(timeout/error/about/parsererror)がわたされる。
errorThrownには「Not Found」や、「Internal Server Error」のような
HTTPステータスがわたされる。
v1.5以降では値に複数のfunctionを含む配列を設定できるようになった。

【type】-タイプ

設定する値:string
デフォルト:getメソッド

送信形式(getメソッド/postメソッド)を設定する。

【url】-アドレス

設定する値:文字
デフォルト:現在のページurl

リクエストの送信先URLを設定する。

【success(data,jqXHR,textStatus)】-サクセス

設定する値:function
デフォルト:なし

通信が成功した時に実行するfunctionを設定する。
dataは受信したデータが渡される。
v1.5以降では値に複数のfunctionを含む配列を設定できるようになった。