jQuery Ajaxの詳しい解説
jQuery Ajax の詳細(xì)説明
jQuery は、Ajax リクエストを送信するためのいくつかの関數(shù)を提供します。最も複雑な関數(shù)は jQuery.ajax(options) であり、他のすべての Ajax 関數(shù)はこれを使用できます。 Ajax を完全に制御したい場(chǎng)合は、結(jié)果を取得します。それ以外の場(chǎng)合は、get、post、load などの単純なメソッドを使用する方が便利です。そのため、最初に最も単純な load メソッドを紹介します。 :
1.load( url, [data], [callback] )
Returns: jQuery パッケージングセット
説明:
load メソッドはリモート HTML ファイルコードをロードして DOM に挿入できます。 。
デフォルトでは GET メソッドが使用され、データパラメータが渡された場(chǎng)合は Post メソッドが使用されます。
- 追加パラメータを渡すと、自動(dòng)的に POST メソッドに変換されます。 jQuery 1.2 では、ロードされた HTML ドキュメントをフィルターするセレクターを指定でき、フィルターされた HTML コードのみが DOM に挿入されます。構(gòu)文は「url #some > selector」のようなもので、デフォルトのセレクターは「body>*」です。
説明:
load は最も単純な Ajax 関數(shù)ですが、その使用には制限があります:
主に次の目的で使用されます。 direct HTML を返す Ajax インターフェース
は、jQuery ラッパー上で呼び出す必要がある jQuery ラッパー メソッドであり、コールバック関數(shù)が設(shè)定されている場(chǎng)合でも、返された HTML をオブジェクトにロードします。ただし、Load インターフェイスは巧妙に設(shè)計(jì)されており、使い方も簡(jiǎn)単であることは否定できません。次の例は、Load インターフェイスの使用方法を示しています。
ヒント: 常に支払う必要があります。ブラウザーのキャッシュに注意し、GET メソッドのタイムスタンプ パラメーター (net Date()).getTime() を使用するときに追加して、送信される URL が毎回異なるようにすることで、ブラウザーのキャッシュを回避できます。
2.jQuery.get( url, [data], [callback], [type ] )
Returns: XMLHttpRequest
Description:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Ajax - Load</title>
<script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript">
$(function()
{
$("#btnAjaxGet").click(function(event)
{
//發(fā)送Get請(qǐng)求
$("#divResult").load("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click" + "×tamp=" + (new Date()).getTime());
});
$("#btnAjaxPost").click(function(event)
{
//發(fā)送Post請(qǐng)求
$("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxPost_click" });
});
$("#btnAjaxCallBack").click(function(event)
{
//發(fā)送Post請(qǐng)求, 返回后執(zhí)行回調(diào)函數(shù).
$("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxCallBack_click" }, function(responseText, textStatus, XMLHttpRequest)
{
responseText = " Add in the CallBack Function! <br/>" + responseText
$("#divResult").html(responseText); //或者: $(this).html(responseText);
});
});
$("#btnAjaxFiltHtml").click(function(event)
{
//發(fā)送Get請(qǐng)求, 從結(jié)果中過濾掉 "鞍山" 這一項(xiàng)
$("#divResult").load("../data/AjaxGetCityInfo.aspx?resultType=html" + "×tamp=" + (new Date()).getTime() + " ul>li:not(:contains('鞍山'))");
});
})
</script>
</head>
<body>
<button id="btnAjaxGet">使用Load執(zhí)行Get請(qǐng)求</button><br />
<button id="btnAjaxPost">使用Load執(zhí)行Post請(qǐng)求</button><br />
<button id="btnAjaxCallBack">使用帶有回調(diào)函數(shù)的Load方法</button><br />
<button id="btnAjaxFiltHtml">使用selector過濾返回的HTML內(nèi)容</button>
<br />
<div id="divResult"></div>
</body>
</html> のように URL に直接結(jié)合することも、データ パラメータを介して渡すこともできます: $.get("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click");2 つのメソッドは同じです。効果があり、データ パラメーターが URL 內(nèi)のリクエストに自動(dòng)的に追加されます
URL 內(nèi)のパラメーターがデータ パラメーターを通じて渡される場(chǎng)合、同じ名前のパラメーターは自動(dòng)的にマージされません。
コールバックの署名関數(shù)は次のとおりです:$.get("../data/AjaxGetMethod.aspx", { "param": "btnAjaxGet2_click" }); ここで、data は返されたデータ、testStatus は次の値を表します: function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this; // the options for this ajax request
} コールバック関數(shù)內(nèi)のこれは、さまざまな命令のオプション オブジェクトへの參照を取得するためのものです。オプションについては、こちらをご覧ください: "timeout","error","notmodified","success","parsererror"
type パラメータはデータのタイプを指し、次の値が考えられます:
「xml」、「html」、「script」、「json」、「jsonp」、「text」。
デフォルトは "html" .
jQuery.getJSON( url, [data], [callback] ) メソッドは jQuery.get(url, [data],[callback], "json") と同等です
3 . jQuery.getJSON ( url, [data], [callback] )
Returns: XMLHttpRequest
同等: jQuery.get(url, [data],[callback], "json")
説明:
HTTP GET リクエスト経由で JSON データをロードします。
jQuery 1.2 では、「myurl?callback=?」などの JSONP 形式のコールバック関數(shù)を使用して、他のドメインから JSON データをロードできます。 jQuery は、コールバック関數(shù)を?qū)g行するために、? を正しい関數(shù)名に自動(dòng)的に置き換えます。
注: この行以降のコードは、このコールバック関數(shù)が実行される前に実行されます。
説明:
getJSON 関數(shù)は、get 関數(shù)の type パラメーターを「JSON」に設(shè)定するだけです。コールバック関數(shù)で取得されたデータは、すでに JSON 形式に従って解析されたオブジェクトです:
http://docs.jquery.com/Ajax/jQuery.ajax#options
によって返されます。サーバー文字列は次のとおりです:
[{""pkid"":""0997"",""ProvinceId"":""XJ"",""CityName"":""Aksu"",""CityNameEn "": ""Akesu"",""PostCode"":""843000"",""isHotCity"":false},
{""pkid"":""0412"",""ProvinceId" ":" "LN"",""CityName"":""Anshan"",""CityNameEn"":""Anshan"",""PostCode"":""114000"",""isHotCity"": false}]
この例では、data.length を使用して配列內(nèi)の要素の數(shù)を取得でき、data[0].CityName は CityName 屬性にアクセスします。最初の要素の
4.jQuery.getScript( url, [callback] )
Returns: XMLHttpRequest
同等: jQuery.get(url, null, [callback], "script" )
説明:
HTTP GET リクエスト経由で JavaScript ファイルをロードして実行します。
jQuery 1.2 より前では、getScript は同じドメイン內(nèi)の JS ファイルのみを呼び出すことができました。 1.2 では、ドメイン間で JavaScript ファイルを呼び出すことができます。注: Safari 2 以前では、グローバル スコープでスクリプトを同期的に実行できません。 getScriptでスクリプトを追加する場(chǎng)合は遅延関數(shù)を追加してください。
説明:
以前 dojo クラス ライブラリを使用したとき、公式のデフォルト ファイルはクロスドメインをサポートしていなかったので、最終的に dojo の使用を斷念しました (インターネットでクロスドメイン バージョンを見つけましたが、完璧ではないと感じました)それで私はこの関數(shù)のコア実裝と実裝について特に懸念しています
まず、get 関數(shù)を含むすべての jQuery の Ajax 関數(shù)を理解します。最後に jQuery.ajax() を使用し、getScript は値 "script" を渡します。最後に Ajax 関數(shù)で、script 型のリクエストは次のように処理されます:
$.getJSON("../data/AjaxGetCityInfo.aspx", { "resultType": "json" }, function(data, textStatus)
{
alert(data.length);
alert(data[0].CityName);
}); 上記のコードはスクリプト ステートメントを動(dòng)的に作成しますブロックして先頭に追加します:
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = s.url; スクリプトが読み込まれたら、完了したら先頭から削除します:
head.appendChild(script);
この機(jī)能のクロスドメインアクセスとマルチブラウザサポートを主にテストしました。結(jié)果:
| IE6 | FireFox | Notes | |
非クロスドメイン參照js | pass | pass | コールバック関數(shù)內(nèi)の data と textStatus の両方利用可能です |
| クロスドメインリファレンス js | pass | pass | コールバック関數(shù)內(nèi) data と textStatus は両方とも uniffed です |
以下は主要なテスト ステートメントであり、getScript 関數(shù)の使用方法を示すためにも使用されます:
// Handle Script loading
if ( !jsonp ) {
var done = false;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function(){
if ( !done && (!this.readyState ||
this.readyState == "loaded" || this.readyState == "complete") ) {
done = true;
success();
complete();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
head.removeChild( script );
}
};
}5. jQuery.post( url, [data], [callback], [type] )
戻り値: XMLHttpRequest
説明:
リモート HTTP POST リクエストを通じて情報(bào)をロードします。
これは、複雑な $.ajax を置き換える?yún)g純な POST リクエスト関數(shù)です。コールバック関數(shù)は、リクエストが成功したときに呼び出すことができます。エラー時(shí)に関數(shù)を?qū)g行する必要がある場(chǎng)合は、$.ajax を使用します。
説明:
送信メソッドが「GET」から「POST」に変更されることを除いて、具體的な使用法は get と同じです。
6. jQuery.ajax( options )
戻り値: XMLHttpRequest
説明:
HTTP リクエスト経由でリモート データをロードします。
jQuery の基礎(chǔ)となる AJAX 実裝。シンプルで使いやすい高レベルの実裝については、$.get、$.post などを參照してください。
$.ajax() は、作成した XMLHttpRequest オブジェクトを返します。ほとんどの場(chǎng)合、このオブジェクトを直接操作する必要はありませんが、特殊な場(chǎng)合には、リクエストを手動(dòng)で終了するために使用できます。
$.ajax() にはパラメータが 1 つだけあります。それは、各設(shè)定とコールバック関數(shù)の情報(bào)を含むパラメータ キー/値オブジェクトです。以下の詳細(xì)なパラメータ オプションを參照してください。
注: dataType オプションを指定する場(chǎng)合は、サーバーが正しい MIME 情報(bào)を返すことを確認(rèn)してください (例: xml は "text/xml" を返します)。 MIME タイプが正しくないと、予期しないエラーが発生する可能性があります。 「AJAX リクエストのデータ型の指定」を參照してください。
注: dataType が「script」に設(shè)定されている場(chǎng)合、すべてのリモート (同じドメイン名の下にない) POST リクエストは GET リクエストに変換されます。 (読み込みにDOMスクリプトタグを使用するため)
jQuery 1.2では、ドメインを越えてJSONデータを読み込むことができますが、使用する際にはデータ型をJSONPに設(shè)定する必要があります。 「myurl?callback=?」などの JSONP 形式を使用して関數(shù)を呼び出すと、jQuery はコールバック関數(shù)を?qū)g行するために ? を正しい関數(shù)名に自動(dòng)的に置き換えます。データ型が「jsonp」に設(shè)定されている場(chǎng)合、jQuery は自動(dòng)的にコールバック関數(shù)を呼び出します。
説明:
これは、Ajax リクエストを送信する上記のすべての関數(shù)が最終的にこの関數(shù)を呼び出します。これらのパラメーターは、Ajax を完全に制御するために使用できます。 Ajax コールバック內(nèi) 関數(shù)內(nèi)の this オブジェクトはオプション オブジェクトでもあります
簡(jiǎn)略化された get 関數(shù)と post 関數(shù)が最も一般的に使用されるため、ここではオプション パラメーターについては詳しく説明しません。
