ホームページ > 記事 > ウェブフロントエンド > ajax の正しい使い方初めて知ったときの ajax の使い方の詳細

ajax の正しい使い方初めて知ったときの ajax の使い方の詳細

寻∝梦オリジナル: 2018-09-10 12:03:401364ブラウズ

この記事では主にajaxの定義を紹介しますが、ajaxに出会ったばかりの人にとってはまだ理解できない人もいると思うので、この記事ではajaxを正しく理解し、ajaxを正しく学ぶ方法を説明します。今すぐこの記事を一緒に読みましょう

最近 ASP.NET Ajax を学習していますが、少し混乱しているので、最初に Ajax を学習してから ASP.NET Ajax に移行することにしましたこの記事では Ajax について紹介します。初めて Ajax をマクロな観点から見て、詳細から学ぶと、記事の概要は次のとおりです。

Ajax定義
Ajax合成
XMLHttpRequest
Ajaxの一般的な使用法
Ajax クライアントのライフサイクル Ajax の定義
Ajax は、Asynchronous JavaScript and XML の略語であり、新しいプログラミング言語ではなく、既存の標準を使用する新しい方法です。正式名称には JavaScript と XML だけが含まれているように見えますが、実際には Ajax は JavaScript、XML、CSS、DOM、および XMLHttpRequest で構成されています。 Ajax合成
JsonとXMLHttpRequest以外は以前勉強したことがあるので簡単に紹介します。

1. HTML/XHTML: Ajax ページ、つまり初めてロードされて表示されるページの初期スタイルを記述するために使用されます。

2. DOM: XML データ構造を表すために使用されるドキュメントオブジェクトモデル。 3. CSS: Cascading Style Sheet (カスケードスタイルシート) 式。HTML ファイル内の要素のスタイルを表すために使用されます。 4. XML と JSON: XML は、サーバーとクライアントの両方で適切に解釈できる標準データ形式です。JSON の形式は、JavaScript でオブジェクトを定義するための構文と一致しているためです。同じデータでも、JSON は XML よりも短いため、ネットワークトラフィックが軽減されます。
5. ブラウザー要求のサーバー側処理: 開発者は、サーバー側の設計と実装に慣れている方法を選択できます。 6. XMLHttpRequest オブジェクト: これを使用すると、開発者は JavaScript でサーバーに対して非同期に HTTP リクエストを作成し、応答を取得できます。 7. JavaScript: 上記の要素は、JavaScript を介して DOM、CSS などを表示および変更するなど、JavaScript を介して相互にリンクできます。

XMLHttpRequest オブジェクト

XMLHttpRequest オブジェクトは、AJAX および Web 2.0 アプリケーションの技術的基盤であり、AJAX は XMLHttpRequest を使用して HTTP リクエストと応答情報を送受信します。 XMLHttpRequest オブジェクト経由で送信される HTTP リクエストでは、ページに

要素が含まれていたり、ポストバックされたりする必要はありません。 AJAX の「A」は「非同期」を表します。これは、XMLHttpRequest オブジェクトの send() メソッドがすぐに戻ることができ、サーバーが HTTP を処理している間、Web ページ上の他の HTML/JavaScript がブラウザ側の処理を続行できることを意味します。リクエストを送信し、レスポンスを送信します。デフォルトでは、リクエストは非同期で行われますが、XMLHttpRequest オブジェクトを使用してリクエストを送信して処理する前に、ページがサーバーから応答を受信するまで他の Web ページの処理を一時停止する同期リクエストの送信を選択することもできます。応答を取得するには、まず JavaScript を使用して XMLHttpRequest オブジェクトを作成する必要があります。

(さらに詳しく知りたい場合は、PHP 中国語 Web サイトのAJAX 開発マニュアル 列にアクセスして学習してください)

XMLHttpRequest 属性

プロパティ	説明
onreadystatechange	このイベントハンドラーは状態が変化するたびにトリガーされ、通常はJavaScript関数を呼び出します
readyState	リクエストのステータス。可能な値は 5 つあります: 0 = 初期化されていない、1 = ロード中、2 = ロード済み、3 = インタラクティブ、4 = 完了
responseText	文字列として表されるサーバーの応答
responseXML	XML で表現されたサーバーからの応答。このオブジェクトは DOM オブジェクトに解析できます
status	サーバーの HTTP ステータスコード (200 は OK、404 は Not Found (見つからない) などに対応します)
statusText	HTTPステータスコードに対応するテキスト（OKまたはNot Foundなど）

XMLHttpRequestメソッド

Ajaxの使用法

Ajaxを使用する理由?非同期通信を実現し、ページを部分的に更新し、データ通信量を削減できるため、最も重要な点はユーザーに優れたエクスペリエンスを提供することです。

Ajax は、Google の地図など、現在の Web で非常に一般的です。エリアはドラッグするたびに再読み込みされますが、ページは更新されません Baidu の検索ボックスと一致します。コンテンツを入力すると表示されます。Weibo のコンテンツは更新されますが、ページはリロードされません...

Ajax クライアントのライフサイクル

このサイクルは、簡単に区別できる 6 つのプロセスに分かれています。

(1) ユーザーがあるウェブサイトに対して閲覧リクエストを行います。
(2) サーバーは HTML ページのコンテンツをブラウザーに送信します。
(3) ブラウザは受信したHTMLコンテンツを基にメモリ上にDOMを作成します。
(4) ユーザーがサーバーへの非同期リクエストをトリガーします。これは既存の DOM には影響しません。つまり、ユーザーの操作が中断されることはありません。
(5) ブラウザは、XML 形式のデータを元のページの JavaScript 関数に送信して処理します。
(6) ブラウザは結果を解析し、メモリ内の DOM を更新します。Web ページのコンテンツの一部が更新され、ページが非常にスムーズに表示されます。

実装原則

Ajax の読み込みは従来の Web アプリケーションと同じです。まず、URL アドレスを入力するかリンクをクリックすると、ブラウザーから HTTP リクエストがトリガーされ、その後サーバーがリクエストを処理して適切なリクエストを生成します。 HTML、CSS、および JavaScript がクライアントに送信され、クライアントのブラウザーにはその後のユーザー操作に対する応答が変わり始めます。これらのユーザー操作はブラウザーからの別の HTTP リクエストをトリガーしません。クライアントからの JavaScript コードの実行。

どんなに鮮やかな説明であっても、写真ほど良くはありません:

ajax の正しい使い方初めて知ったときの ajax の使い方の詳細

簡単な例: ページをリロードせずに book.xml 内の本のタイトルを取得します。

HTML コード:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>book</title>
<script type="text/javascript">
    function loadXMLDoc() {
        var xmlhttp;
        var txt, x, i;
        if (window.XMLHttpRequest) {
        // 当今主流浏览器
            xmlhttp = new XMLHttpRequest();
        }
        else {
        // IE5、IE6
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //状态
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                xmlDoc = xmlhttp.responseXML;
                txt = "";
                //获取全部书名
                x = xmlDoc.getElementsByTagName("书名");
                for (i = 0; i < x.length; i++) {
                    txt = txt + x[i].childNodes[0].nodeValue + "<br />";
                }
                //把书名写到myp中
                document.getElementById("myp").innerHTML = txt;
            }
        }
        //使用get，异步项为true
        xmlhttp.open("GET", "book.xml", true);
        xmlhttp.send();
    }
</script>
</head>

<body>

<h2>我的藏书:</h2>
<br/>
<p id="myp"></p>
<br/>
<br/>
<button type="button" onclick="loadXMLDoc()">获取我的藏书</button>
 </body>
</html>

新しく表示された結果は次のとおりです

この記事はここで終わりです (さらに詳しく知りたい場合は、PHP 中国語にアクセスしてください)ウェブサイト AJAX ユーザーマニュアルのコラムを参照してください)。ご質問がある場合は、以下にメッセージを残してください。

メソッド	説明
abort( )	現在のリクエストを停止します
getAllResponseHeaders()	HTTPリクエストのすべてのレスポンスヘッダーをキー/値のペアとして返します
getResponseHeader("header ")	指定されたヘッダーの文字列値を返します
open("method", "url")	サーバーへの呼び出しを作成します。メソッドパラメータには GET、POST、または PUT を指定できます。 url パラメータには、相対 URL または絶対 URL を指定できます。このメソッドには 3 つのオプションのパラメーターも含まれています
send(content)	サーバーにリクエストを送信します
setRequestHeader("header", "value")	ヘッダーを指定します指定された値に設定されます。 open() はヘッダーを設定する前に呼び出す必要があります

以上がajax の正しい使い方初めて知ったときの ajax の使い方の詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php JavaScript asp.net json css ajax html xhtml Object xml 数据结构 .net 并发对象事件 dom 异步样式表 http

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：AJAX の面接でよくある質問をいくつ知っていますか? ajax 面接でよくある 12 の質問とその回答次の記事：AJAX の面接でよくある質問をいくつ知っていますか? ajax 面接でよくある 12 の質問とその回答

続きを見る

ajax の正しい使い方 初めて知ったときの ajax の使い方の詳細

関連記事

ajax の正しい使い方初めて知ったときの ajax の使い方の詳細