AJAX（一）：初识AJAX、http协议、配置环境、发送AJAX请求、请求时的问题

一、什么是AJAX

1.AJAX

就是异步的JS和XML。通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

2.XML

可扩展标记语言。XML被设计用来传输和存储数据。XML和HTML类似，不同的是HTML是用来呈现数据的，而且HTML中都是预定义标签（已经定义好的），而XML中没有预定义标签，全部都是自定义标签，用来表示一些数据。（目前已经被JSON取代）

3.AJAX的优缺点

优点：
（1）可以无需刷新页面而与服务器端进行通信。
（2）允许你根据用户事件（鼠标、键盘事件等等）来更新部分页面内容。
缺点：
（1）没有浏览历史，不能回退。
（2）存在跨域问题（不同网站中请求不到）
（3）SEO不友好（查看源代码中无法查找到）

二、HTTP协议

HTTP全称为hypertext transport protocol 协议【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

1.请求报文

2.响应报文

发过来的响应体里面有html，然后接收方再去解析然后显示在页面上

三、AJAX案例准备工作

1.配置环境

终端中输入npm i express

2.创建一个服务端

sudo node express.js

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

网页输入链接http://127.0.0.1:8080/

网页中出现 hello express

四、发送AJAX请求

1.发送GET请求

我们现在想要实现点击按钮发送请求将数据显示到div盒子中

客户端发送请求时，如果url是server，就会执行回调函数（箭头函数），并且由response来作出响应

 <button>点击发送请求</button><div id="result"></div>
<script>const btn=document.querySelector('button')const result=document.querySelector('#result')btn.onclick=function(){//创建对象const xhr=new XMLHttpRequest();//初始化，设置请求方法和url;//第一个参数：什么类型的请求，第二个参数给谁发xhr.open('GET','http://127.0.0.1:8080/server')//发送xhr.send();//事件绑定，处理服务端返回的结果//on在什么什么的时候，readystate是xhr对象的属性它的值有：//0-未初始化 1-open调用完毕 2-send调用完毕 3-服务端返回了部分结果 4-服务端返回了所有结果//改变的时候触发，所以会触发四次xhr.onreadystatechange=function(){//判断（服务器返回全部数据if(xhr.readyState==4){//判断响应状态码 200 404 403 401 500//响应状态中2开头都是表示成功if(xhr.status>=200&&xhr.status<300){//处理结果 行 头 空行 体//响应行console.log(xhr.status)//状态码console.log(xhr.statusText)//状态字符串console.log(xhr.getAllResponseHeaders())//所有响应头console.log(xhr.response)//响应体//设置result文本result.innerHTML=xhr.response}}}}</script>

服务端只修改了/server：

//引入express
const express = require('express');//创建应用对象
const app = express();//创建路由规则
//request是请求报文的封装
//response是响应报文的封装
app.get('/server', (request, response) => {//设置响应头，名为Access-Control-Allow-Origin//*设置允许跨域response.setHeader('Access-Control-Allow-Origin','*')response.send('hello AJAX')
});app.listen(8080, () => {console.log('服务已经启动，8080端口监听中')
})
设置url参数：用？隔开，=赋值，&分隔
例如：http://127.0.0.1:8000/server?a=1&b=2&c=3

2.发送POST请求

鼠标经过div发送AJAX请求，然后拿回来响应体放在div中

post和get区别就是get从服务器获取数据，post向服务器传送数据

post可以设置参数（在xhr.send();中）

设置请求头信息用来校验用户身份

<body><div id="result"></div><script>const result=document.querySelector('#result')//绑定事件result.addEventListener("mouseover",function(){const xhr=new XMLHttpRequest();xhr.open('POST','http://127.0.0.1:8080/server')// 设置请求头,接收两个参数：头的名字和头的值xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')//上面这句用来设置请求体内容的类型，后面参数是固定写法xhr.send('a=100&b=200&c=300');xhr.onreadystatechange=function(){//判断（服务器返回全部数据if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300){console.log(xhr.status)//状态码console.log(xhr.statusText)//状态字符串console.log(xhr.getAllResponseHeaders())//所有响应头console.log(xhr.response)//响应体//设置result文本result.innerHTML=xhr.response}}}})</script>
</body>
app.post('/server', (request, response) => {//设置响应头，名为Access-Control-Allow-Origin//*设置允许跨域response.setHeader('Access-Control-Allow-Origin','*')response.send('hello AJAX post')
});

鼠标经过就显示数据

3.JSON响应

响应一个数据，通过stringify(data)转化为JSON字符串发送过去

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

页面拿到JSON字符串响应体的时候识别不了，需要转换为js对象

（1）手动把JSON字符串转换为js对象

JSON.parse(xhr.response)

if(xhr.status>=200&&xhr.status<300){//对数据的手动转换let data=JSON.parse(xhr.response)console.log(data)result.innerHTML=data.name
（2）自动把JSON字符串转换为js对象

xhr.responseType = 'json';

 //设置响应体数据的类型xhr.responseType='json'
、、、
if(xhr.status>=200&&xhr.status<300){//自动转换console.log(xhr.response)result.innerHTML=xhr.response.name}

五、AJAX请求的几个问题

以前在server写代码就得重新启动终端，安装 npm install -g nodemon就可以自动刷新了

1.IE缓存问题

ie浏览器会对ajax请求的结果做缓存，所以下一次请求时它走的是本地的缓存而不是服务器返回的最新数据

 xhr.open('GET','http://127.0.0.1:8000/ie?t='+Date.now())

在请求的url这里加上时间戳，这样ie就认为你每次请求的都不一样就去给你拿最新的

2.AJAX请求超时与网络异常处理

在请求超时和网络异常的时候给用户来一个友好的提醒，服务端写个定时器，3秒后发送响应体

app.get('/delay', (request, response) => {//设置响应头，名为Access-Control-Allow-Origin//*设置允许跨域response.setHeader('Access-Control-Allow-Origin','*')setTimeout(()=>{response.send('hello ie-2')},3000)});
//2s还没收到响应体就取消请求xhr.timeout=2000//超时回调xhr.ontimeout=function(){alert('网络异常')}//网络异常回调xhr.onerror=function(){alert('你的网络似乎出了点问题')}

设置超时xhr.timeout， 超时回调xhr.ontimeout，还有网络异常回调xhr.onerror

3.AJAX手动取消请求

在请求的结果还没回来之前手动取消 abort方法

<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()//这里的x是这个函数的局部变量我还想在下面用就得去声明}btns[1].onclick=function(){x.abort();}</script>

本来x在第一个函数用const声明，但是下面还想用就不能再用const了，全局一个let x

4.AJAX请求重复发送问题

如果用户一直点击一个按钮，就是在重复请求，那么我们就把前面重复请求的停掉

定义一个isSending变量来判断是否在发送状态

 <button>点击发送</button><script>const btn=document.querySelector('button');let x=null;let isSending=false//是否正在发送AJAX请求btn.onclick=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;}}//这里的x是这个函数的局部变量我还想在下面用就得去声明}</script>

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

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

相关文章

爬虫逆向实战(38)-某空气质量平台(反调试，AES，DES，MD5)

爬虫逆向实战(38)-某空气质量平台(反调试，AES，DES，MD5)

一、数据接口分析 主页地址&#xff1a;某空气质量平台 1、抓包 (1) 反调试 该网站对鼠标右击以及F12进行了监听并拦截 虽然该网站无法打开Chrome控制台&#xff0c;导致我们无法抓包&#xff0c;但是道高一尺魔高一丈。既然我们无法在打开该网站的时候打开Chrome控制台&…
阅读更多...
在Windows上交叉编译STM32(环境搭建)

在Windows上交叉编译STM32(环境搭建)

在Windows上交叉编译STM32 Keil 虽然好用&#xff0c;但是是收费的&#xff0c;不想破解怎么办~ 使用交叉编译工具&#xff01; 交叉编译工具下载 官方交叉编译工具下载连接 下载解压好后将 bin 目录写入 PATH&#xff0c; 使用命令行检测是否安装成功。 Windows 安装 make …
阅读更多...
RN在android/ios手机剪切图片的操作

RN在android/ios手机剪切图片的操作

之前写过一个React Native调用摄像头画面及拍照和保存图片到相册全流程但是这个仅限于调用摄像头拍照并保存图片,今天再写一个版本的操作,这个博客目前实现的有三点操作: 调用摄像头拍照对照片进行剪切从相册选取图片 功能上面来说有两点: 点击按钮可以对摄像头进行拍照,拍完照…
阅读更多...
Etcd 基本入门

Etcd 基本入门

1&#xff1a;什么是 Etcd ? Etcd 是 CoreOS 团队于2013年6月发起的开源项目&#xff0c;它的目标是构建一个高可用的分布式键值(key-value)数据库。etcd内部采用raft协议作为一致性算法&#xff0c;Etcd基于 Go 语言实现。 名字由来&#xff0c;它源于两个方面&#xff0c;…
阅读更多...
#include＜初见c语言之指针总结＞

#include＜初见c语言之指针总结＞

第一小节&#xff1a; #include&#xff1c;初见C语言之指针&#xff08;1&#xff09;&#xff1e;-CSDN博客 #add&#xff1c;初见C语言之指针&#xff08;1&#xff09;&#xff1e;-CSDN博客 第二小节&#xff1a; #include&#xff1c;初见c语言之指针…
阅读更多...
redis集群配置（精华版）：哨兵模式

redis集群配置（精华版）：哨兵模式

哨兵模式 概念单机单个哨兵多哨兵模式 动手实操1、环境准备2、配置sentinel.conf配置文件3、启动哨兵&测试4、SpringBoot测试哨兵模式故障转移功能 概念 主从切换技术的方法是&#xff1a;当主服务器宕机后&#xff0c;需要手动把一台从服务器切换为主服务器&#xff0c;这…
阅读更多...
苹果Find My产品需求增长迅速，伦茨科技ST17H6x芯片供货充足

苹果Find My产品需求增长迅速，伦茨科技ST17H6x芯片供货充足

苹果的Find My功能使得用户可以轻松查找iPhone、Mac、AirPods以及Apple Watch等设备。如今Find My还进入了耳机、充电宝、箱包、电动车、保温杯等多个行业。苹果发布AirTag发布以来&#xff0c;大家都更加注重物品的防丢&#xff0c;苹果的 Find My 就可以查找 iPhone、Mac、Ai…
阅读更多...
04-JavaScript函数

04-JavaScript函数

函数&#xff08;重点&#xff09; 1.为什么使用函数? 用函数来解决代码重用的问题。 2.函数的意义 函数其实就是封装&#xff0c;把可以重复使用的代码放到函数中&#xff0c;如果需要多次使用同一段代码&#xff0c;就可以把封装成一个函数。这样的话&#xff0c;在你需…
阅读更多...
大数据-hive，初步了解

大数据-hive，初步了解

1. Hive是什么 Hive是基于Hadoop的数据仓库解决方案。由于Hadoop本身在数据存储和计算方面有很好的可扩展性和高容错性&#xff0c;因此使用Hive构建的数据仓库也秉承了这些特性。 简单来说&#xff0c;Hive就是在Hadoop上架了一层SQL接口&#xff0c;可以将SQL翻译成MapRedu…
阅读更多...
docker环境配置过程中的常见问题

docker环境配置过程中的常见问题

1、pull镜像问题 docker pull jenkins/jenkins:lts Using default tag: latest Trying to pull repository docker.io/library/centos ... Get https://registry-1.docker.io/v2/library/centos/manifests/latest: Get https://auth.docker.io/token?scoperepository%3Alibr…
阅读更多...
keil调试仿真退出卡死现象解决办法

keil调试仿真退出卡死现象解决办法

更新到keil5版本V5.20之后&#xff0c;目前一直到V5.29版本&#xff0c;都存在一个问题&#xff1a; 退出调试模式时&#xff0c;有可能会卡死&#xff01; 此时需要在任务管理器中结束掉进程才能强制关闭keil工程。 网上查找了很多资料&#xff0c;一种是退出仿真时不能有断…
阅读更多...
Python：执行py命令，提示： Can‘t find a default Python.

Python：执行py命令，提示： Can‘t find a default Python.

1.Python运行环境罢工 今天&#xff0c;要运行一个前年用python编写的爬虫程序&#xff0c;先检测python运行环境是否正常&#xff1a; D:\Python38-32\works>c:\windows\py.exe Cant find a default Python. 再试&#xff1a; D:\Python38-32\works>py --list Installe…
阅读更多...
Vue3 + Vite + TS + Element-Plus + Pinia项目(5)对axios进行封装

Vue3 + Vite + TS + Element-Plus + Pinia项目(5)对axios进行封装

1、在src文件夹下新建config文件夹后&#xff0c;新建baseURL.ts文件&#xff0c;用来配置http主链接 2、在src文件夹下新建http文件夹后&#xff0c;新建request.ts文件&#xff0c;内容如下 import axios from "axios" import { ElMessage } from element-plus im…
阅读更多...
【Node.JS】koa

【Node.JS】koa

文章目录 概述koa和express对比koa下载安装使用1.创建koa项目文件目录2. 创建koa服务3. 添加路由 koa-router4. 数据库服务 mongodb5. 添加请求参数json处理 koa-bodyparser6. 用户接口举例7.引入koa一些常用插件8.用户登录验证 koa-jwt9.webpack生产打包 来源 概述 Koa 是一个…
阅读更多...
OpenAI发布Voice Engine模型！用AI合成你的声音！

OpenAI发布Voice Engine模型！用AI合成你的声音！

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…
阅读更多...
6_相机坐标系_相机4个坐标系详述

6_相机坐标系_相机4个坐标系详述

相机系列文章是用来记录使用opencv3来完成单目相机和6轴机械臂手眼标定。本人吃饭的主职是linux下6轴机械臂相关应用开发。但对于机械臂运动学、相机应用等都非常感兴趣&#xff0c;所以对一些线性代数基础薄弱又想深入了解机械臂内部运算的同志比较有体会。由于是探索性学习&a…
阅读更多...
快速上手Spring Cloud 九：服务间通信与消息队列

快速上手Spring Cloud 九：服务间通信与消息队列

快速上手Spring Cloud 一&#xff1a;Spring Cloud 简介 快速上手Spring Cloud 二&#xff1a;核心组件解析 快速上手Spring Cloud 三&#xff1a;API网关深入探索与实战应用 快速上手Spring Cloud 四&#xff1a;微服务治理与安全 快速上手Spring Cloud 五&#xff1a;Spring …
阅读更多...
新数字时代的启示：揭开Web3的秘密之路

新数字时代的启示：揭开Web3的秘密之路

在当今数字时代&#xff0c;随着区块链技术的不断发展&#xff0c;Web3作为下一代互联网的概念正逐渐引起人们的关注和探索。本文将深入探讨新数字时代的启示&#xff0c;揭开Web3的神秘之路&#xff0c;并探讨其在未来的发展前景。 1. Web3的定义与特点 Web3是对互联网未来发…
阅读更多...
Discourse 最多允许有几个分类级别

Discourse 最多允许有几个分类级别

和 DISCUZ 不同&#xff0c;DISCUZ 可以允许分类下面还有分类&#xff0c;再继续分类这种嵌套式分类。 Discourse 最多只允许有 2 个分类。 如果你在已有的分类下再继续分类的话&#xff0c;系统会提示错误&#xff1a; 意思就是子分类不能再分子分类。 Discourse 尽量采取了…
阅读更多...
【linux课设】自主实现shell命令行解释器

【linux课设】自主实现shell命令行解释器

shell和bash的关系 shell是命令解释器&#xff0c;它接收用户的命令并将其传递给内核去执行。bash,即GNU Bourne-Again Shell&#xff0c;是shell的一种实现方式&#xff0c;也是大多数linux系统下默认的shell。 bash的原理 大多数的指令进程&#xff08;除了内建命令&#…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023