jQuery Ajaxの詳しい解説
jQuery Ajax の詳細説明
jQuery は、Ajax リクエストを送信するためのいくつかの関数を提供します。最も複雑な関数は jQuery.ajax(options) であり、他のすべての Ajax 関数はこれを使用できます。 Ajax を完全に制御したい場合は、結果を取得します。それ以外の場合は、get、post、load などの単純なメソッドを使用する方が便利です。そのため、最初に最も単純な load メソッドを紹介します。 :
1.load( url, [data], [callback] )
Returns: jQuery パッケージングセット
説明:
load メソッドはリモート HTML ファイルコードをロードして DOM に挿入できます。 。
デフォルトでは GET メソッドが使用され、データパラメータが渡された場合は Post メソッドが使用されます。
- 追加パラメータを渡すと、自動的に POST メソッドに変換されます。 jQuery 1.2 では、ロードされた HTML ドキュメントをフィルターするセレクターを指定でき、フィルターされた HTML コードのみが DOM に挿入されます。構文は「url #some > selector」のようなもので、デフォルトのセレクターは「body>*」です。
説明:
load は最も単純な Ajax 関数ですが、その使用には制限があります:
主に次の目的で使用されます。 direct HTML を返す Ajax インターフェース
は、jQuery ラッパー上で呼び出す必要がある jQuery ラッパー メソッドであり、コールバック関数が設定されている場合でも、返された HTML をオブジェクトにロードします。ただし、Load インターフェイスは巧妙に設計されており、使い方も簡単であることは否定できません。次の例は、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)
{
//发送Get请求
$("#divResult").load("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click" + "×tamp=" + (new Date()).getTime());
});
$("#btnAjaxPost").click(function(event)
{
//发送Post请求
$("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxPost_click" });
});
$("#btnAjaxCallBack").click(function(event)
{
//发送Post请求, 返回后执行回调函数.
$("#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)
{
//发送Get请求, 从结果中过滤掉 "鞍山" 这一项
$("#divResult").load("../data/AjaxGetCityInfo.aspx?resultType=html" + "×tamp=" + (new Date()).getTime() + " ul>li:not(:contains('鞍山'))");
});
})
</script>
</head>
<body>
<button id="btnAjaxGet">使用Load执行Get请求</button><br />
<button id="btnAjaxPost">使用Load执行Post请求</button><br />
<button id="btnAjaxCallBack">使用带有回调函数的Load方法</button><br />
<button id="btnAjaxFiltHtml">使用selector过滤返回的HTML内容</button>
<br />
<div id="divResult"></div>
</body>
</html> のように URL に直接結合することも、データ パラメータを介して渡すこともできます: $.get("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click");2 つのメソッドは同じです。効果があり、データ パラメーターが URL 内のリクエストに自動的に追加されます
URL 内のパラメーターがデータ パラメーターを通じて渡される場合、同じ名前のパラメーターは自動的にマージされません。
コールバックの署名関数は次のとおりです:$.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
} コールバック関数内のこれは、さまざまな命令のオプション オブジェクトへの参照を取得するためのものです。オプションについては、こちらをご覧ください: "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 形式のコールバック関数を使用して、他のドメインから JSON データをロードできます。 jQuery は、コールバック関数を実行するために、? を正しい関数名に自動的に置き換えます。
注: この行以降のコードは、このコールバック関数が実行される前に実行されます。
説明:
getJSON 関数は、get 関数の type パラメーターを「JSON」に設定するだけです。コールバック関数で取得されたデータは、すでに 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 を使用して配列内の要素の数を取得でき、data[0].CityName は CityName 属性にアクセスします。最初の要素の
4.jQuery.getScript( url, [callback] )
Returns: XMLHttpRequest
同等: jQuery.get(url, null, [callback], "script" )
説明:
HTTP GET リクエスト経由で JavaScript ファイルをロードして実行します。
jQuery 1.2 より前では、getScript は同じドメイン内の JS ファイルのみを呼び出すことができました。 1.2 では、ドメイン間で JavaScript ファイルを呼び出すことができます。注: Safari 2 以前では、グローバル スコープでスクリプトを同期的に実行できません。 getScriptでスクリプトを追加する場合は遅延関数を追加してください。
説明:
以前 dojo クラス ライブラリを使用したとき、公式のデフォルト ファイルはクロスドメインをサポートしていなかったので、最終的に dojo の使用を断念しました (インターネットでクロスドメイン バージョンを見つけましたが、完璧ではないと感じました)それで私はこの関数のコア実装と実装について特に懸念しています
まず、get 関数を含むすべての jQuery の Ajax 関数を理解します。最後に jQuery.ajax() を使用し、getScript は値 "script" を渡します。最後に Ajax 関数で、script 型のリクエストは次のように処理されます:
$.getJSON("../data/AjaxGetCityInfo.aspx", { "resultType": "json" }, function(data, textStatus)
{
alert(data.length);
alert(data[0].CityName);
}); 上記のコードはスクリプト ステートメントを動的に作成しますブロックして先頭に追加します:
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = s.url; スクリプトが読み込まれたら、完了したら先頭から削除します:
head.appendChild(script);
この機能のクロスドメインアクセスとマルチブラウザサポートを主にテストしました。結果:
| IE6 | FireFox | Notes | |
非クロスドメイン参照js | pass | pass | コールバック関数内の data と textStatus の両方利用可能です |
| クロスドメインリファレンス js | pass | pass | コールバック関数内 data と textStatus は両方とも uniffed です |
以下は主要なテスト ステートメントであり、getScript 関数の使用方法を示すためにも使用されます:
// 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 リクエストを通じて情報をロードします。
これは、複雑な $.ajax を置き換える単純な POST リクエスト関数です。コールバック関数は、リクエストが成功したときに呼び出すことができます。エラー時に関数を実行する必要がある場合は、$.ajax を使用します。
説明:
送信メソッドが「GET」から「POST」に変更されることを除いて、具体的な使用法は get と同じです。
6. jQuery.ajax( options )
戻り値: XMLHttpRequest
説明:
HTTP リクエスト経由でリモート データをロードします。
jQuery の基礎となる AJAX 実装。シンプルで使いやすい高レベルの実装については、$.get、$.post などを参照してください。
$.ajax() は、作成した XMLHttpRequest オブジェクトを返します。ほとんどの場合、このオブジェクトを直接操作する必要はありませんが、特殊な場合には、リクエストを手動で終了するために使用できます。
$.ajax() にはパラメータが 1 つだけあります。それは、各設定とコールバック関数の情報を含むパラメータ キー/値オブジェクトです。以下の詳細なパラメータ オプションを参照してください。
注: dataType オプションを指定する場合は、サーバーが正しい MIME 情報を返すことを確認してください (例: xml は "text/xml" を返します)。 MIME タイプが正しくないと、予期しないエラーが発生する可能性があります。 「AJAX リクエストのデータ型の指定」を参照してください。
注: dataType が「script」に設定されている場合、すべてのリモート (同じドメイン名の下にない) POST リクエストは GET リクエストに変換されます。 (読み込みにDOMスクリプトタグを使用するため)
jQuery 1.2では、ドメインを越えてJSONデータを読み込むことができますが、使用する際にはデータ型をJSONPに設定する必要があります。 「myurl?callback=?」などの JSONP 形式を使用して関数を呼び出すと、jQuery はコールバック関数を実行するために ? を正しい関数名に自動的に置き換えます。データ型が「jsonp」に設定されている場合、jQuery は自動的にコールバック関数を呼び出します。
説明:
これは、Ajax リクエストを送信する上記のすべての関数が最終的にこの関数を呼び出します。これらのパラメーターは、Ajax を完全に制御するために使用できます。 Ajax コールバック内 関数内の this オブジェクトはオプション オブジェクトでもあります
簡略化された get 関数と post 関数が最も一般的に使用されるため、ここではオプション パラメーターについては詳しく説明しません。
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Apipost 実用化 [API、インターフェース、自動テスト、モック]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
