アヤックスって何をするの？-フロントエンドQ&A-php.cn

アヤックスって何をするの？

青灯夜游

リリース： 2022-01-17 16:41:50

オリジナル

10057 人が閲覧しました

AJAX は、高速で動的な Web ページを作成するために使用されるテクノロジで、次の目的で使用できます: 1. 部分的なリクエストを作成して部分更新を実現する (ページを更新せずに Web ページを更新する)、2. サーバーからのリクエストページのロード後データ; 3. ページのロード後にサーバーからデータを受信; 4. バックグラウンドでサーバーにデータを送信します。

アヤックスって何をするの？

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

Ajax とは何ですか?

AJAX = 非同期 JavaScript および XML。

AJAX は、高速で動的な Web ページを作成するためのテクノロジです。

AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期に更新できます。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。

従来の Web ページ (AJAX を使用しない) では、コンテンツを更新する必要がある場合、ページ全体をリロードする必要があります。

AJAX を使用するアプリケーションの例は、Google マップ、Gmail、Youtube、Facebook など数多くあります。

ブラウザとサーバー間の非同期データ送信 (HTTP リクエスト) を使用して、部分的なリクエストを実行し、部分的な更新を実現します。

アヤックスって何をするの？

Ajax とはそれはためですか？用途は何ですか?

1. ページを更新せずに Web ページを更新します (部分更新)

2. ページの読み込み後にサーバーにデータを要求します

3. その後ページがロードされ、サーバーからデータが受信されます

4. バックグラウンドでサーバーにデータを送信します

Ajax の使用方法?

1. XMLHttpRequest オブジェクトを作成します

2. open メソッドを使用してサーバーとの対話情報を設定します

3. requestHeader() を設定します request.setRequestHeader (プロパティ名、属性値);

4. send() は送信データを設定し、サーバーとの対話を開始します

5. 応答を取得し、イベントを登録します

例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="getData()">获取数据</button>
    <script>
        function getData() {
            // 1.创建XMLHttpRequest对象
            var request = new XMLHttpRequest();
            // 2.使用open方法设置和服务器的交互信息
            // 请求的主体
            request.open(&#39;get&#39;, &#39;https://api.muxiaoguo.cn/api/lishijr/&#39;)
            // 3.设置requestHeader()    request.setRequestHeader(属性名称, 属性值);  
            // 这里用默认就好，不写了
            // 4. send()  设置发送的数据，开始和服务器端交互            
            request.send(); //调用send()之后,请求就会发送到服务器
            // 5.取得响应，注册事件
            request.onreadystatechange = function () {
                if (request.readyState === 4 && request.status === 200) { //4  响应完成 DONE
                    // console.log(request.responseText);
                    var res = JSON.parse(request.responseText);
                    console.log(res);
                    // 根据数据添加对应的节点
                    for (var arrIndex in res.data) {
                        // 创建一个节点
                        var p = document.createElement(&#39;p&#39;);
                        p.innerHTML = res.data[arrIndex].title;
                        document.body.appendChild(p);
                    }
                }
            }
            // 6.如果请求完成，并且响完成，可以获取到响应数据        

        }
    </script>
</body>
</html>

ログイン後にコピー

AJAX の概要:

AJAX は非同期 JavaScript および XML;

AJAX は、より優れた、より高速で、よりインタラクティブな作成方法です。 Web アプリケーションテクノロジ;

AJAX は Web サーバーソフトウェアから独立したブラウザテクノロジです;

AJAX は新しいプログラミング言語ではなくテクノロジです;

AJAX は JavaScript を使用して送信しますWeb ブラウザと Web サーバーの間でデータを受信します (フロントエンドとバックエンドの対話)。

AJAX は、ブラウザと Web サーバーの間で非同期データ送信を使用します (HTTP リクエスト)。

[関連チュートリアルの推奨事項: AJAX ビデオチュートリアル]

以上がアヤックスって何をするの？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。