AJAX implements get request

File structure
Insert picture description here

First you need to install the node module
server.js

//引入rexpress
const express = require('express');

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

//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response) => {
    
    
    //设置响应
    // response.send('HELLO EXPRESS')

    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')

    //设置响应体
    response.send('HELLO AJAX');

});

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

request is an encapsulation of the request message
response is the encapsulation of the response message

GET.html

<!DOCTYPE html>
<html lang="en">
<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>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];
        //绑定事件
        btn.onclick = function(){
     
     
            //
            // console.log('test');
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和Url
            xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');
            //3.发送
            xhr.send();
            //4.事件绑定 处理服务端返回的结果
            // on when 当...什么时候
            //readystate时xhr对象中的属性,表示状态 0 1 2 3 4 
            //0 未初始化
            //1 open方法调用完毕
            //2 send方法调用完毕
            //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的文本
                        result.innerHTML = xhr.response;
                    }else{
     
     

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

xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300'); After setting the request method, the part after the question mark is the passing parameter.
readystate is an attribute in the xhr object, which represents the state. 0 is not initialized, 1 the open method is called, 2 the send method is called, 3 the server returns part of the results, 4 the server returns all the results.
xhr.status >= 200 && xhr.status <300 Judge the status of the response code, 200 or more and less than 300 as success. 200 404 403 401 500

After running, the text in the result can be successfully modified.

AJAX implements get request

Guess you like