ajaxとその共通プロパティの紹介

最近バグがjsonpページの古いバージョンに遭遇変更し、フロントエンドのページを変更するときに、バックグラウンドデータを要求する必要がある、ここでajaxを使用して、バックグラウンドのJavaが書かれたインターフェイスを呼び出すには、ajaxの使用の次のレビュー

ajaxインスタンスの解析

$.ajax({
 url: projectName + "/vmp/dataSource/queryFieldListData.do",
 data: {
 //urlPath : projectNameFZ + "/hasTablePermission.do",
 tableName: tableName,
 fieldName: fieldName
 },
 async: false,
 type: "post",
 dataType: "json",
 success: function(result) {
 examplefield = result;
 },
 });

1. url: リクエストを送信するアドレスです。

2. data: Object あるいは String 型のパラメータとして必要です。これがまだ String でない場合は、自動的に String 形式に変換され、get リクエストの url に追加されます。この自動変換を防ぐには processData オプションを参照してください。{foo1:"bar1",foo2:"bar2"}&foo1=bar1&foo2=bar2オブジェクトは key/value 形式でなければなりません。配列の場合、JQuery は自動的に異なる値に同じ名前を割り当てます。&foo=bar1&foo=bar2例えば、{foo:["bar1", "bar2"]}は.に変換されます。

3. async: Boolean型のパラメータが必要で、デフォルトではtrueに設定され、すべてのリクエストは非同期になります。同期リクエストを送信する必要がある場合は、このオプションをfalseに設定します。同期リクエストはブラウザをロックし、ユーザーは他のアクションを実行する前にリクエストが完了するまで待たなければならないことに注意してください。

4. type: String型のパラメータが必要で、リクエストメソッドはデフォルトではgetです。

5. dataType: サーバーから返されるデータの型を指定します。指定しない場合、JQueryはhttpパケットのMIME情報に基づいて自動的にresponseXMLまたはresponseTextを返し、コールバック関数のパラメータとして渡します。使用可能なタイプは次のとおりです：

xml：JQueryで処理可能なXMLドキュメントを返します。

html：プレーンテキストのHTML情報を返します。DOMに挿入されたときに実行されるスクリプトタグが含まれています。

script: プレーンテキストの JavaScript コードを返します。結果は自動的にキャッシュされません。cache パラメータが設定されている場合を除きます。すべての post リクエストは、リモートリクエストの際に get リクエストに変換されることに注意しましょう。

json: JSONデータを返します。

jsonp: JSONPフォーマット。SONP形式を使用して関数を呼び出す場合、例えばmyurl?callback=?のようにSONP形式を使って関数を呼び出すと、JQueryは自動的に最後の"? "を正しい関数名に置き換えて実行します。を正しい関数名に置き換えてコールバック関数を実行します。

text: プレーンテキスト文字列を返します。

6.成功：パラメータの関数型の要件は、リクエストの成功後に呼び出されるコールバック関数は、2つのパラメータがあります。

サーバーによって返され、dataTypeパラメータに従って処理されます。

ステータスを記述する文字列。

function(data, textStatus){
//dataxmlDoc、jsonObj、html、textなどでもよい。
this; //ajaxリクエストで渡されたオプション・パラメータをコールする。
}

ajaxはjqueryでカプセル化された非同期リクエスト・メソッドであることは周知の事実ですが、その基本的な実装はどのようになっているのでしょうか？ ネイティブjsで非同期リクエストを実装するには？ これにはXMLHttpRequestオブジェクトを使用する必要があります。つまり、ページ全体をリロードすることなく、ウェブページの一部を更新することができます。

• XMLHttpRequest がAJAXの基本です。
• XMLHttpRequestオブジェクトは、ページ全体をサーバに送信することなく、ウェブページの部分的な更新を可能にします。
• XMLHttpRequestオブジェクトは、クライアントとサーバ間の非同期通信に使用されます。

以下の操作を行います：

1. バックグラウンドでのクライアントからのデータ送信
2. サーバーからのデータ受信
3. ページをリロードせずに更新します。

XMLを使ってajaxリクエストを実装する5つのステップ

1. XMLHttpRequest 非同期オブジェクトの作成

var xhr;
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xhr=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xhr=new ActiveXObject("Microsoft.XMLHTTP");
 }

1. コールバック関数の設定

xhr.onreadystatechange = callback

1. サーバーとの接続を確立するには、openメソッドを使用します。

// get  
xhr.open("get", "test.php", true)
// post openメソッドでサーバーにデータを送信するには、リクエスト・ヘッダが設定されている必要がある。
xhr.open("post", "test.php", true)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

1. サーバーへのデータ送信

// get パラメータを渡す必要がない
xhr.send(null)
// post 渡されるパラメータ
xhr.send("name=jay&age=18")

1. コールバック関数における異なるレスポンス状態の取り扱い

function callback() {
 // 非同期オブジェクトの状態を決定する
 if(xhr.readyState == 4) {
 // 対話が成功したかどうかを判断する
 if(xhr.status == 200) {
 // サーバーからデータを取得する
 var res = xhr.responseText
 // データを解析する
 res = JSON.parse(res)
 }
 }
}