この記事では主に JavaScript における AJAX の関連知識を紹介します。以下のエディターで見てみましょう
概要
AJAX テクノロジーは Web ページ構築に必要なスキルの 1 つです。この記事は、誰もがこのテクノロジーを簡単に学ぶのに役立つことを願っています
1. ajax とは何ですか?
ajax (非同期 JavaScript XML) は、Web ページ全体をリロードするのではなく、部分的な Web ページ データを更新できます。
2. ajax の使用方法
ステップ 1: xmlhttprequest オブジェクトを作成する
XMLHttpRequest オブジェクトは、サーバーとデータを交換するために使用されます。
var xmlhttp =new XMLHttpRequest();
xmlHttp.onreadystatechange= callback; function callback(){}
ステップ 3: リクエストを設定して送信する
xmlhttprequest オブジェクトの open() メソッドと send() メソッドを使用して、リソース リクエストを設定し、サーバーに送信します。 xmlhttp.open(method, url, async) メソッドには get と post が含まれており、url は主にファイルまたはリソースのパスであり、async パラメーターは true (非同期を表す) または false (同期を表す) です。 (); use get メソッドはサーバーにリクエストを送信します。 xmlhttp.send(string); post メソッドを使用してサーバーにリクエストを送信します。 投稿フォーム データでは、xmlhttprequest オブジェクトの setRequestHeader メソッドを使用して HTTP ヘッダーを追加する必要があります。 投稿リクエストはいつ利用可能になりますか?(1)ファイルまたはデータベースを更新するとき
。(2) 投稿リクエスト
には文字数制限がないため、大量のデータをサーバーに送信します。xhttp.open("POST", "ajax_test.aspx", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("fname=Henry&lname=Ford");
xmlhttprequestオブジェクトのresponseText属性またはresponseXML属性を使用して、サーバーの応答を取得します。
サーバー応答のstring
データを取得するには、responseText 属性を使用し、サーバー応答の XML データを取得するには、responseXML 属性を使用します。function callback(){ if(xmlHttp.readyState == 4){ //判断交互是否成功 if(xmlHttp.status == 200){ //获取服务器返回的数据 //获取纯文本数据 var responseText =xmlHttp.responseText; document.getElementById("info").innerHTML = responseText; } } }
3. AJAX動作中の5つの状態(readyState)
AJAXの実際の動作中、XMLHttpRequest(XHR)へのアクセスは一度に完了するのではなく、複数の状態を経て得られる結果です。 AJAX におけるこの 5 つの状態は、AJAX エンジンによってそれぞれ切り替えられて設定されます。
0: XHR は定義されていますが、まだ初期化されていません 1: send() メソッドが呼び出され、リクエストが送信されています リクエストが送信された後、レスポンスの受信待ちが開始されます 2: レスポンスの受信はcompleted 3: 応答内容の解析中 4: 応答内容の解析が完了し、クライアント呼び出しに返されます 上記ステータスのうち、「0」ステータスは定義後に自動的に取得されるステータス値であり、アクセスの成功状況(取得した情報)は「4」で判断することが多いです。 状態が切り替わるたびに onreadystatechangeイベント
がトリガーされることに注意してください。したがって、onreadystatechange イベントはプロセス全体で 5 回トリガーされます利点
1. 最大 最も重要なことは、ページが更新されず、ページ内でサーバーと通信し、ユーザーの操作を中断する必要がなく、応答機能が高速であるため、ユーザーに非常に優れたサービスを提供することです。経験。
2. サーバーの負荷を軽減する ajax の原理は「オンデマンドでデータを取得する」ことであり、冗長なリクエストと応答によるサーバーの負荷を最小限に抑えることができます。 欠点1. Ajax は「戻る」ボタンを無効にし、ブラウザの「戻る」メカニズムを破壊します。
2. 検索エンジンのサポートは比較的弱いです。以上がJavaScript AJAX の簡単な理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。