全面解析$A jax()メソッドパラメータ(推奨)

7335 ワード

ajax 方法パラメータ

まず、Ajax概念を紹介します。
AJAXは「Aynchronous Javascript And XML」（非同期JavaScriptとXML）という、インタラクティブなウェブページアプリケーションを作成するウェブページ開発技術です。
AJAX=非同期JavaScriptとXML（標準共通マーク言語のサブセット）。
AJAXは高速ダイナミックページを作成する技術です。
バックグラウンドでサーバと少量のデータ交換を行うことで、AJAXはウェブページを非同期的に更新することができます。これは、ページ全体を再読み込みしないで、ページの一部を更新できるという意味です。
伝統的なウェブページ（AJAXを使用しない）は、コンテンツの更新が必要であれば、ページ全体をリロードしなければなりません。
ajaxメソッド
$ajax()方法はjQuery最下層のAjaxで実現します。その構造は:
$ajax(options)
この方法は一つのパラメータしかないが、このオブジェクトには$ajax()メソッドに必要な要求設定やコールバック関数などの情報が含まれており、パラメータはkey/valueとして存在し、すべてのパラメータは任意である。常用パラメータは下表の通りです。
1.url
要求されるのはStringタイプのパラメータです。（デフォルトは現在のアドレスです。）要求されたページを送信します。
2.type
Stringタイプのパラメータが要求されますが、要求方式（postまたはget）はデフォルトでgetとなります。他のhttp要求方法に注意してください。例えば、putやdeleteも使用できますが、一部のブラウザのみがサポートされています。
3.timeout
要求タイムアウト時間（ミリ秒）をNumberタイプのパラメータで設定します。この設定は$ajaxSetup()メソッドのグローバル設定を上書きします。
4.async
Booleanタイプのパラメータが要求されます。デフォルトではtrueに設定されています。すべての要求は非同期です。同期要求が必要な場合は、このオプションをfalseに設定してください。なお、同期要求はブラウザをロックし、ユーザの他の操作は要求が完了するまで待つ必要があります。
5.cache
要求されるのはBooleanタイプのパラメータで、デフォルトはtrue（dataTypeがScriptの場合、デフォルトはfalse）です。falseを設定すると、ブラウザキャッシュから要求情報が読み込まれません。
6.ダタ
ObjectまたはStringタイプのパラメータが要求されます。サーバに送るデータです。文字列でない場合は、自動的に文字列書式に変換されます。get要求はURLに添付されます。この自動変換を防ぐために、プロcessDataオプションを確認できます。オブジェクトはkey/valueフォーマットでなければなりません。例えば、{foo 1:bar 1}foo 2:bar 2}は&foo 1=bar 1=bar 2=bar 2に変換されます。配列であれば、JQueryは自動的に異なる値で同じ名前に対応します。例えば｛foo:[bar 1]、“bar 2”｝は&foo=bar 1&foo=bar 2に変換されます。
7.data Type
Stringタイプのパラメータが要求されていますが、サーバから返ってくるデータの種類が期待されます。指定されていない場合、jQueryは自動的にHTTPパケットのmine情報からレスポンスXMLまたはレスポンスTextに戻り、コールバック関数のパラメータとして渡されます。利用可能なタイプは以下の通りです。
xml：XMLドキュメントに戻り、jQueryで処理できます。
html：純粋なテキストHTML情報を返します。含まれるスクリプトラベルはDOM挿入時に実行されます。
script：純粋なテキストjavascriptコードを返します。cacheパラメータが設定されていない限り、結果は自動的にキャッシュされません。注意リモート要求時（同じドメインではない）には、すべてのpost要求がget要求に変わります。
JSONデータを返します。
JSONフォーマットです。JSONP形式で関数を呼び出す場合、例えばmurl？calback=？JQueryは自動的に後の「？」に置き換えられます。正しい関数名で、コールバック関数を実行します。
テキスト文字列を返します。
8.before Send
Functionタイプのパラメータが要求されます。要求を送信する前に、XMLHttpRequestオブジェクトの関数を変更することができます。例えば、カスタムHTTPヘッダを追加します。beforeSendでfalseに戻ると、今回のajax要求はキャンセルされます。XMLHttpRequestオブジェクトは唯一のパラメータです。　


function(XMLHttpRequest){
　　　　this;//    ajax      options  
　　}

9.complettee
Functionタイプのパラメータが要求されます。完了後に呼び出すコールバック関数（成功または失敗を要求しても呼び出します）。パラメータ：XMLHttpRequestオブジェクトと成功要求タイプを記述する文字列。


　　function(XMLHttpRequest,textStatus){
　　　　this; //    ajax      options  
　　}

10.success
Functionタイプのパラメータが要求されます。成功後に呼び出すコールバック関数には、2つのパラメータがあります。
（1）サーバから戻り、dataTypeパラメータに従って処理後のデータを行います。
（2）状態を表す文字列。


　　function(data,textStatus){
　　　　//data   xmlDoc、jsonObj、html、text 
　　　　this; //    ajax      options  
　　}

11 error
Functionタイプのパラメータが要求されます。要求が失敗したときに呼び出す関数です。この関数は、XMLHttpRequestオブジェクト、エラー情報、キャプチャされたエラーオブジェクトの3つのパラメータがあります。ajaxイベントの関数は以下の通りです。


　　function(XMLHttpRequest,textStatus,errorThrown){
　　　　//     textStatus errorThrown          
　　　　this; //    ajax      options  
　　}

12 contentType
Stringタイプのパラメータが要求されます。サーバに情報を送信する場合。コンテンツコードの種類はデフォルトでは「appication/x-www-form-urlencoded」です。このデフォルトはほとんどのアプリケーションに適しています。
13.data Filter
Functionタイプのパラメータが必要で、Ajaxに返された元データを前処理する関数です。dataとtypeの二つのパラメータを提供します。dataはAjaxが元のデータを返します。typeはjQuery.ajaxを呼び出した時に提供されるdata TYpeパラメータです。関数が返した値はjQueryでさらに処理されます。


　　function(data,type){
　　　　//        
　　　　return data;
　　}

14 global
Booleanタイプのパラメータを要求します。デフォルトはtrueです。グローバルajaxイベントをトリガするかどうかを表します。falseに設定するとグローバルajaxイベントが発生しません。ajaxStartとajax Stopは様々なajaxイベントを制御するために使用できます。
15.ifModified
Booleanタイプのパラメータを要求します。デフォルトはfalseです。サーバデータの変更時のみ新しいデータを取得します。サーバーのデータ変更の判断の根拠は、Last-Maodifiedヘッダ情報です。デフォルトの値はfalseで、ヘッダ情報を無視します。
16.json p
Steringタイプのパラメータが要求されています。jsonp要求では、コールバック関数の名前を書き換えます。この値は「calback=？」に代わるものです。このGETやPOST要求のURLパラメータにある「calback」の部分、例えば「json:on Json PLoad」は「onJson PLoad=？」サーバに転送します。
17.username
Stringタイプのパラメータが要求され、HTTPアクセス認証要求に応答するユーザ。
18.password
Stringタイプのパラメータが要求され、HTTPアクセス認証要求のパスワードに応答する。
19.processData
Booleanタイプのパラメータを要求します。デフォルトはtrueです。デフォルトでは、送信されたデータは、デフォルトのコンテンツタイプ「appication/x-www-form-urlencoded」に合わせてオブジェクトに変換されます。DOMツリー情報または他の変換したくない情報を送信する場合は、falseに設定してください。
20.1 script Charrset
要求されるのはStringタイプのパラメータであり、要求時にはdataTypeが「jsonip」または「script」であり、typeがGETである場合にのみ、強制的に文字セットを変更するために使用されます。通常はローカルとリモートのコンテンツコードが異なる場合に使用されます。
ケースコード:


$(function(){
 $('#send').click(function(){
  $.ajax({
  type: "GET",
  url: "test.json",
  data: {username:$("#username").val(), content:$("#content").val()},
  dataType: "json",
  success: function(data){
    $('#resText').empty(); //  resText       
    var html = '';
    $.each(data, function(commentIndex, comment){
    html += '<div class="comment"><h6>' + comment['username']
      + ':</h6><p class="para"' + comment['content']
      + '</p></div>';
    });
    $('#resText').html(html);
   }
  });
 });
});

知識リンク:
1、$each()関数：$each()関数はjQueryオブジェクトのeach()メソッドとは異なり、グローバル関数であり、jQueryオブジェクトを操作しません。関数は2つのパラメータを受信し、1番目のパラメータは1つの配列またはオブジェクトで、2番目のパラメータは1つのコールバック関数です。コールバック関数は2つのパラメータを持っています。1番目のパラメータは配列のインデックスまたはオブジェクトのメンバーで、2番目のパラメータは対応する変数または内容です。


　　$.each(data,function(commentIndex,comment){
  //doSomething;
 })

2、ajaxStart（）とajaxStop（）：Ajax要求が開始されると、ajaxStart（）方法のコールバック関数がトリガされます。Ajax要求が終了すると、ajax Stop（）方法のコールバック関数がトリガされます。これらの方法は全体的な方法ですので、コードをどこに作成しても、Ajax要求が発生するとトリガされます。
いくつかの画像をロードする必要があるページがあります。速度が遅いかもしれません。ロード中に、ユーザーにいくつかのヒントとフィードバック情報を提供しないと、ユーザーがボタンをクリックして無駄だと誤解されやすくなります。
この時、私達はホームページのためにヒント情報を追加したいです。よく使うヒント情報は「ロード中…」です。コードは以下の通りです。


<div id="loading">   ...</div>

Ajax要求が開始されると、この要素は、ユーザAjax要求が進行中であることを示すために表示される。Ajax要求が終了したら、この要素を隠します。コードは以下の通りです

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

はい、次はもう一つのケースコードを共有します。


$(function(){
 $('#send').click(function(){
  $.ajax({
  type: "GET",
  url: "test.json",
  data: {username:$("#username").val(), content:$("#content").val()},
  dataType: "json",
  success: function(data){
    $('#resText').empty(); //  resText       
    var html = ''; 
    $.each(data, function(commentIndex, comment){
    html += '<div class="comment"><h6>' + comment['username']
      + ':</h6><p class="para"' + comment['content']
      + '</p></div>';
    });
    $('#resText').html(html);
   }
  });
 });
});

endコードはこれで終了します。
以上は小编が绍介した全面的な解析です。Ajax()方法のパラメーター(推荐)は、皆さんの助けになりたいです。ここでも私たちのサイトを応援してくれてありがとうございます。

vueはcanvasを使って手書きの電子署名を実現します。

Vueはiviewに基づいてログインパスワードの表示と隠し機能を実現します。