ajax関数とは何ですか?

ajax 関数には次のものが含まれます: 1. "$(selector).load()" (選択した要素にリモート データをロードするために使用)、2. "$.ajax()"、3. "$ .get ()"; 4. "$.post()"; 5. "$.getJSON()"; 6. "$.getScript()"。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

#AJAX リクエスト関数

リクエスト説明 $(selector).load(url,data,callback)選択した要素にリモート データをロードします$.ajax(options)リモート データを XMLHttpRequest オブジェクトにロードします##$.get(url,data,callback,type)HTTP GET を使用してリモート データをロードしますHTTP POST を使用してリモート データをロード$.getJSON (url,data, callback)HTTP GET を使用してリモート JSON データをロードします$.getScript(url,callback)リモート JavaScript ファイルをロードして実行します

(url) ロードされるデータの URL (アドレス)

(data) サーバーに送信されるデータのキー/値オブジェクト

(callback) データがロードされ、すべて実行された関数

(type) 返されるデータのタイプ (html、xml、json、jasonp、script、text)

(options) 完全な AJAX のすべてのキー/値ペアのオプションrequest

1, $.get(url,[data],[callback])

説明: url はリクエストのアドレス、data はリクエストされたデータのリストです。 、callback は、リクエストが成功した後のコールバック関数です。この関数は 2 つのパラメータを受け取ります。最初のパラメータはサーバーから返されたデータで、2 番目のパラメータはサーバーのステータスです。これはオプションのパラメータです。

このうち、サーバーから返されるデータの形式は実際には文字列形式であり、必要な json データ形式ではありません。比較と説明のためにここに引用します

$.get("data.php",$("#firstName.val()"),function(data){
$("#getResponse").html(data); }//返回的data是字符串类型
);

2 番目、$ .post(url,[data],[callback],[type])

説明: この関数は $.get() パラメーターに似ています。追加の type パラメータを使用すると、type は request になります データ型は、html、xml、json、その他の型です。このパラメータを json に設定すると、返される形式は json 形式になります。設定されていない場合は、 $.get() によって返される形式は同じで、どちらも文字列

$.post("data.php",$("#firstName.val()"),function(data){
$("#postResponse").html(data.name);
},"json"//设置了获取数据的类型，所以得到的数据格式为json类型的
);

3, $.ajax(opiton)

説明: $.ajax()この関数は強力で、ajax 上で多くの精密な制御を実行できます。詳細な説明が必要な場合は、関連情報を参照してください。

$.ajax({
url: "ajax/ajax_selectPicType.aspx",
data:{Full:"fu"},
type: "POST",
dataType:'json',
success:CallBack,
error:function(er){
BackErr(er);}
});

4, $.getJSON(url,[data],[callback] )

$.getJSON("data.php",$("#firstName.val()"),function(jsonData){
$("#getJSONResponse").html(jsonData.id);}//无需设置，直接获取的数据类型为json，所以调用时需要使用jsonData.id方式
);

Ajax と jQuery の出会い AJAX ベースのアプリケーションがますます増えており、フロントエンド開発者にとって、基礎となる HTTPRequest を直接処理することは楽しいことではありません。 jQueryはカプセル化されているので JavaScript、AJAX アプリケーションの問題を考慮したに違いありません。実際、jQuery を使用して AJAX を記述すると、JS で直接記述するよりも N 倍便利になります。 (jQueryの使い方が分かりません。 JS の知識が失われますか...) 誰もがすでに jQuery 構文に精通していると想定されているため、ajax のいくつかのアプリケーションについていくつかの概要を作成しましょう。

Load static page

load( url, [data], [callback] );
url (String) リクエストされた HTML ページの URL アドレス
data (Map) (オプションのパラメーター) サーバーに送信されるキー/値のデータ
callback (Callback) (オプションのパラメーター) リクエストが完了したときのコールバック関数 (成功する必要はありません)

load() メソッドを使用すると、静的ページのコンテンツを指定された jQuery オブジェクトに簡単にロードできます。

$('#ajax-p').load('data.html');

このようにして、data.html のコンテンツが ID ajax-p の DOM オブジェクトにロードされます。次のように、ID を指定してコンテンツの一部をロードする Ajax 操作を実装することもできます。

$('#ajax-p').load('data.html#my-section');

GET メソッドと POST メソッドの実装

get( url, [data], [callback] )

• url (String ) リクエスト URL アドレスを送信します。

• data (Map)(オプションのパラメーター) キーと値のペアの形式で表現された、サーバーに送信されるデータが追加されます。リクエスト URL に QueryString として送信します。

• #明らかに、これは GET メソッドを具体的に実装する関数であり、使用方法は非常に簡単です
  

  $.get('login.php', {
     id      : 'Robin',
     password: '123456',
     gate    : 'index'
    }, function(data, status) {
     //data为返回对象，status为请求的状态
     alert(data);
     //此时假设服务器脚本会返回一段文字"你好，Robin！"，
  那么浏览器就会弹出对话框显示该段文字
     alert(status);
     //结果为success, error等等，但这里是成功时才能运行的函数
    });

  post( url, [data], [callback], [type] )

url (文字列) URLリクエストを送信するアドレス。

• data (Map)(オプションのパラメータ) サーバーに送信されるデータ。キーと値のペアの形式で表現されます。
  

• callback (Callback) (オプションのパラメータ) ロード成功時のコールバック関数 (Response の戻りステータスが成功の場合のみこのメソッドが呼び出されます)

• type (String) (オプションの Select パラメーター) リクエストのデータ型、xml、text、json など。

• も jQuery によって提供される単純な関数であり、その使用法

  $.post('regsiter.php', {
     id:'Robin',
     password: '123456',
     type:'user'
    },function(data, status) {
     alert(data);
    }, "json");

  イベントドリブンスクリプトロード関数: getScript()

getScript( url, [callback] )

url (文字列) ロードするJSファイルのアドレス

• callback (関数) ) (オプション) 正常にロードされました コールバック関数

• #getScript() 関数は、JavaScript スクリプトをリモートでロードして実行できます。この関数は範囲を広げることができます JS ファイルをロードするドメイン (魔法...?!)。この機能の意義は非常に大きい はい、ページの初期化時にすべてをロードするのではなく、ユーザーの操作に基づいて対応する JS ファイルをロードできるため、ページの初期ロードのコード量を大幅に削減できます。
  

  $.getScript('ajaxEvent.js', function() {
     alert("Scripts Loaded!");
     //载入ajaxEvent.js，并且在成功载入后显示对话框提示。
    });

  データ通信用のブリッジを構築します: getJSON()

getJSON(url,[data],[callback])

url (String) 送信リクエストアドレス

• data ( マップ) (オプション) 送信されるキー/値パラメータ

• callback (関数) (オプション) ロードが成功したときのコールバック関数。

• #JSON は、JavaScript や他のホスト言語とうまく統合できる理想的なデータ送信形式です。 言語であり、JS から直接使用できます。従来と比較して JSON を使用する GET と POST は「ヌード」データを直接送信します。これは構造的により合理的で安全です。 jQuery の getJSON() 関数に関しては、JSON パラメータを設定するだけです。 ajax() 関数の簡易バージョン。この関数はドメイン間で使用することもでき、get() や post() に比べて特定の利点があります。なお、この関数はリクエストURLを記述することで記述できます。 「myurl?callback=X」の形式で、プログラムにコールバック関数 X を実行させます。
  

  $.getJSON('feed.php',{
     request: images,
     id:      001,
     size:    large
     }, function(json) {
      alert(json.images[0].link);
      //此处json就是远程传回的json对象，假设其格式如下：
      //{'images' : [
      // {link: images/001.jpg, x :100, y : 100},
      // {link: images/002.jpg, x : 200, y 200:}
      //]};
     }
   );

  下位レベルの ajax() 関数

get() 関数と post() 関数は非常にシンプルで使いやすいですが、ajax が送信されるときに異なるタイミングで異なるアクションを実行するなど、より複雑な設計要件を実現することはできません。 jQuery は、より具体的な関数 ajax() を提供します。

ajax( options )

ajax() は多数のパラメーターを提供するため、非常に複雑な関数を実現できます。

	##$.post(url,data,callback,type)

#パラメータ名タイプ説明url String(デフォルト: 現在のページアドレス) リクエストを送信するアドレス。 typeString(デフォルト: "GET") リクエストメソッド ("POST" または "GET")、デフォルトは "GET" 。 timeoutNumberリクエストのタイムアウト (ミリ秒) を設定します。この設定はグローバル設定をオーバーライドします。 asyncBoolean(デフォルト: true) デフォルトでは、すべてのリクエストは非同期リクエストです。 beforeSendFunctionカスタム HTTP ヘッダーの追加など、リクエストを送信する前に XMLHttpRequest オブジェクトを変更できる関数。 cacheBoolean(デフォルト: true) jQuery 1.2 の新機能、false に設定するとロードされませんブラウザキャッシュ内のリクエスト情報。 completeFunctionリクエスト完了後のコールバック関数(リクエストが成功または失敗したときに呼び出されます)。 contentTypeString(デフォルト: “application/x-www-form-urlencoded”) メッセージの送信先サーバーコンテンツのエンコードタイプ。デフォルト値はほとんどのアプリケーションに適しています。 dataObject,サーバーに送信されたデータ。リクエスト文字列形式に自動的に変換されます。 GET リクエストの URL に追加されます。 dataTypeStringサーバーから返される予期されるデータ型。指定しない場合、jQuery は HTTP パケットの MIME 情報 errorFunction(デフォルト:自動判定(xmlまたはhtml)) リクエストが失敗した場合にこのメソッドが呼び出されます。 globalBoolean(デフォルト: true) グローバル AJAX イベントをトリガーするかどうか。 false に設定すると、グローバル AJAX イベント (##ifModifiedHTTP パケットの Last-Modified ヘッダー情報を使用して判断します。

		注: PUT や DELETE などの他の HTTP リクエスト メソッドも使用できますが、一部のブラウザでのみサポートされます。
		同期リクエストを送信する必要がある場合は、このオプションを false に設定してください。 同期リクエストはブラウザをロックするため、他のユーザー操作はリクエストが完了するまで待ってから実行する必要があることに注意してください。
		XMLHttpRequest オブジェクトが唯一のパラメータです。 function (XMLHttpRequest) { this; // この Ajax リクエストのオプション } function (XMLHttpRequest) { this; // この Ajax リクエストのオプション
		パラメータ: XMLHttpRequest オブジェクト、成功情報文字列。 function (XMLHttpRequest, textStatus) { this; // this のオプション ajaxリクエスト } function (XMLHttpRequest, textStatus) { this; // この Ajax リクエストのオプション }
	String	この自動変換を無効にするには、processData オプションの説明を参照してください。キー/値形式である必要があります。 配列の場合、jQuery は異なる値に対して同じ名前を自動的に対応させます。 たとえば、{foo:["bar1", "bar2"]} は「&foo=bar1&foo=bar2」に変換されます。
		に基づいて、responseXML または responseText を自動的に返し、それをコールバック関数のパラメータとして渡します。利用可能な値: "xml": jQuery で処理できる XML ドキュメントを返します。 。 "html": プレーン テキストの HTML 情報を返します。スクリプト要素が含まれます。 "script": プレーンテキストの JavaScript コードを返します。結果は自動的にキャッシュされません。 "json": JSON データを返します。 "jsonp": JSONP 形式。 JSONP 形式を使用して関数を呼び出す場合、 「myurl?callback=?」などの jQuery は、? を正しい関数名に自動的に置き換えてコールバック関数を実行します。
		このメソッドには、XMLHttpRequest オブジェクト、エラー メッセージ、および (おそらく) キャプチャされたエラー オブジェクトという 3 つのパラメータがあります。 function (XMLHttpRequest, textStatus, errorThrown) { // 通常、textStatus と errorThown のいずれか 1 つだけが値 this; // この ajax のオプション リクエスト } 関数 (XMLHttpRequest、textStatus、errorThrown) { // 通常、textStatus と errorThown のいずれか 1 つだけが値 this; // この ajax のオプション request }
		ajaxStart や ajaxStop など) はトリガーされません。さまざまな Ajax イベントの制御に使用できます
Boolean	(デフォルト: false) サーバー データが変更された場合にのみ新しいデータを取得します。
processData	Boolean	(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 “application/x-www-form-urlencoded”。 如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success	Function	请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request } function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }

你可以指定xml、script、html、json作为其数据类型，可以为beforeSend、error、sucess、complete等状态设置 处理函数，众多其它参数也可以订完完全全定义用户的Ajax体验。下面的例子中，我们用ajax()来调用一个XML文档：

$.ajax({
    url: 'doc.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        alert(xml);
  //此处xml就是XML的jQuery对象了，你可以用find()、next()或XPath等方法在里面寻找节点，
和用jQuery操作HTML对象没有区别
    }
});

进一步了解AJAX事件

前面讨论的一些方法都有自己的事件处理机制，从页面整体来说，都只能说是局部函数。jQuery提供了AJAX全局函数的定义，以满足特殊的需求。下面是jQuery提供的所有函数（按照触发顺序排列如下）：

• ajaxStart
  (全局事件) 开始新的Ajax请求，并且此时没有其他ajax请求正在进行

• beforeSend
  (局部事件) 当一个Ajax请求开始时触发。如果需要，你可以在这里设置XMLHttpRequest对象

• ajaxSend
  (全局事件) 请求开始前触发的全局事件

• success
  (局部事件) 请求成功时触发。即服务器没有返回错误，返回的数据也没有错误

• ajaxSuccess
  全局事件全局的请求成功

• error
  (局部事件) 仅当发生错误时触发。你无法同时执行success和error两个回调函数

• ajaxError
  全局事件全局的发生错误时触发

• complete
  (局部事件) 不管你请求成功还是失败，即便是同步请求，你都能在请求完成时触发这个事件

• ajaxComplete
  全局事件全局的请求完成时触发

• ajaxStop
  (全局事件) 当没有Ajax正在进行中的时候，触发
  局部事件在之前的函数中都有介绍，我们主要来看看全局事件。对某个对象进行全局事件监听，那么全局中的AJAX动作，都会对其产生影响。比如，当页面在进行AJAX操作时，ID为”loading”的p就显示出来：

$("#loading").ajaxStart(function(){
   $(this).show();
 });

全局事件也可以帮助你编写全局的错误相应和成功相应，而不需要为每个AJAX请求独立设置。有必要指出，全局事件的参数是很有用的。除了 ajaxStart、ajaxOptions，其他事件均有event, XMLHttpRequest, ajaxOptions三个参数。第一个参数即事件本身；第二个是XHR对象；第三个是你传递的ajax参数对象。在一个对象里显示全局的AJAX情况：

$("#msg").beforeSend(function(e,xhr,o) {
 $(this).html("正在请求"+o.url);
 }).ajaxSuccess(function(e,xhr,o) {
 $(this).html(o.url+"请求成功");
 }).ajaxError(function(e,xhr,o) {
 $(this).html(o.url+"请求失败");
});

很显然，第三个参数也可以帮助你传递你在AJAX事件里加入的自定义参数。 在单个AJAX请求时，你可以将global的值设为false，以将此请求独立于AJAX的全局事件。

$.ajax({
   url: "request.php",
   global: false,
   // 禁用全局Ajax事件.
 });

如果你想为全局AJAX设置参数，你会用上ajaxSetup()函数。例如，将所有AJAX请求都传递到request.php，；禁用全局方法；强制用POST方法传递：

$.ajaxSetup({
  url: "request.php",
  global: false,
  type: "POST"
});

【相关教程推荐：AJAX视频教程】

以上がajax関数とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。