非同期通信：Ajaxリクエスト｜jQuery APIリファレンス｜Ajax

TOP Ajax非同期通信：Ajaxリクエスト

jQuery.ajax(options)〔HTTPリクエストを使用してリモードページを読み込む〕
load(url[, data[, callback]])〔リモートファイルからHTMLを読み込ンでDOMに挿入する〕
jQuery.get(url[, data[, callback[, type]]])〔HTTP GETリクエストを使用してリモードページを読み込む〕
jQuery.geJSON(url[, data[, callback[, type]]])〔HTTP GETリクエストを使用してJSON形式のデータを読み込む〕
jQuery.getScript(url[, callback])〔HTTP GETリクエストを使用してローカルのJavaScriptファイルを読み込んで実行する〕
jQuery.post(url[, data[, callback[, type]]])〔HTTP POSTリクエストを使用してリモートページを読み込む〕

jQuery.ajax(options)
HTTPリクエストを使用してリモードページを読み込む

2009/2/27

jQuery.ajax(options)　戻り値：XMLHttpRequest

HTTPリクエストを使用してリモートページを読み込みます。

簡単にjQueryのAjaxを実装できますが、ハイレベルな抽象概念に比べ、エラー時のコールバック関数のような機能性はありません。

$.ajax()は、生成したXMLHTTPRequestを返します。直接操作するのには使いませんが、リクエストを手動で中断する場合に使用します。

$.ajax()はオブジェクトのキーと値のペアを引数としてとり、リクエストの初期化に使用されます。

オプションのdataTypeを指定した場合は、サーバーがリクエストで正しいMIMEタイプを送信することを確認してください。詳細は、AjaxリクエストのためのdataTypeの指定を参照してください。

すべてのリモートPOSTリクエスト（同じドメインではない）は、dataTypeが「script」の時に、GETに変換されます（DOMスクリプトタグを使用することでスクリプトを読み込むため）。

jQuery v1.2からは、「myurl?callback=?」とすることができるJSONPコールバック関数を指定すれば、他のドメインにあるJSONデータを読み込めるようになりました。 jQueryは、指定したコールバック関数を呼ぶための正しいメソッド名で？を自動置換します。または「jsonp」にdataTypeを設定すれば、コールバック関数がAjaxリクエストに自動的に追加されます。

第1引数optionsには、Ajaxリクエストを構成するキーと値のセットを指定します。すべてのオプションは任意です。 $.ajaxSetup()で、どんなオプションにも初期値を設定することができます。

options
オプション	値	デフォルト値	説明
async	真偽値	TRUE	デフォルトで、すべてのリクエストは非同期で送信されます。同期リクエストをする場合は、FALSEを指定してください。同期リクエストは、リクエストがアクティブの間、ブラウザの動作が無効になるよう一時的にブラウザをロックしてください。
beforeSend	関数		送信前のXMLHttpRequestオブジェクトを変更するためのプレコールバック関数を指定します。これは、カスタムハンドラを設定するのに使用します。 XMLHttpRequestは、引数として渡されます。これはAjaxイベントです。関数にFALSEを返すと、そのリクエストはキャンセルされます。 function(XMLHttpRequest){ this; /* Ajaxリクエストに対するオプション */ }
cache	真偽値	「script」データタイプに対するtrue、false	jQuery v1.2で追加されました。 FALSEを指定すると、リクエストがブラウザにキャッシュされません。
complete	関数		リクエストが終了した時（成功時やエラーコールバック関数が実行された後）に呼ばれる関数です。 2つの引数が関数（XMLHttpRequestとそのリクエストの成功したタイプを説明する文字列）に渡されます。 function(XMLHttpRequest, textStatus){ this; /* Ajaxリクエストに対するオプション */ }
contentType	文字列	"application/ x-www-form- urlencoded"	サーバーに送信されたデータです。文字列になっていないなら、クエリー文字列に変換されます。それはGETリクエストのためのURLに挿入されます。この自動処理を防ぐには、processDataオプションを参照してください。オブジェクトはキーと値のペアである必要があります。値が配列の場合、jQueryは同じキーで複数の値をならべます。例えば`{foo:["bar1", "bar2"]`なら「&foo=bar1&foo=bar2"となります。
dataFilter	関数		XMLHttpRequestの生のレスポンスされたデータを扱うのに使用する関数ですこれはレスポンスを並べるためのプレフィルタリング関数です。並べたデータを返すべきです。 2つの引数（サーバーから返された生のデータ、「dataType」引数）が関数に引数として渡されます。 function(data, type){ /* 並べられたデータを返す処理 */ return data; }
dataType	文字列	知的な推測（xmlまたはhtml）	サーバーから期待通りに戻ったデータのタイプ。「none」の場合は何も指定されません。 jQueryは、レスポンスのMIMEタイプを基準に知的にresponseXMLまたはresponseTextのいずれかを成功時に渡します。利用可能なタイプとコールバック成功時に第1引数として渡された結果は、次の通りです。 "xml"：jQueryで処理可能なXMLドキュメントを返します。 "html"：プレーンテキストとしてHTMLを返します。含まれるスクリプトタグは、DOM要素に挿入される時に評価されます。 "script"：レスポンスはJavaScriptとして評価され、プレーンテキストとして返ります。オプション「cache」が使用されていない場合は、キャッシュを無効にします。 "json"：レスポンスをJSON形式のデータとして評価し、JavaScriptオブジェクトを返します。 "jsonp"：JSONPを使用して、JSONブロックを読み込みます。コールバック関数を指定するには、URLの末尾に「?callback=?」を追加します。 "text"：プレーンなテキスト文字列です。
error	関数		リクエストが失敗した時に呼ばれる関数です。 3つの引数（XMLHttpRequestオブジェクト、実行されたエラータイプの説明文、任意の例外オブジェクト）が関数に渡されます。第2引数に指定可能な値は、"timeout"、"error"、"notmodified"、"parsererror"です。これはAjaxイベントです。 function(XMLHttpRequest, textStatus, errorThrown){ /* textStatusまたはerrorThrownの内1つだけを情報として持ちます / this; / Ajaxリクエストに対するオプション */ }
global	真偽値	TRUE	このリクエストに対するグローバルなAjaxイベントハンドラを実行するかどうか。デフォルトはTRUEです。 ajaxStartまたはajaxStopのようなグローバルなハンドラが実行されるのを防ぐには、FALSEを指定します。様々なAjaxイベントをコントロールするのに使用できます。
ifModified	真偽値	FALSE	リクエストが、最後のリクエストから変更されたなら、成功するためにリクエストを許可。最後に更新されたヘッダをチェックすることでこれをします。デフォルト値はFALSEで、ヘッダを無視します。
jsonp	文字列		jsonpリクエスト内のコールバック関数名を無効にします。この値は、GETのためのURLまたはPOSTのためのデータ内のクエリー文字列の「callback=?」部分の「callback」の代わりに使用されます。サーバーに渡した`{jsonp:'onJsonPLoad'}`が起こります。
password	文字列		HTTPアクセス認証リクエストにしようされたパスワード。
processData	真偽値	TRUE	デフォルトで、デフォルトのコンテンツタイプに"application/x-www-form-urlencoded"フィットするクエリー文字列内で処理され変更されるオブジェクトとしてdataオプションに渡されたデータ（技術的には文字列以外のなんでも）。 DOMドキュメントまたは他の未処理データを送信したい時は、このオプションにFALSEを指定します。
scriptCharset	文字列		「jsonp」、「script」データタイプ、GETタイプのリクエストだけ。特定の文字セットとして解釈されることを強制します。リモードとローカル感の異なる文字セットに対してだけ必要です。
success	関数		リクエストが成功した場合に呼ばれる関数。 2つの引数（「dataType」引数にフォーマットされたサーバーから返されたデータ、ステータスの説明文）が関数に渡されます。これはAjaxイベントです。 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }
timeout	数値		リクエストに対するMSの中にローカルタイムアウトをセットします。グローバルなタイムアウトを無効にします。 $.ajaxSetupで設定します。例えば、1秒でタイムアウトする設定をした他のリクエストより長いタイムアウトのリクエストを与えるのにこのプロパティを使うことができます。グローバルなタイムアウトは、$.ajaxSetup()を参照してください。
type	文字列	"GET"	"POST"または"GET"を作るためのリクエストのタイプ。 PUTやDELETEのような他のHTTPリクエストメソッドも使用できますが、すべてのブラウザでサポートされていません。
url	文字列	現在のページ	リクエストするURL。
username	文字列		HTTPアクセス認証リクエストに応じて使用されるユーザー名。
xhr	関数		XMLHttpRequestオブジェクトを生成するためのコールバック関数。 IE、XMLHttpRequest otherwiseで利用可能な場合、ActiveXObjectをデフォルトとします。 XMLHttpRequestに対する実装を無効にしたり、ファクトリーを増強します。 jQuery v1.2.6といくつかのバージョンでは利用できません。

例：JavaScriptファイルを読み込んで実行

$.ajax({
    type: "GET",
    url: "test.js",
    dataType: "script"
});

jQuery.ajaxの使用例サンプルを見る

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQuery::非同期通信::Ajaxリクエスト::jQuery.ajax(options)の使用例</title>
    <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
        $(function(){
            $.ajax({
                type: "GET",
                url: "/module/include/ajax/jquery_ajax_requests/jquery_ajax1.js",
                dataType: "script"
            });
        });
    </script>
</head>
<body>
<!-- CONTENT -->
    <h1>jQuery::非同期通信::Ajaxリクエスト::jQuery.ajax(options)の使用例</h1>
    <p>JavaScriptファイルを読み込んで実行します。アラートが表示されるはずです。</p>
<!-- CODE -->
<!-- / CODE -->
<!-- / CONTENT -->
</body>
</html>

例：サーバーに同じデータを保存し、完了後にユーザーに通知

$.ajax({
    type: "POST",
    url: "some.php",
    data: "name=John&location=Boston",
    success: function(msg){
        alert("データを保存しました："+msg);
    }
});

jQuery.ajaxの使用例サンプルを見る

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQuery::非同期通信:Ajaxリクエスト::jQuery.ajax(options)の使用例</title>
    <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
        $(function(){
            $.ajax({
                type: "POST",
                url: "/content/demo/test.php",
                data: "name=John&location=Boston",
                success: function(msg){
                    $("#res").html("<strong>データを保存しました！</strong><br><br>"+msg);
                }
            });
        });
    </script>
</head>
<body>
<!-- CONTENT -->
    <h1>jQuery::非同期通信::Ajaxリクエスト::jQuery.ajax(options)の使用例 </h1>
    <p>サーバーに同じデータを保存し、完了後に通知します。</p>
<!-- CODE -->
    <div id="res" style="border:1px solid #ccc;padding:10px;"></div>
<!-- / CODE -->
<!-- / CONTENT -->
</body>
</html>

例：HTMLページの最新バージョンを検索

$.ajax({
    url: "test.html",
    cache: false,
    success: function(html){
        $("#res").append(html);
    }
});

jQuery.ajaxの使用例サンプルを見る

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQuery::非同期通信::Ajaxリクエスト::jQuery.ajax(options)の使用例</title>
    <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
        $(function(){
            $.ajax({
                url: "/content/demo/sample.html",
                cache: false,
                success: function(html){
                    $("#res").append(html);
                }
            });
        });
    </script>
</head>
<body>
<!-- CONTENT -->
    <h1>jQuery::非同期通信::Ajaxリクエスト::jQuery.ajax(options)の使用例</h1>
    <p>HTMLページの最新バージョンを検索します。</p>
<!-- CODE -->
    <div id="res"></div>
<!-- / CODE -->
<!-- / CONTENT -->
</body>
</html>

例：同期データを読み込む

リクエストがアクティブの間ブラウザをブロックします。同期が必要な時は、他の方法でユーザー相互作用を防ぐように。

var html=$.ajax({
    url: "index.xml",
    async: false
}).responseText;

jQuery.ajaxの使用例サンプルを見る

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQuery::非同期通信::Ajaxリクエスト::jQuery.ajax(options)の使用例</title>
    <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
        $(function(){
            var html=$.ajax({
                url: "index.xml",
                async: false
            }).responseText;
            $("#res").val(html);
        });
    </script>
</head>
<body>
<!-- CONTENT -->
    <h1>jQuery::非同期通信::Ajaxリクエスト::jQuery.ajax(options)の使用例</h1>
    <p>「index.xml」ファイルの内容を文字列として取得し、テキストエリアに表示します。</p>
<!-- CODE -->
    <textarea id="res" cols="100" rows="20"></textarea>
<!-- / CODE -->
<!-- / CONTENT -->
</body>
</html>

例：サーバーにデータとしてXMLドキュメントを送信

オプションのprocessDataにFALSEを設定すると、データは自動的に文字列に変換されません。

var xmlDocument=[create xml document];
$.ajax({
    url: "page.php",
    processdata: false,
    data: xmlDocument,
    success: handleResponse
});

例：RSS（XMLファイル）を読み込んで表示

設置イメージ

jQuery.ajaxの使用例サンプルを見る

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
    <title>jQuery::RSS（XMLファイル）を読み込んで表示 | 非同期通信::Ajaxリクエスト::jQuery.ajax(options)の使用例</title>
    <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
        $(function(){
            $.ajax({
                url: "index.xml",
                type:"GET",
                dataType:"xml",
                timeout:1000,
                cache: false,
                /* エラー発生時 */
                error:function(){
                    alert("XMLファイルの読み込みに失敗");
                },
                /* 成功時 */
                success:function(xml){
                    $(xml).find("item").each(function(){
                        /* 記事リンク */
                        var item_link=$(this).find("link").text();
                        /* 記事タイトル */
                        var item_title=$(this).find("title").text();
                        /* 記事内容 */
                        var item_desc=$(this).find("description").text();
                        /* 公開日 */
                        var item_date=dateParse($(this).find('pubDate').text());
                        /* 属性の値を取得 */
                        //var item_guide=$(this).find("guid").attr("isPermaLink");
                        /* HTML生成 */
                        if(item_title!="") $("<li></li>").html("<dl><dt><span>"+item_date+"</span><a href='"+item_link+"'>"+item_title+"</a></dt><dd>"+item_desc+"</dd></dl>").appendTo("ol");
                    });
                }
            });
            
        });
        /* 日付のフォーマット */
        function dateParse(dateStr){
            var dateObject=new Date(dateStr);
            y=dateObject.getFullYear();
            m=dateObject.getMonth();
            d=dateObject.getDate();
            if (m < 10) { m ="0"+m; }
            if (d < 10) { d ="0"+d; }
            return y+"年"+m+"月"+d+"日";
        }
    </script>
    <style type="text/css">
        .feed {
            background-color:#fff;
            margin:0; padding:15px;
            border:2px solid #999;
            width:600px; height:300px;
            overflow:auto;
        }
        .feed_title {
            background-color:#999;
            padding:2px 10px;
            color:#fff;
            font-weight:bold;
        }
        ol {
            list-style:none;
            margin:0; padding:0;
        }
        li {
            list-style:none;
            margin:0; padding:0;
        }
        dl {
            margin:0; padding:0;
        }
        dt {
            margin:0; padding:0 0 0 140px;
            position:relative;
        }
        dt span {
            margin:0 1em 0 0;
            position:absolute;
            top:0; left:0;
        }
        dd {
            margin:1em 0 1em 140px; padding:0;
        }
    </style>
</head>
<body>
<!-- CONTENT -->
    <h1>jQuery::非同期通信::Ajaxリクエスト::jQuery.ajax(options)の使用例</h1>
    <p>RSS（XMLファイル）を読み込んで表示します。</p>
<!-- CODE -->
    <span class="feed_title">新着情報</span>
    <div class="feed">
        <ol></ol>
    </div>
<!-- / CODE -->
<!-- /CONTENT -->
</body>
</html>

load(url[, data[, callback]])
リモートファイルからHTMLを読み込ンでDOMに挿入する

2009/2/27

load(url[, data[, callback]])　戻り値：jQuery

リモードファイルからHTMLを読み込み、DOM要素の中に挿入します。

デフォルトはGET送信ですが、パラメータを付けた場合は、POST送信になります。 GET送信の場合は、キャッシュ対策としてURLの末尾に乱数を付加するなどする必要があります。

jQuery v1.2からは、URLの中ににjQueryセレクタを指定可能になりました。そのため、TMLドキュメントをフィルタリングして、セレクタにマッチする要素だけを挿入することができます「url#some > selector」のような構文になります。デフォルトのセレクタは「body > *」です。

第1引数urlには、読み込むHTMLページのURLを指定します。
オプションの第2引数dataには、サーバーに送信するキーと値のペアを指定します。 jQuery v1.3からは、データ文字列を渡すこともできます。
オプションの第3引数callbackには、Ajaxリクエストが完了した時（成功時とは限らない）に実行する関数を指定します。
```
function(responseText, textStatus, XMLHttpRequest){
    this; /* DOM要素 */
}
```

例：リモートファイルのHTMLの一部を読み込む

jQuery.loadの使用例サンプルを見る

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQuery::非同期通信：Ajaxリクエスト::load(url[, data[, callback]])の使用例</title>
    <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
        $(function(){
            $("#sample").load("/content/demo/sample_utf-8.txt li");
        });
    </script>
</head>
<body>
<!-- CONTENT -->
        <h1>jQuery::非同期通信：Ajaxリクエスト::load(url[, data[, callback]])の使用例</h1>
        <p><a href="/content/demo/sample_utf-8.txt">「sample_utf-8.txt」</a>ファイル内のli要素だけを読み込んで表示します。</p>
<!-- CODE -->
        <div style="border:1px solid #ccc;padding:10px;">
            <ol id="sample"></ol>
        </div>
<!-- / CODE -->
<!-- / CONTENT -->
    </div>
</body>
</html>

例：サーバーにデータの配列を渡す

jQuery.loadの使用例サンプルを見る

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQuery::非同期通信：Ajaxリクエスト::load(url[, data[, callback]])の使用例</title>
    <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
        $(function(){
            $("#res").load("/content/demo/test.php", { 'choices[]': ["Jon", "Susan"] } );
        });
    </script>
</head>
<body>
<!-- CONTENT -->
    <h1>jQuery::非同期通信：Ajaxリクエスト::load(url[, data[, callback]])の使用例</h1>
    <p>サーバーにデータの配列を渡します。</p>
<!-- CODE -->
    <div id="res"></div>
<!-- / CODE -->
<!-- / CONTENT -->
</body>
</html>

例：サーバーへ追加パラメータをPOST送信し、サーバーのレスポンス終了時にコールバック関数を実行

jQuery.loadの使用例サンプルを見る

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQuery::非同期通信：Ajaxリクエスト::load(url[, data[, callback]])の使用例</title>
    <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
        $(function(){
            $("#res").load("index.xml", {limit: 1}, function(){
                alert("読込完了");
            });
        });
    </script>
</head>
<body>
<!-- CONTENT -->
    <h1>jQuery::非同期通信：Ajaxリクエスト::load(url[, data[, callback]])の使用例</h1>
    <p>サーバーにデータの配列を渡します。</p>
<!-- CODE -->
    <pre id="res"></pre>
<!-- / CODE -->
<!-- / CONTENT -->
</body>
</html>

例：画像が読込まれたらフェードイン

jQuery.loadの使用例サンプルを見る

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQuery::非同期通信::Ajaxリクエスト::load(url[, data[, callback]])の使用例</title>
    <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
        $(function(){
            $("#photo")
                .css({opacity:0})
                .load(function(){
                    $(this).animate({opacity:1},3000
                );
            });
        });
    </script>
</head>
<body>
<!-- CONTENT -->
        <h1>jQuery::非同期通信::Ajaxリクエスト::load(url[, data[, callback]])の使用例</h1>
        <p>画像が読込まれたらフェードインします。</p>
<!-- CODE -->
        <img src="http://farm4.static.flickr.com/3214/3142429603_9f5899513e_o.jpg" alt="" id="photo" />
<!-- / CODE -->
<!-- / CONTENT -->
    </div>
</body>
</html>

jQuery.get(url[, data[, callback[, type]]])
HTTP GETリクエストを使用してリモードページを読み込む

2009/2/27

jQuery.get(url[, data[, callback[, type]]])　戻り値：XMLHttpRequest

HTTP GETリクエストを使用してリモートページを読み込みます。

サーバーにGETリクエストを送信する簡単な方法です。リクエストが成功して完了した時に実行するコールバック関数を指定することができます。成功時だけでなく、失敗時のコールバック関数も受け取りたい場合は、$.ajaxを使用してください。

第1引数urlには、読み込むページのURLを指定します。
オプションの第2引数dataには、サーバーに送信するキーと値のペアを指定します。
オプションの第3引数callbackには、データの読込が成功した時に実行する関数を指定します。
```
function(data, textStatus){
    this; /* Ajaxリクエストのオプション */
}
```
オプションの第4引数typeには、コールバック関数に返されるデータタイプ（「xml」、「html」、「script」、「json」、「jsonp」、「text」）を指定します。

例：test.phpページをリクエスト

戻り値（リクエストしたページを実行した結果）は無視します。

$.get("test.php");

例：追加でータを付加して、test.phpページをリクエスト

戻り値（リクエストしたページを実行した結果）は無視します。

$.get("test.php", { name:"John", time:"2pm"});
$.get("test.php", { 'choices[]':["Jon", "Susan"]});

例：データを付加して、test.phpにGET送信した結果を表示

$.get("test.php", { name:"John", time:"2pm"},
    function(data){
        $("#res").html("読込まれたデータ："+data);
    }
);
$.get(	est.php", { 'choices[]':["Jon", "Susan"]},
    function(data){
        $("#res2").html("読込まれたデータ："+data);
    }
);

jQuery.getの使用例サンプルを見る

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQuery::非同期通信::Ajaxリクエスト::jQuery.get(url[, data[, callback[, type]]])の使用例</title>
    <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
        $(function(){
            $.get("/content/demo/test.php", { name:"John", time:"2pm"},
                function(data){
                    $("#res").html("読込まれたデータ：<br><br>"+data);
                }
            );
            $.get("/content/demo/test.php", { 'choices[]':["Jon", "Susan"]},
                function(data){
                    $("#res2").html("読込まれたデータ：<br><br>"+data);
                }
            );
        });
    </script>
</head>
<body>
<!-- CONTENT -->
    <h1>jQuery::非同期通信::Ajaxリクエスト::jQuery.get(url[, data[, callback[, type]]])の使用例</h1>
    <p>データを付加して、test.phpにGET送信した結果を表示します。</p>
<!-- CODE -->
    <div id="res"></div>
    <div id="res2"></div>
<!-- / CODE -->
<!-- / CONTENT -->
</body>
</html>

jQuery.geJSON(url[, data[, callback[, type]]])
HTTP GETリクエストを使用してJSON形式のデータを読み込む

2009/2/27

jQuery.getJSON(url[, data[, callback[, type]]])　戻り値：XMLHttpRequest

HTTP GETリクエストを使用してJSON形式のデータを読み込みます。

jQuery v1.2からは、「myurl?callback=?」のようなJSONPコールバックを指定すると、別ドメインにあるJSON形式のデータを読み込むことができるよううになりました。 jQueryは？をコールする正しいメソッド名に自動的に置換します。このコールバック引数は、APIに依存しています。

この関数の後の行は、コールバック関数の前に実行されます。

第1引数urlには、読み込むページのURLを指定します。
オプションの第2引数dataには、サーバーに送信されるキーと値のペアを指定します。

オプションの第3引数callbackには、データの読み込みが成功した時に実行する関数を指定します。

function(data, textStatus){
    /* データはJSONオブジェクト */
    this; /* Ajaxリクエストのオプション */
}

例：json.phpからJSON形式のデータを読み込み、追加データを渡し、戻り値のJSON形式のデータから「name」にアクセスする

$.getJSON("/content/demo/json.php", { 'searchengine[]':{name:"msn", url:"http://jp.msn.com/"}}, function(json){
$("#res").html("JSONデータ：<span>"+json.searchengine[1].name+"　"+json.searchengine[1].url+"</span>");
});

jQuery.getJSONの使用例サンプルを見る

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQuery::非同期通信::Ajaxリクエスト::jQuery.getScript(url[, callback])の使用例</title>
    <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
        $(function(){
            $.getJSON("/content/demo/json.php", { 'searchengine[]':{name:"msn", url:"http://jp.msn.com/"}}, function(json){
                $("#res").html("JSONデータ：<span>"+json.searchengine[1].name+"　"+json.searchengine[1].url+"</span>");
            });
        });
    </script>
    <style type="text/css">
        #res span { color:red; }
    </style>
</head>
<body>
<!-- CONTENT -->
    <h1>jQuery::非同期通信::Ajaxリクエスト::jQuery.getScript(url[, callback])の使用例</h1>
    <p>json.phpからJSON形式のデータを読み込み、追加データを渡し、戻り値のJSON形式のデータから「name」にアクセスします。</p>
<!-- CODE -->
    <div id="res"></div>
<!-- / CODE -->
<!-- / CONTENT -->
</body>
</html>

例：配列としてHTMLの中に、index.phpの結果をリスト表示

var id=$("#id").attr("value");
    $.getJSON("pages.php",{id:id},dates);
    function dates(datos){
        $("#list").html("Name:"+datos[1].name+"<br />"+"Last Name:"+datos[1].lastname+"<br />"+"Address:"+datos[1].address);
}

例：FlickrのJSONP APIを使用して、最近アップされた「ハムスター」の写真を5枚読み込む

jQuery.getJSONの使用例サンプルを見る

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQuery::非同期通信::Ajaxリクエスト::jQuery.getScript(url[, callback])の使用例</title>
    <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
        $(function(){
            $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=hamster&tagmode=any&format=json&jsoncallback=?",
                function(data){
                    $.each(data.items, function(i,item){
                        $("<img/>").attr("src", item.media.m).appendTo("#images");
                        if (i==4 ) return false;
                    });
                }
            );
        });
    </script>
    <style type="text/css">
        img{ height:100px; float:left; }
    </style>
</head>
<body>
<!-- CONTENT -->
    <h1>jQuery::非同期通信::Ajaxリクエスト::jQuery.getScript(url[, callback])の使用例</h1>
    <p>FlickrのJSONP APIを使用して、最近アップされたハムスターの写真を5枚読み込みます。</p>
<!-- CODE -->
    <div id="images" class="cf"></div>
<!-- / CODE -->
<!-- / CONTENT -->
</body>
</html>

jQuery.getScript(url[, callback])
HTTP GETリクエストを使用してローカルのJavaScriptファイルを読み込んで実行する

2009/2/27

jQuery.getScript(url[, callback])　戻り値：XMLHttpRequest

HTTP GETリクエストを使用してローカルのJavaScriptファイルを読み込んで、実行します。

jQuery v1.2以前では、getScriptは、独立したページとして同じドメインからスクリプトを読み込むことしかできませんでした。 jQuery v1.2からは、他ドメインからJavaScriptファイルを読み込めるようになりました。 Safari 2や古いブラウザでは、グローバルな前後関係でスクリプトを同期して評価することができません。 getScriptで関数を読み込む場合は、遅れの後でそれらを呼ぶことを確かめてください。

第1引数urlには、読み込むページのURLを指定します。
オプションの第2引数callbackには、データの読み込みが完了した時に実行する関数を指定します。
```
function (data, textStatus) {
   /* dataはJavaScript */
    this; /* Ajaxリクエストのオプション */
}
```

例：jQueryプラグインの「Color Animations」を動的に読み込み、新しい機能が読み込まれた後に1度だけ実行されるようにカラーアニメーションを結び付ける

jQuery.getScriptの使用例サンプルを見る

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQuery::非同期通信::Ajaxリクエスト::jQuery.getScript(url[, callback])の使用例</title>
    <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
        $(function(){
            $.getScript("/content/lib/jquery/jquery.color.js", function(){
                $("#go").click(function(){
                    $(".block").animate( { backgroundColor:'orange' }, 1000).animate( { backgroundColor:'#ff6699' }, 1000);
                });
            });
        });
    </script>
    <style type="text/css">
        .block { background-color:#ff6699; width:150px; height:70px; }
    </style>
</head>
<body>
<!-- CONTENT -->
    <h1>jQuery::非同期通信::Ajaxリクエスト::jQuery.getScript(url[, callback])の使用例</h1>
    <p><a href="http://plugins.jquery.com/project/color">jQueryプラグインの「Color Animations」</a>を動的に読み込み、新しい機能が読み込まれた後に1度だけ実行されるようにカラーアニメーションを結び付けます。</p>
<!-- CODE -->
    <p><button id="go">実行</button></p>
    <div class="block"></div>
<!-- / CODE -->
<!-- / CONTENT -->
</body>
</html>

jQuery.post(url[, data[, callback[, type]]])
HTTP POSTリクエストを使用してリモートページを読み込む

2009/2/27

jQuery.post(url[, data[, callback[, type]]])　戻り値：XMLHttpRequest

HTTP POSTリクエストを使用してリモートページを読み込みます。

サーバーにPOSTリクエストを送信する簡単な方法です。リクエストが成功して完了した時に実行するコールバック関数を指定することができます。成功時だけでなく、失敗時のコールバック関数も受け取りたい場合は、$.ajaxに対する簡素化されたラップ関数である$.ajax.$.postを使用してください

戻り値のデータ形式は、第4引数typeで指定することができます。

第1引数urlには、読み込むページのURLを指定します。
オプションの第2引数dataには、サーバーに送信するキーと値のペアを指定します。

オプションの第3引数callbackには、データの読込が成功した時に実行する関数を指定します。

function(data, textStatus){
    this; /* Ajaxリクエストのオプション */
    /* textStatusには、「timeout」、「error」、「notmodified」、「success」、「parsererror」のいずれかを指定できます */
}

オプションの第4引数typeには、コールバック関数に返されるデータタイプ（「xml」、「html」、「script」、「json」、「jsonp」、「text」）を指定します。
```
$.postJSON=function(url, data, callback){
    $.post(url, data, callback, "json");
};
```

例：jquery_post.phpページのコンテンツをJSON形式に変換して取得

test.phpの内容：<?php echo json_encode(array("name"=>"John","time"=>"2pm"));?>

$.post("jquery_post.php", { func: "getNameAndTime" },
    function(data){
        alert(data.name); // John
        console.log(data.time); //  2pm
    },
    "json"
);

jQuery.postの使用例サンプルを見る

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQuery::非同期通信：Ajaxリクエスト::jQuery.post(url[, data[, callback[, type]]])の使用例</title>
    <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
        $(function(){
            $.post("/content/demo/jquery_post.php", { func: "getNameAndTime" },
                function(data){
                    $("#res").html("data.name="+data.name+"<br>data.time="+data.time);
                },
                "json"
            );
        });
    </script>
</head>
<body>
<!-- CONTENT -->
    <h1>jQuery::非同期通信::Ajaxリクエスト::jQuery.post(url[, data[, callback[, type]]])の使用例</h1>
    <p>phpページのコンテンツ(&lt;?php echo json_encode(array("name"=>"John","time"=&gt;"2pm"));?&gt;)をJSON形式に変換して取得します。</p>
<!-- CODE -->
    <div id="res"></div>
<!-- / CODE -->
<!-- / CONTENT -->
</body>
</html>

jQuery APIリファレンス エフェクト操作：設定

jQuery APIリファレンス 非同期通信：Ajaxイベント

PHP & JavaScript Room

jQuery APIリファレンス非同期通信：Ajaxリクエスト

jQuery.ajax(options)
HTTPリクエストを使用してリモードページを読み込む

例：JavaScriptファイルを読み込んで実行

例：サーバーに同じデータを保存し、完了後にユーザーに通知

例：HTMLページの最新バージョンを検索

例：同期データを読み込む

例：サーバーにデータとしてXMLドキュメントを送信

例：RSS（XMLファイル）を読み込んで表示

load(url[, data[, callback]])
リモートファイルからHTMLを読み込ンでDOMに挿入する

例：リモートファイルのHTMLの一部を読み込む

例：サーバーにデータの配列を渡す

例：サーバーへ追加パラメータをPOST送信し、サーバーのレスポンス終了時にコールバック関数を実行

例：画像が読込まれたらフェードイン

jQuery.get(url[, data[, callback[, type]]])
HTTP GETリクエストを使用してリモードページを読み込む

例：test.phpページをリクエスト

例：追加でータを付加して、test.phpページをリクエスト

例：データを付加して、test.phpにGET送信した結果を表示

jQuery.geJSON(url[, data[, callback[, type]]])
HTTP GETリクエストを使用してJSON形式のデータを読み込む

例：json.phpからJSON形式のデータを読み込み、追加データを渡し、戻り値のJSON形式のデータから「name」にアクセスする

例：配列としてHTMLの中に、index.phpの結果をリスト表示

例：FlickrのJSONP APIを使用して、最近アップされた「ハムスター」の写真を5枚読み込む

jQuery.getScript(url[, callback])
HTTP GETリクエストを使用してローカルのJavaScriptファイルを読み込んで実行する

例：jQueryプラグインの「Color Animations」を動的に読み込み、新しい機能が読み込まれた後に1度だけ実行されるようにカラーアニメーションを結び付ける

jQuery.post(url[, data[, callback[, type]]])
HTTP POSTリクエストを使用してリモートページを読み込む

例：jquery_post.phpページのコンテンツをJSON形式に変換して取得

関連コンテンツ

jQuery APIリファレンス非同期通信：Ajaxリクエスト

jQuery.ajax(options)HTTPリクエストを使用してリモードページを読み込む

例：JavaScriptファイルを読み込んで実行

例：サーバーに同じデータを保存し、完了後にユーザーに通知

例：HTMLページの最新バージョンを検索

例：同期データを読み込む

例：サーバーにデータとしてXMLドキュメントを送信

例：RSS（XMLファイル）を読み込んで表示

load(url[, data[, callback]])リモートファイルからHTMLを読み込ンでDOMに挿入する

例：リモートファイルのHTMLの一部を読み込む

例：サーバーにデータの配列を渡す

例：サーバーへ追加パラメータをPOST送信し、サーバーのレスポンス終了時にコールバック関数を実行

例：画像が読込まれたらフェードイン

jQuery.get(url[, data[, callback[, type]]])HTTP GETリクエストを使用してリモードページを読み込む

例：test.phpページをリクエスト

例：追加でータを付加して、test.phpページをリクエスト

例：データを付加して、test.phpにGET送信した結果を表示

jQuery.geJSON(url[, data[, callback[, type]]])HTTP GETリクエストを使用してJSON形式のデータを読み込む

例：json.phpからJSON形式のデータを読み込み、追加データを渡し、戻り値のJSON形式のデータから「name」にアクセスする

例：配列としてHTMLの中に、index.phpの結果をリスト表示

例：FlickrのJSONP APIを使用して、最近アップされた「ハムスター」の写真を5枚読み込む

jQuery.getScript(url[, callback])HTTP GETリクエストを使用してローカルのJavaScriptファイルを読み込んで実行する

例：jQueryプラグインの「Color Animations」を動的に読み込み、新しい機能が読み込まれた後に1度だけ実行されるようにカラーアニメーションを結び付ける

jQuery.post(url[, data[, callback[, type]]])HTTP POSTリクエストを使用してリモートページを読み込む

例：jquery_post.phpページのコンテンツをJSON形式に変換して取得

関連コンテンツ

jQuery.ajax(options)
HTTPリクエストを使用してリモードページを読み込む

load(url[, data[, callback]])
リモートファイルからHTMLを読み込ンでDOMに挿入する

jQuery.get(url[, data[, callback[, type]]])
HTTP GETリクエストを使用してリモードページを読み込む

jQuery.geJSON(url[, data[, callback[, type]]])
HTTP GETリクエストを使用してJSON形式のデータを読み込む

jQuery.getScript(url[, callback])
HTTP GETリクエストを使用してローカルのJavaScriptファイルを読み込んで実行する

jQuery.post(url[, data[, callback[, type]]])
HTTP POSTリクエストを使用してリモートページを読み込む