Ajax的学习笔记（包括原生的ajax,jquery,axios,fetch）

已于 2023-01-16 01:59:31 修改
阅读量534 收藏 2
点赞数 3
分类专栏： node 常识 文章标签： ajax 学习 jquery
于 2023-01-16 01:59:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53394907/article/details/128699678
版权

一、什么是ajax

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

二、ajxa的创建使用

 const xhr=new XMLHttpRequest()//实例化
           xhr.open("POST","http://127.0.0.1:3101/server")//确定发请求的类型和url
           xhr.send("123")//响应体的内容
           xhr.onreadystatechange=function(){//响应之后的渲染
            if(xhr.readyState===4){
                if(xhr.status>=200&&xhr.status<300){
                    result.innerText=xhr.response
                }
            }
           }

事件绑定 处理服务器返回的结果
on 当…的时候
readystate是xhr的属性，表示状态，0初始化，1open,2send,3服务端返回部分结果,4服务端返回全部结果
change 改变

三、原生的ajax的实例

1、http报文的格式

//事件绑定 处理服务器返回的结果
            //on 当...的时候
            //readystate是xhr的属性，表示状态，0初始化，1open,2send,3服务端返回部分结果,4服务端返回全部结果
            //change 改变
            /*
             请求报文
             行 post url http/1.1
             头 host :baidu.com
             cookie :name=...
             user-agent :chrome 83

             空行

             体 username=admin&password=123
            */
            //响应报文
            /*
                行 http/1.1 200 ok

                头 Content-Type: text/html;charset=utf-8
                   Content-length:1024
                   Content-encoding：gzip

                空行

                体 <html>
                        <head>
                        </head>
                        <body>
                        </body>
                    </html>

            */

2、客户端的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>ajax</title>
    <style>
        #result{
            width: 150px;
            height: 110px;
            border: 1px yellow solid;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const Btn=document.getElementsByTagName("button")[0]
        const result=document.getElementById("result")
        Btn.onclick=function(){
            //创建对象
            const xhr=new XMLHttpRequest()
            //初始化
            xhr.open('GET',"http://127.0.0.1:3101/server")
            //发送
            xhr.send('123');                   
            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.innerText=xhr.response;
                }
               
            }
            }

        }
    </script>
</body>
</html>

服务器端js

引入express
const express=require("express")
const app=express()//实例化app
app.get("/server",(require,response)=>{//设置get响应的方法
    //允许跨域的
    response.setHeader("Access-Control-Allow-Origin","*")
    //运行自定义头属性
    response.setHeader("Access-Control-Allow-Headers","*")
    //发送响应的报文
    response.send("hello ajax的get")
})
app.all("/server",(require,response)=>{// 允许自定义头的，要用all。
    //允许跨域的
    response.setHeader("Access-Control-Allow-Origin","*")
    //允许自定义头的
    response.setHeader("Access-Control-Allow-Headers","*")
    //发送响应的报文
    response.send("hello ajax的post")
})
app.listen(3101,()=>{//设置端口号
    console.log("服务器已经启动")
})

app.all适配所有
浏览器刷新和输入网址响应默认是get请求
服务器肯能会启动失败，那是因为需要node_model文件终端输入 npm link list即可

运行截图：
在这里插入图片描述
用谷歌浏览器,dege看不到一些网络的数据

四、ajax的一些属性

服务器的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>
    <style>
        #result{
            width: 100px;
            height: 101px;
            border:1px sandybrown solid;
        }
    </style>
</head>
<body>
    <button id="btn1">点击请求ajax</button>
    <button id="btn2">手动取消ajax的</button>
    <button id="btn3">节流</button>
    <div id="result"></div>
    <script>
        let btn1=document.getElementById("btn1")
        let btn2=document.getElementById("btn2")
        let btn3=document.getElementById("btn3")
        let result1=document.getElementById("result")
        let isSending=false //是否正在发这个请求
        let xhr=null
        btn1.addEventListener("click",function(){
           xhr=new XMLHttpRequest()
           xhr.timeout=2000//设置超过2秒后取消此次请求
           xhr.ontimeout=function(){
            alert("请求超时,稍后再试下")
           }
           xhr.onerror=function(){//设置网络错误的提示
            alert("网络不正常")
           }
            xhr.open("POST","http://127.0.0.1:3101/timer")
            xhr.send()
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status>=200&&xhr.status<300){
                        result1.innerText=xhr.response
                    }
                }
            }
        })
        btn2.addEventListener("click",function(){
            xhr.abort()//取消ajax的请求
        })
        btn3.addEventListener("click",function(){
            if(isSending==false){
                xhr=new XMLHttpRequest()
            isSending=true;
            xhr.open("POST","HTTP://127.0.0.1:3101/timer")
            xhr.send()
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    isSending=false
                }
            }
            }
        })
    </script>
</body>
</html>

服务器的js

const express=require("express")
const app= express()
app.post("/timer",(require,response)=>{ 
    response.setHeader("Access-Control-Allow-Origin","*")
    setTimeout(() => {
        response.send("超时测试")
    }, 3000);

})
app.get("/timer",(require,response)=>{ 
    response.setHeader("Access-Control-Allow-Origin","*")
    
    setTimeout(() => {
    let data={name:"hwk"}
    data=JSON.stringify(data)
    response.send(data)
    }, 3000);

})
app.all("/timer",(require,response)=>{ 
    response.setHeader("Access-Control-Allow-Origin","*")
     //运行自定义头属性
     response.setHeader("Access-Control-Allow-Headers","*")


    setTimeout(() => {
        response.send("超时测试")
    }, 3000);

})
app.listen(3101,()=>{
    console.log("3101服务器启动成功")
})

运行截图：
在这里插入图片描述
可以设置断网来检测网络异常
在这里插入图片描述
选offline
在这里插入图片描述
防止发送重复的请求，减小服务器的压力（节流）
在这里插入图片描述

四、用jquery发送ajax（了解即可）

客户端（bootstarp）
记得引入jquery和bootstarp

<!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">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <h2 class="page-heade">jquery发送ajax请求1</h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用形的方法</button>
    </div>
    <script>
         $("button").eq(0).click(function(){
            $.get("http://127.0.0.1:3101/timer",{a:100},function(data){
                console.log(data)
            },"json")//加json这个可以将服务器发来的json数据直接变成对象
        })
        $("button").eq(1).click(function(){
            $.post("http://127.0.0.1:3101/timer",{a:100},function(data){
                console.log(data)
            })
        })
        $("button").eq(2).click(function(){
            $.ajax({url:"http://127.0.0.1:3101/timer",
            data:{a:100},
            type:"GET",
            dataType:"json",
            success:function(data){
                console.log(data)
            }}
            )
        })
    </script>
</body>
</html>

服务端：

const express=require("express")
const app= express()
app.post("/timer",(require,response)=>{ 
    response.setHeader("Access-Control-Allow-Origin","*")
    setTimeout(() => {
        response.send("超时测试")
    }, 3000);

})
app.get("/timer",(require,response)=>{ 
    response.setHeader("Access-Control-Allow-Origin","*")
    
    setTimeout(() => {
    let data={name:"hwk"}
    data=JSON.stringify(data)
    response.send(data)
    }, 3000);

})
app.all("/timer",(require,response)=>{ 
    response.setHeader("Access-Control-Allow-Origin","*")
     //运行自定义头属性
     response.setHeader("Access-Control-Allow-Headers","*")


    setTimeout(() => {
        response.send("超时测试")
    }, 3000);

})
app.listen(3101,()=>{
    console.log("3101服务器启动成功")
})

运行截图：
相继按下这几个按钮
在这里插入图片描述

五、axios的写法

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。vue里面用到也是axios。
客户端的三个按钮分别对应axios的3种请求方式axios.get,axios.post,axios
因为服务端用的是command.js,为了避免影响故这里的axios是用的link(cdn)

客户端：

<!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">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>axios</title>
</head>
<body>
    <button id="b1">GET</button>
    <button id="b2">POST</button>
    <BUtton id="b3">ajax</BUtton>
</body>
<script>
    const b1=document.getElementById("b1")
    const b2=document.getElementById("b2")
    const b3=document.getElementById("b3")
    axios.defaults.baseURL="http://127.0.0.1:3101"
    b1.onclick=function(){
        axios.get("/timer",{
            //url参数
            params:{
                id:1
            },
            //头信息
            headers:{
                name:"123",
                age:"801"
            }//axios返回的是promise的对象
        }).then(value=>{
            console.log(value)
        })
    }
    b2.onclick=function(){
        axios.post("/timer",{//第一个参数为url，第二个为请求体的数据，第三个为其他配置，如果只有两个参数，第二个为请求体
                name:"hwk",
                pwd:123
            },{
            //url参数
            params:{
                id:2
            },
            //头信息
            headers:{
                name:"123",
                age:"801"
            },
           
        }).then(value=>{
            console.log(value)
        })
    }
    b3.onclick=function(){
        axios({
            url:"/timer",
            params:{
                id:"3"
            },
            headers:{
                a:1,
            },
            data:{
                name:"hwk",
                pwd:123
            },
            method:"POST"
        }).then((response)=>{
            console.log(response)
        })
    }
</script>
</html>

注意axios()函数如果是一个形参，那个形参就是配置；
两个形参，写法第一个参数是url，第二个是其他配置；
三个形参的话，就是第一个是url,的、第二个是请求体，第三个是其他配置。（params,headers
服务器端和上面的是一模一样的。
运行截图：
发get
在这里插入图片描述

发post
在这里插入图片描述
发axios方法的"POST"
在这里插入图片描述

六、fetch的普通使用

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
这种功能以前是使用 XMLHttpRequest 实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如 Service Workers。Fetch 还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念，例如 CORS 和 HTTP 的扩展。
客户端

<!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>ajax的fetch</title>
</head>
<body>
    <button id="btn1">ajax请求</button>
</body>
<script>
    const btn=document.getElementById("btn1")
    btn.onclick=function(){
        fetch("http://127.0.0.1:3101/timer?A=10",{
            method:"POST",
            headers:{
                a:1,
                b:1
            },
            body:JSON.stringify({
                a:1
            })
        }).then(response=>{
           return response.text()
        }).then(response=>{
            console.log(response)
        })
    }
</script>
</html>

非常类似于axios接收请求体变成了body，然后不能传对象，然后是params只能在路径后面用query的形式
运行截图：
在这里插入图片描述

七、温故才能知新

学徒在修行
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【AJAX 学习笔记】多种方式发送AJAX请求（原生AJAX、jQuery、axios、fetch）
w的博客
08-14 1623
Ajax 学习笔记 1 AJAX相关概述 1.1 AJAX简介 AJAX 全称为Asynchronous JavaScript And XML ，就是异步的 JS 和 XML 。 通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 1.2 XML简介 XML 可扩展标记语言。 XML 被设计用来传输和存储数据。（而HTML是用来呈现数据）。 XML 和 HTML 类似，不同的
ajax尚硅谷笔记——跨域请求、axios发送ajax请求、jquery发送ajax请求
weixin_53317758的博客
11-21 2029
script标签作为函数被服务调用，其中加上该函数的参数作为用户需要看到的数据内容
AJAX学习笔记（原生AJAX；jQuery；axios；fetch；跨域；JSONP；CORS）
赖念安的博客
08-21 587
尚硅谷AJAX学习笔记 参考课程： 参考：【尚硅谷】3小时Ajax入门到精通_哔哩哔哩_bilibili 一、前期准备 1、什么是Ajax 参考：Ajax - Web 开发者指南 | MDN 根据MDN文档的描述，大致可以这样描述AJAX： Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或
Ajax学习笔记（二）：jQuery 中的 AJAX、axios发送AJAX请求、AJAX-jQuery通用方法发送AJAX请求、fetch发送AJAX请求、同源策略、JSONP、CORS
weixin_62764364的博客
04-09 944
type:设置返回内容格式，xml, html, script, json, text, _default。实现用户校验，服务端响应体是一个函数，先声明handle函数，然后创建script标签，利用src属性请求数据。type:设置返回内容格式，xml, html, script, json, text, _default。AJAX默认遵循同源策略。这是一个跨原的一个请求的设置，匿名的意思，加上这个请求时将不会写在当前域名的。案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持。
【Ajax】(二）JQuery发送Ajax请求、Axios发送Ajax请求、fetch发送Ajax请求、跨域、jsonp、CORS
matmacchiato的博客
01-14 337
在CORS中你要发请求，你就按照ajax那一套去做就行了，至于跨域的问题，就交给服务端设置响应头就可以实现跨域。这个请求方法厉害之处在于他不用像jquery和axios那样需要引入第三方库，而是可以直接使用。声明handle函数，创建script标签，利用src属性请求数据。做一个案例，点击按钮，向8000端口发出请求，返回结果在div呈现。// 向服务器端发送请求，检测用户名是否存在。// 修改 p 标签的提示文本。//1. 创建script标签。//2. 设置标签的src属性。
AJAX学习笔记：什么是AJAX、http协议、AJAX请求发送方法（jQuery，Axios，fetch）、跨域、CORS
qq_48376006的博客
09-16 155
几种发送AJAX的方法，跨域问题，CORS等。
前端请求发展史Ajax、jQuery Ajax、fetch、axios(使用+对比+避坑指南)
苏纯的博客
06-03 1217
大神请直接划走，如果你对请求模棱两可、或者知道有哪些请求库，但是呢只熟练其中的一两种，并不全会。来，这篇文章就非常适合你。
AJAX与axios与fetch学习笔记
qq_45707021的博客
07-11 38
Fetch 被称之为下一代 Ajax 技术，内部采用 Promise 方式处理数据API 语法简洁明了，比 XMLHttpRequest 更简单易用采用模块化设计，API 分散多个对象中（如：Response对象、Request对象、Header对象）通过数据流（Stream对象）处理数据，可以分块读取，有利于提高网站性能，对于大文件或者网速慢的场景极为有用兼容性不兼容 IE。
react 使用ajax axios,react中使用Ajax请求（axios，Fetch）
weixin_42515841的博客
08-06 1212
React本身只关注于界面, 并不包含发送ajax请求的代码，前端应用需要通过ajax请求与后台进行交互(json数据)，可以使用集成第三方ajax库(或自己封装)常用的ajax请求库jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻量级, 建议使用，封装XmlHttpRequest对象的ajax，promise风格，可以用在浏览器端和node服务器端fetch: 原生函数, 但...
ajax、axios、fetch区别
01-03
ajax、axios、fetch区别 ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} }); 优缺点： 本身是针对MVC的编程,不符合现在前端MVVM的...
对异步请求xhr、ajax、axios、fetch的区别比较
01-08
1. XMLHttpRequest对象 在浏览器中，最开始与服务器交换数据的方式则是通过XMLHttpRequest对象。...】 优点： 1.不重新加载页面的情况下更新网页 2.在页面已加载后从服务器请求/接收数据 3.在后台向服务器发送数据。...
前端与后端连接，Ajax，axios，jquery等练习
07-18
前端与后端连接，Ajax，axios，jquery等练习标准案例
VUE学习笔记(五) 引入axios
01-07
VUE学习笔记(五) 引入axios Axios 是一个基于 promise 的 HTTP 库 VUE前端与服务端进行数据交互, 通常使用 axios 安装axios npm install --save vue-axios 安装成功 引入axios 在main.js中加入 import axios from ...
Ajax+nodemon+axios等初步了解
04-17
Ajax+nodemon+axios等初步了解, 配合文章 https://blog.csdn.net/m0_51197424/article/details/124230320
ajax和web前端：深入解析其重要性、应用、挑战与未来趋势
最新发布
ghfgdng_nhsy的博客
05-31 365
ajax，即异步JavaScript和XML，是一种在无需重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。它们不仅提升了用户体验和系统性能，还推动了web应用的发展和创新。未来，随着技术的不断进步和应用场景的拓展，ajax和web前端技术将继续发挥更大的作用，为我们的生活带来更多便利和惊喜。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析ajax和web前端技术的内涵、应用、挑战以及未来发展趋势。随着5G、物联网和人工智能等技术的普及和应用，web前端将承担更加复杂和多样化的任务。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1196
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
学习整理 docker
wonder_dog的博客
05-31 216
nexus。
oracle中的INTERVAL函数学习总结
weixin_42821740的博客
05-30 455
简单学懂interval函数
原生ajax、axios、fetch的区别
05-13
原生ajax是一种在浏览器中使用JavaScript发送异步HTTP请求的技术。它可以通过XMLHttpRequest对象来实现。它的优点是可以直接操作HTTP请求和响应，缺点是使用起来复杂，需要手动处理很多细节。 axios是一个基于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学徒在修行

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值