前端开发工程师——ajax

南栀北夏ii2024-05-20 8:48

express框架

终端输入

npm init --yes
npm i express

请求报文/响应报文

javascript 复制代码 
// 1.引入express
const express = require('express');


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

// 3.创建路由规则
// request:是对请求报文的封装
// response：是对响应报文的封装
app.get('/',(request,response) => {
// 设置响应
    response.send('hello express');
});

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

Ajax-get请求

设置server.js服务端

javascript 复制代码 
// 1.引入express
const express = require('express');


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

// 3.创建路由规则
// request:是对请求报文的封装
// response：是对响应报文的封装
app.get('/server',(request,response) => {
// 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应体
    response.send("Hello ajax");

});

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

1_get.html客户端页面

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>get请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result")
        // 绑定事件
        btn.onclick = function(){
            // ajax步骤
            // 1.创建对象
            const xhr = new XMLHttpRequest();
            // 2.初始化，设置请求方法和url
            xhr.open("GET","http://localhost:8000/server");
            // 3.发送
            xhr.send();
            // 4.事件绑定，处理服务端返回的结果
            //on 当。。。的时候
            // readystate是xhr对象中的属性，表示状态0，1，2，3，4
            // change改变
            xhr.onreadystatechange = function(){
                // 判断（服务端返回了所有的结果）
                if(xhr.readyState == 4){
                    // 判断响应状态码 200 404 403 401 500
                    // 其中2xx，表示2开头的都是表示成功
                    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>

ajax设置请求参数-get

Ajax---post请求

设置server.js服务端，添加post请求

javascript 复制代码 
// 1.引入express
const express = require('express');


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

// 3.创建路由规则
// request:是对请求报文的封装
// response：是对响应报文的封装
app.get('/server',(request,response) => {
// 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应体
    response.send("Hello ajax");

});

app.post('/server',(request,response) => {
    // 设置响应头，设置允许跨域
        response.setHeader('Access-Control-Allow-Origin','*');
        // 设置响应体
        response.send("Hello ajax post");
    
    });

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

1_post.html页面

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>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')
        // 绑定事件:表示只要鼠标经过就会出现ajax响应
        result.addEventListener('mouseover',function(){
            // 1.创建对象
            const xhr = new XMLHttpRequest();
            // 2.初始化，设置类型与url
            xhr.open("POST",'http://localhost:8000/server');
            // 3.发送
            xhr.send();
            // 4.绑定事件
            xhr.onreadystatechange = function(){
                // 判断
                if(xhr.readyState == 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

ajax设置请求参数-post

post请求头

html 复制代码 
 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

服务端响应JSON数据

服务端server.js

javascript 复制代码 
// 1.引入express
const express = require('express');


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

// 3.创建路由规则
// request:是对请求报文的封装
// response：是对响应报文的封装
app.get('/server',(request,response) => {
// 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应体
    response.send("Hello ajax");

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

app.post('/server',(request,response) => {
    // 设置响应头，设置允许跨域
        response.setHeader('Access-Control-Allow-Origin','*');
        // 设置响应体
        response.send("Hello ajax post");

    
    });

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

1_json.html客户端

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>json</title>
    <style>
        #result {
            width: 300px;
            height: 100px;
            border: solid 1px #90e
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        // 获取元素
        const result = document.getElementById('result')
        // 绑定键盘按下事件
        window.onkeydown = function(){
            // 发送请求
            const xhr = new XMLHttpRequest();
            // 初始化
            xhr.open("GET","http://127.0.0.1:8000/json-server")
            // 发送
            xhr.send()
            // 绑定事件
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // console.log(xhr.response);
                        // result.innerHTML = xhr.response;
                        // 手动对数据转化
                        let data = JSON.parse(xhr.response)
                        console.log(data)
                        result.innerHTML = data.name;
                    }
                }
            }
        }
    </script>
</body>
</html>

解决ie浏览器缓存问题

网络超时与异常问题

server.js

javascript 复制代码 
// 1.引入express
const express = require('express');


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

// 3.创建路由规则
// request:是对请求报文的封装
// response：是对响应报文的封装
app.get('/server',(request,response) => {
// 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应体
    response.send("Hello ajax");

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

});
app.get('/delay', (request, response) => {
    // 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 延时响应
    setTimeout(() => {
        // 设置响应体
        response.send("延时响应");
    },3000)

});


app.post('/server', (request, response) => {
    // 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send("Hello ajax post");


});

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

network.html

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>网络超时与异常</title>
    <style>
        #result {
            width: 300px;
            height: 100px;
            border: solid 1px #90e
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        // 获取元素
        const result = document.getElementById('result')
        // 绑定键盘按下事件
        window.onkeydown = function(){
            // 发送请求
            const xhr = new XMLHttpRequest();
            // 超时设置2s设置
            xhr.timeout = 2000;
            // 超时回调
            xhr.ontimeout = function(){
                alert("网络异常，请稍后重试");
            }
            // 网络异常回调
            xhr.onerror = function(){
                alert("你的网络似乎出现一些问题")
            }
            // 初始化
            xhr.open("GET","http://127.0.0.1:8000/delay")
            // 发送
            xhr.send()
            // 绑定事件
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // console.log(xhr.response);
                        // result.innerHTML = xhr.response;
                        // 手动对数据转化
                        let data = JSON.parse(xhr.response)
                        console.log(data)
                        result.innerHTML = data.name;
                    }
                }
            }
        }
    </script>
</body>
</html>

取消请求问题

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>Document</title>
</head>
<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        // 获取元素
        const btns = document.querySelectorAll("button")
        let x = null
        btns[0].onclick = function(){
            x = new XMLHttpRequest();
            x.open("GET","http://127.0.0.1:8000/delay");
            x.send();
        }
        // 取消事件
        btns[1].onclick = function(){
            x.abort()
        }
    </script>
</body>
</html>
相关推荐
别拿曾经看以后~1 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试1 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai2 小时前
wflow-web：开源啦 ，高仿钉钉、飞书、企业微信的审批流程设计器，轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc2 小时前
Flutter中文字体设置指南：打造个性化的应用体验
android·javascript·flutter
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play