Ajaxは新しいプログラミング言語ではなく、既存の標準を使用する新しいアプローチです。 Ajaxは、ページ全体をリロードせずにサーバーとデータを交換できます。この非同期インタラクション方法により、ユーザーはクリック後にページを更新することなく新しいデータを取得できます。
xmlhttprequestオブジェクト
AjaxのコアはXmlhttpRequestオブジェクト(XHR)です。 XHRは、サーバーにリクエストを送信し、サーバーの応答を解決するためのインターフェイスを提供します。非同期でサーバーから新しいデータを取得する機能。
ブラウザでオブジェクトを作成します(IE7以降のみをサポートします):
var xhr = new xmlhttprequest();
XHRの使用方法
最初に紹介するのは、Open()メソッドです。 3つのパラメーターを受け取ります。
•送信されるリクエストの種類(投稿、取得など)
•要求されたURL
•リクエストが非同期に送信されるかどうかを示すボーリアン値
open()を呼び出す例:
xhr.open( "get"、 "index.jsp"、false);
index.jspのリクエストを取得します。 URLは、コードが実行される現在のページに関連しています。 Open()メソッドを呼び出すと、実際にリクエストが送信されるわけではなく、送信のリクエストを開始するだけです。
リクエストを送信するには、send()を呼び出します。
xhr.send(null);
send()は、パラメーター、つまり要求のある本体として送信されるデータを受信します。要求本体を介してデータを送信する必要がない場合は、nullを渡す必要があります。
対応するデータは、XHRオブジェクトの関連するプロパティで満たされます。
•responseText:テキストは応答本体として返されました
•ResponseXML:応答としてのコンテンツタイプは「Text/XML」または「Application/XML」です
•ステータス:応答のHTTPステータス
•statustext:HTTPステータスの説明
応答を受け取った後、最初にステータス属性を確認し、応答が返されたことを確認します。通常、200は成功の兆候として使用されます。ステータスコード304は、リソースが変更されておらず、ブラウザのキャッシュバージョンを直接使用できることを示します。
適切な応答を受信するには、次の方法で2つのステータスコードを検出する必要があります。
xhr.open( "get"、 "index.jsp"、false); xhr.send(null); if((xhr.status> = 200 && xhr.status <300)|| xhr.status == 304){alert(xhr.responsetext);ReadyStateプロパティを検出することにより、要求/応答プロセスの現在のアクティブフェーズを決定できます。
•0:初期化されていません。 Open()メソッドは呼び出されませんでした
•1:開始。 open()メソッドが呼び出され、send()メソッドは呼び出されていません。
•2:送信。 send()メソッドが呼び出され、応答はありませんでした
•3:受信。一部のデータが受信されました
•4:完了。すべてのデータが受信されており、クライアント側で使用できます
ReadyStateプロパティの値が変更されると、ReadyStateChangeイベントがトリガーされます。ブラウザの互換性を確保するには、open()を呼び出す前に、readeadystatechangeイベントハンドラーを指定します。
var xhr = new xmlhttprequest(); xhr.onedystatechange = function(){if(xhr.status> = 200 && xhr.status <300)|| xhr.status ================ " + xhr.status);}}}; xhr.open(" get "、" index.jsp "、true); xhr.send(null);非同期リクエストは、応答を受信する前にキャンセルできます。
xhr.abort();
HTTPヘッダー情報
XHRオブジェクトは、リクエストヘッダーを操作し、ヘッダー情報に応答する方法を提供します。
デフォルトでは、XHRリクエストを送信している間、次のヘッダー情報も送信されます。
•受け入れる:ブラウザが処理できるコンテンツの種類
•Accept-Charset:ブラウザが表示できる文字セット
•Accept-Encoding:ブラウザが処理できる圧縮エンコード
•承認言語:ブラウザによって現在設定されている言語
•接続:ブラウザとサーバーの間の接続のタイプ
•Cookie:現在のページに設定されたCookie
•ホスト:リクエストが発行されたページが配置されているドメイン
•参照者:リクエストを発行したページのURL
•user-aent:ブラウザのユーザーエージェント文字列
SetRequestHeader()を使用して、カスタムリクエストヘッダー情報を設定します。 send()を呼び出す前に、open()メソッドを呼び出す必要があります
setRequestHeader():
xhr.open( "get"、 "index.jsp"、true); xhr.setRequestheader( "myheader"、 "myvalue"); xhr.send(null);
getResponseHeader()を呼び出し、フィールド名を渡して、対応する応答ヘッダー情報を取得します。 getAllResponseHeader()は、すべてのヘッダー情報を含む長い文字列を取得します。
var myheader = xhr.getResponseHeader( "MyHeader"); var allheaders = xhr.getallResponseHeader();
リクエストを取得します
GETは、特定の情報をサーバーに照会するために使用されます。クエリ文字列パラメーターをURLの最後に追加できます。クエリ文字列内の各パラメーターの名前と値は、ecodeuricomponent()を使用してエンコードする必要があります。
xhr.open( "get"、 "login.jsp?name1 = value1&name2 = value2"、false); addurlparam()は、追加するパラメーターのURL、パラメーターの名前、パラメーターの値の3つのパラメーターを受信します。 var url = "login.jsp"; // parameter url = addurlparam(url、 "username"、 "xxyh"); url = addurlparam(url、 "password"、 "xxyh123"); //リクエストxhr.open( "get"、url、fals);
リクエストを投稿します
POSTリクエストは、保存する必要があるサーバーにデータを送信するために使用されます。 POSTリクエストの本文には多くのデータが含まれている可能性があり、形式は無制限です。
初期化リクエスト:
xhr.open( "post"、 "login.jsp"、true);最初に、コンテンツタイプのヘッダー情報をApplication/X-WWW-Form-URLENCODEDに設定してから、文字列形式を作成します。ページのフォームデータをシリアル化してXHRを介してサーバーに送信する必要がある場合は、Serialize()関数を使用してこの文字列を作成できます:xhr.open( "get"、 "login.jsp"、false); document.getElementById( "user-info"); xhr.send(serialize(form));
上記は、編集者が紹介したJavaScriptのAjaxの詳細な理解です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!