技術共有

AJAXの勉強メモ（個人利用）

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

アヤックス

ネイティブAJAX

1.1AJAX の概要

AJAX のプロセス全体は、Asynchronous JavaScript And XML (非同期の JS と XML) です。 AJAX を使用すると、ブラウザーで非同期リクエストをサーバーに送信できることが最大の利点です。更新せずにデータを取得できることです。 AJAX は新しいプログラミング言語ではなく、既存の標準を組み合わせて使用​​する新しい方法です。

1.2 XML の概要

XML 拡張可能なマークアップ言語。
XML はデータを送信および保存するように設計されています。
XML は HTML に似ています。違いは、HTML には事前定義されたタグはありませんが、これらはすべてデータをマークするために使用されるカスタム タグであるという点です。

<student>
	<name>John</name>
	<age>18</age>
</student>

  • 1
  • 2
  • 3
  • 4

現在は JSON に置き換えられています。

{"name":"John","age":18}

  • 1

1.3 AJAXの特徴

1.3.1AJAXの利点

1) ページを更新せずにサーバーと通信できます。
2) ユーザーイベントに基づいてページコンテンツの一部を更新できます。

1.3.2AJAXの欠点

1) 閲覧履歴が残らないので戻ることができない
2) クロスドメインの問題がある (同じ起源)
3) SEO は優しくない (Web コンテンツをクロールできない)

1.4HTTP

HTTP (ハイパーテキスト トランスポート プロトコル) プロトコル [ハイパーテキスト転送プロトコル] は、ブラウザと World Wide Web サーバー間の通信ルールを詳細に規定したプロトコルです。

1.4.1 リクエストメッセージ

焦点は形式とパラメータです

行	GET  /s?ie=utf-8  HTTP/1.1
头	Host: atguigu.com
	Cookie: name=guigu
	Content-type: application/x-www-form-urlencoded
	user-Agent: chrome 83
空行
体	username=admin&password=admin

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
1.4.2 応答メッセージ
行	HTTP/1.1  200  OK
头	Content-Type: text/html;charset=utf-8
	 Content-length: 2048
	 Content-encoding: gzip
空行
体	<html>
		<head>
		</head>
		<body>
			<h1>HHHHello</h1>
		</body>
	</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

注記：

GET リクエストを送信する: ページ チェックでネットワークを開き、ページを更新し、リクエストを送信し、応答を受信して​​、先頭のリクエストを開きます。ヘッダーには、クエリ文字列パラメーターと同様に、応答ヘッダーとリクエスト ヘッダーがあります。 クエリ文字列パラメーターは要求された URL 内のコンテンツの解析結果、要求ヘッダーは要求行と要求ヘッダーの場所、応答ヘッダーは応答行と応答ヘッダー、クリック応答は応答本文です。

POST リクエストの送信: ヘッダーのクエリ文字列パラメーターが他のものに変更されます。

xhr は XMLHttpRequest の頭字語で、Web ページ検査ネットワークの XHR は AJAX リクエストのフィルターです。

AJAX は、URL にパラメータを含めた GET リクエストを送信します。まずパラメータを疑問符で区切ってから直接記述し、& で接続します。

http:127.0.0.1:8080/server?a=100&b=200&c=300

  • 1

AJAX は、xhr.send() にパラメータを含む GET リクエストを送信します。

//3.发送
xhr.send('a=100&b=200&c=300');
xhr.send('a:100&b:200&c:300');
xhr.send('1231212313');

  • 1
  • 2
  • 3
  • 4

AJAX が GET リクエストを送信する

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>

    <script>
        //获取button元素
        const btn=document.getElementsByTagName('button')[0];
        const result=document.getElementById('result')
        //绑定事件
        btn.onclick=function(){
            //1.创建对象
            const xhr=new XMLHttpRequest();
            //2.初始化 设置请求方法和url
            xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');
            //3.发送
            xhr.send();
            //4.事件绑定 处理服务端返回的结果
            //on  when 当...时候
            //readystate是xhr对象中的属性，表示状态0,1,2,3,4
            //change 改变
            xhr.onreadystatechange=function(){
                //判断（服务端返回了所有的结果）
                if(xhr.readyState===4){
                    //判断响应状态码 200 404 403 401 500
                    //2xx 都是成功
                    if(xhr.status >= 200 && xhr.status<300){
                        //处理结果 行 头 空行 体 
                        //1.响应行
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体

                        result.innerHTML=xhr.response
                    }else{

                    }
                }
            }

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58

AJAX が POST リクエストを送信する

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST 请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        //获取元素对象
        const result=document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover",function(){
            //1.创建对象
            const xhr=new XMLHttpRequest()
            //2.初始化 设置类型与URL
            xhr.open('POST','http://127.0.0.1:8000/server');
            //3.发送
            xhr.send('a=100&b=200&c=300');
            //4.事件绑定
            xhr.onreadystatechange=function(){
                //判断
                if(xhr.readyState===4){
                    if(xhr.status>=200&&xhr.status<300){
                        //处理服务端返回的结果
                        result.innerHTML=xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

対応するバックエンドserver.js

const express=require('express')

//创建应用对象
const app=express()

//创建路由规则
//req是对请求报文的封装
//res是对响应报文的封装
app.get('/server',(req,res)=>{
    //设置响应头,设置允许跨域
    res.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    res.send('ok');
})

app.post('/server',(req,res)=>{
    //设置响应头,设置允许跨域
    res.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    res.send('okkkk');
})

//监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口启动中。。。")
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

カスタムリクエストヘッダー

//自定义请求头，需要在后端设置好，否则会报错
xhr.setRequestHeader('name','hhhhhh')

  • 1
  • 2

対応するバックエンド設定

//可以接收任意类型的请求
app.all('/server',(req,res)=>{
    //设置响应头,设置允许跨域
    res.setHeader('Access-Control-Allow-Origin','*');
    //响应体
    res.setHeader('Access-Control-Allow-Headers','*');
    //设置响应体
    res.send('okkkk');
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

まず、 res.setHeader('Access-Control-Allow-Headers','*'); はすべての応答ヘッダーを受信するように設定され、次に app.all はオプション タイプのリクエストが返されるため、任意のタイプのリクエストを受信することを意味します。応答が得られないので、すべて受信するように変更します。

サーバーが JSON データに応答する

app.all('/json-server',(req,res)=>{
    //设置响应头,设置允许跨域
    res.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    res.setHeader('Access-Control-Allow-Headers','*');
    //响应一个数据
    const data={
        name:'hoshi'
    };
    //对对象进行字符串转换
    let str=JSON.stringify(data);
    //设置响应体
    res.send(str)
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

応答本文は文字列またはバッファのみであるため、型を変換する必要があります。
クライアントが受け取るのは JSON オブジェクトに変換できる文字列です。自動変換と手動変換の 2 つの方法があります。
手動変換:

const data=JSON.parse(xhr.response)
result.innerHTML=data.name;

  • 1
  • 2

自動変換:

 //设置响应体数的类型
xhr.responseType='json';
result.innerHTML=xhr.response.name;

  • 1
  • 2
  • 3

個人プロフィール

彼は 30 年以上テクノロジーの研究に専念しており、java、linux、javascript、php、css などのさまざまな言語に堪能であり、オープンソース分野で多くの貢献を行っています。将来の参考のために技術開発におけるいくつかの問題を共有する開発者ドキュメント ステーション。

私の連絡先情報

郵便