ajax基础

ops/2024/11/29 21:35:46/

一:express框架

在终端输入node+js文件名

javascript">// 引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
app.get('/',(request,response) => {//设置响应response.send('Hello Express');
});    // 监听3000端口
app.listen(8000,()=>{console.log("服务器已经启动");  // 启动成功后,在命令行中看到此消息
});

Ctrl+c结束服务器

二:ajax入门:

javascript">// 引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
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');
});  // 监听8000端口
app.listen(8000,()=>{console.log("服务器已经启动");  // 启动成功后,在命令行中看到此消息
});

 get请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#result{width: 200px;height: 100px;border: 1px solid black;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>//获取按钮元素const btn =document.getElementsByTagName('button')[0];const result = document.getElementById('result');//添加点击事件btn.onclick = function(){//1.创建对象const xhr = new XMLHttpRequest();//2.初始化xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');//3. 发送请求xhr.send();//4.时间绑定//on when 当...时候//readystate 是xhr的一个属性,值有0-4,//分别代表请求未发送,请求发送中,请求发送完成,响应头部接收完成,响应数据接收完成//改变状态函数xhr.onreadystatechange = function(){//判断(服务端返回了所有的结果)if(xhr.readyState===4){//判断(状态码是否为200,即服务器返回了正确的数据)//响应状态码分别有200 404 500等if(xhr.status>=200&&xhr.status<300){//处理结果//获取状态码console.log(xhr.status);//状态状态字符串console.log(xhr.statusText);//返回所有响应头console.log(xhr.getAllResponseHeaders);//响应体console.log(xhr.response);}else{console.log('请求出错');}result.innerHTML=xhr.response;}}}</script>
</body>
</html>

post请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>POST请求</title><style>#result{width: 200px;height: 100px;border: 1px solid black;}</style>
</head>
<body><div id="result"></div><script>const result = document.getElementById("result");result.addEventListener("mouseover",function(){// console.log("mouseover");const xhr = new XMLHttpRequest();xhr.open("POST","http://127.0.0.1:8000/server");xhr.send();xhr.onreadystatechange=function(){if(xhr.readyState===4 && xhr.status===200){if(xhr.status>=200&&xhr.status<300){result.innerHTML=xhr.response;}}}})</script>
</body>
</html>

 设置请求头信息:

 服务器需要设置响应头,all可以接受任何的请求

response.setHeader('Access-Control-Allow-Headers','*');

设置允许跨域(自己命名的请求头信息)

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

服务器端响应json数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>json</title><style>#result{width: 200px;height: 100px;border: 1px solid black;}</style>
</head>
<body><div id="result"></div><script>const result=document.getElementById('result');//绑定键盘按下事件window.onkeydown = function(){// console.log('test');//发送请求const xhr = new XMLHttpRequest();//设置响应体数据类型xhr.responseType='json';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;//自动转化console.log(xhr.response);result.innerHTML=xhr.response.name;}}}</script>
</body>
</html>

nodemon自动重启工具

 在终端中输入 npm install -g nodemon指令

安装完成之后只需要打node+tab就可以

ajaxIE的缓存问题

只需要加一个时间戳就可以

延迟请求

超过两秒请求取消

让网络离线,报异常

ajax手动取消

注意这里使用的是let xhr =null

重复请求问题


http://www.ppmy.cn/ops/137751.html

相关文章

新潮传媒集团创始人张继学将出席创客匠人创始人IP领袖高峰论坛

正式官宣&#xff01;中国最大的社区数字化媒体平台——新潮传媒集团创始人张继学&#xff0c;已确认受邀出席创客匠人5000人“全球创始人IP领袖高峰论坛”&#xff0c;与我们共赴一场知识服务行业的盛宴&#xff01; 由创客匠人发起的“全球创始人IP领袖高峰论坛”将在2024年…

非协议默认端口的:NAT alg需配置port-mapping

参考解释文章&#xff1a; https://zhiliao.h3c.com/Theme/details/167990 https://zhiliao.h3c.com/Theme/details/44359 nat的alg和port-mapping - 知了社区 NAT alg的功能 NAT ALG&#xff08;Application Level Gateway&#xff0c;应用层网关&#xff09;主要完成对应用…

【11-20期】Java面试进阶:深入解析核心问题与实战案例

&#x1f680; 作者 &#xff1a;“码上有前” &#x1f680; 文章简介 &#xff1a;Java &#x1f680; 欢迎小伙伴们 点赞&#x1f44d;、收藏⭐、留言&#x1f4ac; 文章题目&#xff1a;Java面试进阶&#xff1a;深入解析11-20期核心问题与实战案例 摘要&#xff1a; 本篇…

ThinkPHP Nginx 重写配置

目录 NGINX 重写 Admin项目隐藏入口文件&#xff0c;且禁用Admin模块&Admin.php 1️⃣配置仅用模块 2️⃣新增admin_xyz.php文件&#xff08;自定义入口文件名&#xff09;&#xff0c;并绑定admin模块 3️⃣配置nginx 重写规则 NGINX 重写 在Nginx低版本中&#xff0…

诠视科技受邀出席“中国虚拟现实产学研大会”

2024年11月2-3日&#xff0c;由中国虚拟现实技术与产业创新平台举办的第十届“中国虚拟现实产学研大会” 在北京顺利召开&#xff0c;大会围绕“虚拟现实技术与产业创新融合”这一主题进行深入探讨。诠视科技作为虚拟现实产业的创新领军企业&#xff0c;CEO林瓊受邀参加本次活动…

UDP客户端服务器通信

在这篇博客中&#xff0c;我们将探索 UDP&#xff08;用户数据报协议&#xff09; 通信&#xff0c;简要地说&#xff0c;UDP 是一种无连接、快速但不可靠的通信协议&#xff0c;适用于需要快速数据传输但对丢包容忍的场景&#xff0c;比如视频流和在线游戏。就像《我是如此相信…

数据库学习记录03

DML【数据操作语言】 DQL是对数据的查操作&#xff0c;DML就是操作&#xff1a;增、删、改。数据库的基础操作就是&#xff1a;增删改查&#xff08;CRUD); 1.插入&#xff08;增&#xff09; #语法1 insert into 表名(字段名1,...) values(值1,...);#语法2 insert into 表名(…

67 mysql 的 间隙锁

前言 我们这里主要是 来看一下 mysql 中的 间隙锁 间隙锁 主要存在的地方一般就是在 查询主键查询不到, 索引查询查询不到 的场景 然后 我们这里来调试一下 这里的整个流程, 间隙锁的加锁 以及 间隙锁的使用, 以及 间隙锁的释放 从逻辑上来说 间隙锁 锁定的是一个区间, 按照…