AJAX(一):初识AJAX、http协议、配置环境、发送AJAX请求、请求时的问题

news2024/11/13 9:56:06

一、什么是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.coloradmin.cn/o/1553422.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于Redis实现短信登录

1.7.3、整体访问流程 当注册完成后&#xff0c;用户去登录会去校验用户提交的手机号和验证码&#xff0c;是否一致&#xff0c;如果一致&#xff0c;则根据手机号查询用户信息&#xff0c;不存在则新建&#xff0c;最后将用户数据保存到redis&#xff0c;并且生成token作为red…

牛客小白月赛89(A,B,C,D,E,F)

比赛链接 官方视频讲解&#xff08;个人觉得讲的还是不错的&#xff09; 这把BC偏难&#xff0c;差点就不想做了&#xff0c;对小白杀伤力比较大。后面的题还算正常点。 A 伊甸之花 思路&#xff1a; 发现如果这个序列中最大值不为 k k k&#xff0c;我们可以把序列所有数…

Vivado Lab Edition

Vivado Lab Edition 是完整版 Vivado Design Suite 的独立安装版本 &#xff0c; 包含在生成比特流后对赛灵思 FPGA 进行编程和 调试所需的所有功能。通常适用于在如下实验室环境内进行编程和调试&#xff1a; 实验室环境中的机器所含磁盘空间、内存和连 接资源较少。Vivad…

B2902A是德科技B2902A精密型电源

181/2461/8938产品概述&#xff1a; Agilent B2902A 精密源/测量单元 (SMU) 是一款 2 通道、紧凑且经济高效的台式 SMU&#xff0c;能够源和测量电压和电流。它用途广泛&#xff0c;可以轻松、高精度地执行 I/V&#xff08;电流与电压&#xff09;测量。4 象限源和测量功能的集…

Android room 在dao中不能使用挂起suspend 否则会报错

错误&#xff1a; Type of the parameter must be a class annotated with Entity or a collection/array of it. kotlin.coroutines.Continuation<? super kotlin.Unit> $completion); 首先大家检查一下几个点 一、kotlin-kapt 二、 是否引入了 room-ktx 我是2024年…

JAVA的NIO和BIO底层原理分析

文章目录 一、操作系统底层IO原理1. 简介2. 操作系统进行IO的流程 二、BIO底层原理1. 什么是Socket2. JDK原生编程的BIO 三、Java原生编程的NIO1. 简介2. NIO和BIO的主要区别3. Reactor模式4. NIO的三大核心组件5. NIO核心源码分析 一、操作系统底层IO原理 1. 简介 IO&#x…

Untiy 布局控制器Aspect Ratio Fitter

Aspect Ratio Fitter是Unity中的一种布局控制器组件&#xff0c;用于根据指定的宽高比来调整包含它的UI元素的大小。实际开发中&#xff0c;它可以确保UI元素保持特定的宽高比&#xff0c;无论UI元素的内容或父容器的大小如何变化。 如图为Aspect Ratio Fitter组件的基本属性&…

驾照自助机体检色盲检测第六版

相关文章&#xff1a; 驾驶证自助机换证流程 色弱如何识别色盲检测图 数字类 1-3张原图 题目&#xff1a;请根据图片&#xff0c;从左至右&#xff0c;填写出3位正确的数字 题目&#xff1a;请根据图片&#xff0c;从左至右&#xff0c;填写出2位正确的数字 题目&#…

|行业洞察·汽车|《新能源汽车行业发展及营销策略分析-35页》

报告的主要内容解读&#xff1a; 行业环境&#xff1a;报告指出&#xff0c;海外车企的电动化进程遇到阻碍&#xff0c;而中国新能源汽车市场持续增长&#xff0c;2023年销量占全球新能源汽车的63.5%&#xff0c;市占率达到31.6%。 市场政策&#xff1a;中国政府通过减免税收、…

机器学习优化算法(深度学习)

目录 预备知识 梯度 Hessian 矩阵&#xff08;海森矩阵&#xff0c;或者黑塞矩阵&#xff09; 拉格朗日中值定理 柯西中值定理 泰勒公式 黑塞矩阵&#xff08;Hessian矩阵&#xff09; Jacobi 矩阵 优化方法 梯度下降法&#xff08;Gradient Descent&#xff09; 随机…

腾讯云4核8G服务器多少钱?12M带宽646元15个月,买1年送3月

2024年腾讯云4核8G服务器租用优惠价格&#xff1a;轻量应用服务器4核8G12M带宽646元15个月&#xff0c;CVM云服务器S5实例优惠价格1437.24元买一年送3个月&#xff0c;腾讯云4核8G服务器活动页面 txybk.com/go/txy 活动链接打开如下图&#xff1a; 腾讯云4核8G服务器优惠价格 轻…

离线Linux/openEuler服务器指定本地yum仓库

1、前提准备一个预装坏境比较完整的linux镜像文件&#xff0c;本文服务器使用的是openEuler 官网&#xff1a;openEuler下载 | 欧拉系统ISO镜像 | openEuler社区官网 2、上传镜像文件至服务器 如果是集群服务器&#xff0c;上传其中一台服务器之后&#xff0c;使用scp指令将镜…

PowerBI加权计算权重

1.打开主页&#xff0c;点击快速度量值 2.计算里面 选择计算&#xff1a;每个类别的加权平均值 3.就是添加数据&#xff0c;基值&#xff08;就是你要计算的值&#xff09;粗细&#xff08;就是你要用那个值计算权重&#xff09;类别&#xff08;就是你是要乘以那个类别&#x…

黑群晖基于docker配置frp内网穿透

前言 我的黑群晖需要设置一下内网穿透来外地访问&#xff0c;虽然zerotier的p2p组网已经很不错了&#xff0c;但是这个毕竟有一定的局限性&#xff0c;比如我是ios的国区id就下载不了zerotier的app&#xff0c;组网不了 1.下载镜像 选择第一个镜像 2.映射文件 配置frpc.ini&a…

Flutter 拦截系统键盘,显示自定义键盘

一、这里记录下在开发过程中&#xff0c;下单的时候输入金额需要使用自定义的数字键盘 参考链接: https://juejin.cn/post/7166046328609308685 效果图 二、屏蔽系统键盘 怎样才能够在输入框获取焦点的时候&#xff0c;不让系统键盘弹出呢&#xff1f;同时又显示我们自定义的…

拉里·埃里森 (Larry Ellison) 概述了 Oracle 的生成式 AI 战略

翻译自&#xff1a;拉里埃里森 (Larry Ellison) 概述了 Oracle 的生成式 AI 战略 甲骨文董事长兼首席技术官拉里埃里森概述了该公司如何将生成式人工智能 (GenAI) 嵌入其庞大的云服务组合中&#xff0c;旨在帮助客户和整个社会解决最棘手的问题。 在 Oracle CloudWorld 的主题…

Collection集合 --java学习笔记

Collection Collection是单列集合的祖宗&#xff0c;它规定的方法&#xff08;功能&#xff09;是全部单列集合都会继承的 List系列集合&#xff1a;List系列集合&#xff1a;ArrayList、LinkedList --java学习笔记-CSDN博客 Set系列集合&#xff1a;Set系列集合&#xff1a;…

08_会话技术

文章目录 前置知识点会话技术Conversation客户端技术CookieCookie的格式Cookie的优缺点构造Cookie信息通过浏览器构造Cookie通过Postman构造Cookie通过服务器构造Cookie 获取Cookie信息Cookie中的信息PathDomainMaxAge 案例&#xff08;cookie相关&#xff09; 服务器技术Sessi…

MD5 计算 (加密辅助类, Win32, C++)

CCryptHelper.h #pragma once #include <string> #include <tchar.h> #include <windows.h>#ifdef _UNICODE using _tstring std::wstring; #else using _tstring std::string; #endif// 加密辅助类 // 客户端: Windows XP 及以上系统可用 // 服务器: Win…

VESTA模拟计算XRD标准卡片

先上Crystallography Open Database网站下载标准CIF卡片&#xff08;以PbI2为例&#xff09; 1.直接进网站搜元素就行 2.点CIF直接下载 3.打开VESTA&#xff0c;导入刚刚下载的CIF 4.导入成功就是这样的 5.按照我这个操作来计算 6.点Calculation 7.已经计算出来了&#xff…