尚硅谷Ajax笔记

一天拿下

  • 介绍
    • 二级目录
      • 三级目录

b站链接

介绍

ajax优缺点
在这里插入图片描述
http

node.js下载配置好环境

express框架
切换到项目文件夹，执行下面两条命令
有报错,退出用管理员身份打开
或者再命令提示符用管理员身份打开

npm init --yes
npm i  express

请求

    <script>//引入expressconst express = require('express');//创建应用对象const app = express();//创建路由规则//request对请求报文的封装//response是对响应报文的封装app.get('/',(request,response)=>{//设置响应response.send('HELLO EXPRESS');});//监听端口启动服务app.listen(8000,()=>{console.log("服务已经启动，8000端口监听中……");});</script>

ajax请求

<!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: solid 1px #90b;}</style>
</head>
<body><button>点击发送请求</button><div id = "result"></div><script>const btn = document.getElementsByTagName('button')[0];btn.onclick=function(){// console.log('test');//创建对象const xhr = new XMLHttpRequest();const result = document.getElementById("result");//初始化 设置请求方法和urlxhr.open('GET','http://127.0.0.1:8000/server');//发送xhr.send();xhr.onreadystatechange = function(){//判断（服务端返回了所有的结果）if(xhr.readyState === 4){if(xhr.status >=200 && xhr.status<300){//响应行/* console.log(xhr.status);//状态码console.log(xhr.statusTest);//状态字符串console.log(xhr.getAllResponseHeaders());//所有响应头console.log(xhr.response); */result.innerHTML = xhr.response;}else{}}}}</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>Document</title><style>#result{width: 200px;height: 100px;border: solid 1px #90b;}</style>
</head>
<body><div id="result"></div><script>const result = document.getElementById("result");//绑定事件result.addEventListener("mouseover",function(){//创建对象const xhr = new XMLHttpRequest();//初始化 设置类型与URLxhr.open('POST','http://127.0.0.1:8000/server');//发送xhr.send('1234567');//事件绑定xhr.onreadystatechange = function(){//判断if(xhr.readyState === 4){if(xhr.status>=200 && xhr.status<300){//处理服务端返回结果result.innerHTML=xhr.response;}}}})</script>
</body>
</html>

//引入express
const express = require('express');
//创建应用对象
const app = express();//创建路由规则
//request对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{//设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//设置响应体response.send('HELLO EXPRESS');
});
app.post('/server',(request,response)=>{//设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//设置响应体response.send('HELLO AJAX POST');
});//监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动，8000端口监听中……");
});

设置请求头

//设置请求头xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.setRequestHeader('name','atguigu');//发送xhr.send('a=100 & b=200 &c=300');

在这里插入图片描述

app.all('/server',(request,response)=>{//设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Hearders','*')//设置响应体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>Document</title><style>#result{width: 200px;height: 100px;border: solid 1px #90b;}</style>
</head>
<body><div id="result"></div><script>const result = document.getElementById("result");//绑定事件window.onkeydown = function(){//创建对象const xhr = new XMLHttpRequest();//设置响应体数据类型xhr.responseType = 'json';//初始化 设置类型与URLxhr.open('GET','http://127.0.0.1:8000/json-server');//设置请求头xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.setRequestHeader('name','atguigu');//发送xhr.send();//事件绑定xhr.onreadystatechange = function(){//判断if(xhr.readyState === 4){if(xhr.status>=200 && xhr.status<300){console.log(xhe.response);//处理服务端返回结果result.innerHTML=xhr.response.name;}}}}</script>
</body>
</html>

//引入express
const express = require('express');
//创建应用对象
const app = express();//创建路由规则
//request对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{//设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//设置响应体response.send('HELLO AJAX');
});
app.all('/server',(request,response)=>{//设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Hearders','*')//响应一个数据const data = {name:'atguigu'};//对对象进行字符串转换let str = JSON.stringify(data);//设置响应体response.send(str);
});//监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动，8000端口监听中……");
});

nodemon
有报错，退出软件用管理员身份打开

npm install -g nodemon

nodemon server.js

ie缓存

<script>const btn = document.getElementsByTagName('button')[0];const result = document.querySelector('#result');btn.addEventListener('click',function(){// console.log('test');const xhr = new XMLHttpRequest();xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now());xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status >=200 && xhr.status<300){result.innerHTML = xhr.response;}}}})</script>

//引入express
const express = require('express');
//创建应用对象
const app = express();//创建路由规则
//request对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{//设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//设置响应体response.send('HELLO AJAX');
});
app.all('/server',(request,response)=>{//设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Hearders','*')//响应一个数据const data = {name:'atguigu'};//对对象进行字符串转换let str = JSON.stringify(data);//设置响应体response.send(str);
});app.all('/json-server',(request,response)=>{//设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Hearders','*')//响应一个数据const data = {name:'atguigu'};//对对象进行字符串转换let str = JSON.stringify(data);//设置响应体response.send(str);
});app.get('/ie',(request,response)=>{//设置响应头  设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//设置响应体response.send('HELLO IE');
});
//监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动，8000端口监听中……");
});

超时与网络异常

 <script>const btn = document.getElementsByTagName('button')[0];const result = document.querySelector('#result');btn.addEventListener('click',function(){// console.log('test');const xhr = new XMLHttpRequest();//超时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){result.innerHTML = xhr.response;}}}})</script>


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

取消请求


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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].onlick = function(){x=new XMLHttpRequest();x.open("GET",'http://127.0.0.1:8000/delay');x.send();}btns[1].onlick = function(){x.abort();}</script>
</body>
</html>

请求重复发送问题

<script>const btns = document.querySelectorAll('button');let x =null;btns[0].onlick = function(){//判断标识变量if(isSending) x.abort();//如果正在发送，则取消该请求，创建一个新请求x=new XMLHttpRequest();isSending = true;x.open("GET",'http://127.0.0.1:8000/delay');x.send();x.onreadystatechange=function(){if(x.readyState === 4){isSending = false;}}}btns[1].onlick = function(){x.abort();}</script>

怎么感觉学的迷迷糊糊的……
emo中

我还会回来的……

二级目录

三级目录

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/448250.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

线上排查问题常用K8s命令

线上排查问题常用K8s命令

线上排查问题常用K8s命令 1 获取类 kubectl get po&#xff1a;获取默认namespace下节点信息 获取默认Default命名空间下的节点信息 kubectl get ns&#xff1a;获取所有命名空间 kubectl get po -n ziyi&#xff1a;获取指定namespace下的节点信息 kubectl get po -A&#x…
阅读更多...
项目安全问题及解决方法------用户密码处理

项目安全问题及解决方法------用户密码处理

我们一般来说是不保存原始密码&#xff0c;这样即使被拖库也不会造成用户数据损失&#xff0c;一般来说我们通常会使用 MD5 加密后保存&#xff0c;但是大家对于MD5是使用是否 是正确的呢&#xff1f;MD5 其实不是真正的加密算法。所谓加密算法&#xff0c;是可以使用密钥把明文…
阅读更多...
【Uni-App】运行微信小程序时报错routeDone with a webviewId 2 that is not the current page

【Uni-App】运行微信小程序时报错routeDone with a webviewId 2 that is not the current page

使用HBuilderX开发微信小程序&#xff0c;运行项目的时有可能会出现routeDone with a webviewId 1 that is not the current page的报错&#xff0c;但不影响运行。如果强迫症介意的话&#xff0c;可以考下面的方法进行修复。 产生原因 由于微信开发者工具的调试基础库处于灰度…
阅读更多...
CTF盲水印工具：Blind-WaterMark安装

CTF盲水印工具：Blind-WaterMark安装

工具下载地址&#xff1a;GitCode - 开发者的代码家园 下载完毕后&#xff0c;只留这些东西就行 接下来需要安装两个依赖&#xff1a; opencv、matplotlib 直接pip install安装的话&#xff0c;工具使用会报错 所以需要到网站里挑选适合的版本进行安装 下载地址&#xff1…
阅读更多...
GmSSL - GmSSL的编译、安装和命令行基本指令

GmSSL - GmSSL的编译、安装和命令行基本指令

文章目录 Pre下载源代码(zip)编译与安装SM4加密解密SM3摘要SM2签名及验签SM2加密及解密生成SM2根证书rootcakey.pem及CA证书cakey.pem使用CA证书签发签名证书和加密证书将签名证书和ca证书合并为服务端证书certs.pem&#xff0c;并验证查看证书内容&#xff1a; Pre Java - 一…
阅读更多...
Java基础 集合（五）Set详解

Java基础 集合（五）Set详解

目录 简介 set种类 AbstractSet 抽象类 SortedSet 接口 HashSet LinkedHashSet TreeSet 前言-与正文无关 生活远不止眼前的苦劳与奔波&#xff0c;它还充满了无数值得我们去体验和珍惜的美好事物。在这个快节奏的世界中&#xff0c;我们往往容易陷入工作的漩涡&#xff…
阅读更多...
缓存框架jetcache

缓存框架jetcache

在实际应用中&#xff0c;并不是单一的使用本地缓存或者redis&#xff0c;更多是组合使用来满足不同的业务场景。 jetcache组件实现了优雅的组合本地缓存和远程缓存。 支持多种缓存类型&#xff1a;本地缓存、分布式缓存、多级缓存。 官网地址&#xff1a;https://github.com…
阅读更多...
[.NET] 查询当前已安装所有 Win32 与 UWP 应用

[.NET] 查询当前已安装所有 Win32 与 UWP 应用

为了获取当前设备用户已安装的所有应用程序, 一般来讲有两种方案. 一种是通过查询 “shell:AppsFolder” 目录下所有项, 一种是从开始菜单中获取所有快捷方式, 然后加上查询所有已安装的 UWP 应用, 最后得到总列表. 如需代码参考, 请看 github.com/SlimeNull/WindowsAppsQuery …
阅读更多...
网工内推 | 港企、合资公司，厂商认证优先，五险一金

网工内推 | 港企、合资公司，厂商认证优先，五险一金

01 九龙仓&#xff08;长沙&#xff09;置业有限公司 招聘岗位&#xff1a;IT网络工程师 职责描述&#xff1a; 1.负责公司网络架构规划设计、设备选型、远程组网方案的规划和设计&#xff1b; 2.负责公司网络IP地址规划管理&#xff0c;根据业务需求和公司状况&#xff0c;对…
阅读更多...
PAT-Apat甲级题1004(python和c++实现)

PAT-Apat甲级题1004(python和c++实现)

PTA | 1004 Counting Leaves 1004 Counting Leaves 作者 CHEN, Yue 单位 浙江大学 A family hierarchy is usually presented by a pedigree tree. Your job is to count those family members who have no child. Input Specification: Each input file contains one te…
阅读更多...
2024美赛数学建模B题思路源码

2024美赛数学建模B题思路源码

赛题目的 赛题目的&#xff1a; 问题描述&#xff1a; 解题的关键&#xff1a; 问题一. 问题分析 要开发一个模型来预测潜水器随时间的位置&#xff0c;我们需要考虑以下几个关键因素&#xff1a; 海洋环境因素&#xff1a;当前和预测的洋流、海水密度&#xff08;可能会随…
阅读更多...
springboot 整合 AOP切面编程

springboot 整合 AOP切面编程

文章目录 什么是AOP切面编程AOP中重要概念切面连接点通知切入点 springboot的切面编程的步骤引入切面编程依赖开发附加操作(在springboot项目新建config配置) 什么是AOP切面编程 所谓AOP就是一种编程范例&#xff0c;我们一般做一个项目&#xff0c;会分为很多个模块&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023