当前位置： 首页 > news >正文

前端开发工程师——ajax

news 2025/8/4 1:16:04

express框架

终端输入

npm init --yes
npm i express

 请求报文/响应报文

// 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服务端

// 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客户端页面

<!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.初始化，设置请求方法和urlxhr.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请求

// 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页面

<!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.初始化，设置类型与urlxhr.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请求头

 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

服务端响应JSON数据

 服务端server.js

// 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客户端

<!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

// 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

<!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>

取消请求问题

<!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 = nullbtns[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>

http://www.lryc.cn/news/350950.html

相关文章：

  • uni-app项目在微信开发者工具打开时报错[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json
  • 最大连续1的个数（滑动窗口）
  • Spring Cloud 框架的应用详解
  • C语言 数组——向函数传递数组
  • 数据链路层简单介绍
  • 【软考】设计模式之装饰器模式
  • 网络编程day6
  • 5.23总结
  • SQL Server基础学习笔记
  • 用Vuex存储可配置下载的ip地址（用XML进行ajax请求配置文件）
  • Spring: OncePerRequestFilter
  • 《Python编程从入门到实践》day37
  • GBDT、XGBoost、LightGBM算法详解
  • 【考研数学】李林《880》是什么难度水平强化够用吗
  • Flutter 中的 AnimatedAlign 小部件：全面指南
  • (Qt) 默认QtWidget应用包含什么？
  • 测试环境KDE组件漏洞修复
  • 微服务下认证授权框架的探讨
  • 使用 ASM 修改字段类型，解决闪退问题
  • 【python】python社交交友平台系统设计与实现（源码+数据库）【独一无二】
  • Linux 实验报告3-4
  • 网络安全之BGP详解
  • 【MySQL精通之路】SQL优化(1)-查询优化(8)-嵌套联接优化
  • 30V降8V、12V、24V3.5A车充降压芯片IC H4112 5V-30V
  • 保护共享资源的方法(互斥锁)
  • 树的非递归遍历（层序）
  • 解决SpringBoot使用@Transactional进行RestTemplate远程调用导致查询数据记录为null的bug
  • pl/sql基础语法操作
  • Vue 父组件向子组件传递数据
  • 二十五、openlayers官网示例CustomOverviewMap解析——实现鹰眼地图、预览窗口、小窗窗口地图、旋转控件