前端开发工程师——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>
相关推荐
勉灬之4 分钟前
Next.js + Prisma 跨平台部署踩坑记
开发语言·javascript·ecmascript
cll_8692418915 分钟前
一个好看的Wordpress博客文字css样式
前端·css·ui
糖果店的幽灵9 分钟前
langgraph分支之 - 动态分支（Dynamic Branch）
java·前端·javascript·人工智能·langgraph
meilindehuzi_a19 分钟前
Workflow 与 Agent 有什么区别：从 LangChain 流水线到智能体决策
前端·人工智能
这是个栗子27 分钟前
前端开发中的常用工具函数(九)
开发语言·javascript·ecmascript·at
吃糖的小孩2 小时前
从只读页面到可控真实探针：我如何给 Owner Console 加手动诊断
前端
谷无姜2 小时前
为什么你的性能优化无效？可能是"木桶效应"在作祟
前端·性能优化
雾非雾2 小时前
《基于具身交互智能数字人技术：如何打造AI数字人宣讲平台"红厅智播”》
前端
Revolution612 小时前
一段 JavaScript 代码执行时，到底发生了什么
前端·javascript
智能起源2 小时前
关于元素层级过多，导致压祯的问题（使用winform或者WPF应用的webview组件嵌套网页时，动效卡顿问题）
前端
热门推荐
012026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片02GitHub 镜像站点03如何新建文件夹？ 电脑新建文件夹的4种方法04AI科技热点日报 | 2026年07月01日05幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南06国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路082026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？092026 年 AI 大模型 & AI 编程工具实战全总结10微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新