Catatan belajar AJAX (untuk penggunaan pribadi)

2024-07-12

Bahasa Indonesia: AJAX

AJAX asli

1.1Pengenalan AJAX

Seluruh proses AJAX adalah Asynchronous JavaScript And XML, yang merupakan Asynchronous JS dan XML. Melalui AJAX, Anda dapat mengirim permintaan asinkron ke server di browser. Keuntungan terbesar: memperoleh data tanpa menyegarkan. AJAX bukanlah bahasa pemrograman baru, namun cara baru menggunakan standar yang ada secara bersamaan.

1.2 Pengenalan XML

Bahasa markup XML yang dapat diperluas.
XML dirancang untuk mengirimkan dan menyimpan data.
XML mirip dengan HTML. Perbedaannya adalah ada tag yang telah ditentukan sebelumnya dalam HTML, tetapi tidak ada tag yang telah ditentukan sebelumnya dalam XML. Semuanya merupakan tag khusus yang digunakan untuk menandai beberapa data.

<student>
	<name>John</name>
	<age>18</age>
</student>
1
2
3
4

Sekarang telah digantikan oleh JSON.

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

1.3 Fitur AJAX

1.3.1Kelebihan AJAX

1) Dapat berkomunikasi dengan server tanpa me-refresh halaman
2) Memungkinkan Anda memperbarui sebagian konten halaman berdasarkan peristiwa pengguna

1.3.2Kekurangan AJAX

1) Tidak ada riwayat penelusuran dan tidak dapat kembali
2) Ada masalah lintas domain (asal sama)
3) SEO tidak ramah (konten web tidak dapat dirayapi)

1.4HTTP

Protokol HTTP (protokol transportasi hiperteks) [Protokol Transfer Hiperteks], protokol merinci aturan komunikasi antara browser dan server World Wide Web.

1.4.1 Pesan permintaan

Fokusnya adalah pada format dan parameter

行	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 Pesan tanggapan

行	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

Catatan:

Kirim permintaan GET: Buka jaringan di pemeriksaan halaman, segarkan halaman, kirim permintaan, terima respons, dan buka permintaan teratas. Ada Header Respons dan Header Permintaan di header, serta Parameter String Kueri. Query String Parameters adalah hasil parsing konten pada URL yang diminta, Request Headers adalah baris permintaan dan lokasi header permintaan, Response Headers adalah baris respons dan header respons, dan klik Response adalah isi respons.

Kirim permintaan POST: Parameter String Kueri di Header akan berubah ke yang lain.

xhr adalah singkatan dari XMLHttpRequest, dan XHR di jaringan inspeksi halaman web adalah filter untuk permintaan AJAX.

AJAX mengirimkan permintaan GET yang membawa parameter di url. Pertama pisahkan dengan tanda tanya, lalu tulis langsung dan hubungkan dengan &.

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

AJAX mengirimkan permintaan GET yang membawa parameter di xhr.send()

//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 mengirimkan permintaan 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 mengirimkan permintaan 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 backend yang sesuai

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

Tajuk permintaan khusus

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

Pengaturan backend yang sesuai

//可以接收任意类型的请求
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

Pertama, res.setHeader('Access-Control-Allow-Headers','*'); diatur untuk menerima semua header respons, dan kemudian app.all berarti menerima semua jenis permintaan, karena permintaan jenis opsi akan dikembalikan dan tidak ada respons yang dapat diperoleh, jadi ubah ke semua untuk menerima.

Server merespons data 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

Isi respons hanya dapat berupa string atau buffer, sehingga tipenya perlu dikonversi.
Apa yang diterima klien adalah string, yang dapat diubah menjadi objek JSON. Ada dua cara, satu adalah konversi otomatis dan yang lainnya adalah konversi manual.
Konversi manual:

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

Konversi otomatis:

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

Berbagi teknologi