AJAX学习笔记

Ying_172023-08-23 12:13

文章目录

定义

使用XMLHttpRequest对象与服务器通信。可以使用JSON、XML、HTML和Text文本等格式发送和接收数据。

axios使用

javascript 复制代码 
axios({
  url:"目标资源地址"
}).then((result)=>{
  // 对服务器返回的数据做处理
})
  • eg:在浏览器获取省份信息并展示到页面
javascript 复制代码 
<!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>
    <!--
        axios库地址: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
        身份数据地址：http://hmajax.itheima.net/api/province
        目标：使用axios库，获取省份列表数据，展示到页面
    -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">

    </script>
    <script>
        axios({
            url:"http://hmajax.itheima.net/api/province"
        }).then(result=>{
            data=result.data.list;
            for(let i = 0;i < data.length;i++){
                document.write(data[i] + "<br/>");
            }
        })
    </script>
</body>
</html>

URL

定义：

统一资源定位符，简称网址，用于访问网上资源。

组成：协议 + 域名 + 资源路径

协议：

规定浏览器与服务器之间传输数据的格式

域名：

标记服务器在互联网中的方位

资源路径:

标记资源在服务器下的具体位置

URL查询参数

定义

浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

语法

协议://域名/资源路径?参数名1=值1&参数名2=值2

axios提供的查询参数

eg:查询某个省份下的城市

javascript 复制代码 
<!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>
    <!--
        axios库地址: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
        身份数据地址：http://hmajax.itheima.net/api/province
        目标：使用axios库，获取省份列表数据，展示到页面
    -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">

    </script>
    <script>
        axios({
            url:"http://hmajax.itheima.net/api/city",
          //查询参数
            params:{
                pname:"山东省"
            }
        }).then(result=>{
            console.log(result)
            data=result.data.list;
            for(let i = 0;i < data.length;i++){
                document.write(data[i] + "<br/>");
            }
        })
    </script>
</body>
</html>

地区查询案例

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询城市</title>
    <style>
        .data-item{
            border: 1px solid black;
            width: 100px;
            height: 25px;
            font-size: 20px;
            font-style:italic;
            list-style:none;
        }
        div{
            font-size: 15px;
        }
    </style>
</head>
<body>
    
    <div>当前时间:
        <label class = "time"></label>
    </div>
    <div>省份名称：
        <input type="text" class="pro" value="">
        <button class="find">查询</button></div>
    <div>
    城市列表：
    </div>
    <ul  class="data">
        <li class="data-item"></li>
    </ul>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        let date = new Date();
            let time  = date.toLocaleTimeString()
            let la=document.querySelector(".time").innerHTML=time;
        setInterval(function(){
            let date = new Date();
            let time  = date.toLocaleTimeString()
            let la=document.querySelector(".time").innerHTML=time;
        },1000)

        let btn = document.querySelector(".find");
        btn.addEventListener("click",()=>{
            let pro = document.querySelector(".pro").value;
            console.log(pro);

            axios({
                url:"http://hmajax.itheima.net/api/city",
                params:{
                    pname:pro
                }
            }).then(result=>{
                let list = result.data.list;
                let data = list.map(areaName=>`<li class="data-item">${areaName}</li>`).join('')
                console.log(data)
                document.querySelector(".data").innerHTML=data
            })
        })
  
    </script>
</body>
</html>

常用请求方法

请求方法 操作
GET 获取数据
POST 提交数据
PUT 修改数据（全部）
DELETE 删除数据
PATCH 修改数据（部分）

axios请求配置

  • url：请求的网址
  • method：请求的方法
  • data：提交数据

语法

javascript 复制代码 
axios({
  url:'目标资源地址',
  method:'请求方法',
  data:{
    参数名：值
  }
}).then((result)=>{
  // 对请求数据进行处理
})

注册账号案例

javascript 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div>请输入用户名：<input type="text" class="userName"></div><br/>
    <div>请输入密码：<input type="password" class="password"></div><br/>
    <button class="register">注册</button>
    <script>
            let register = document.querySelector(".register");
        register.addEventListener("click",function(){
            let user = document.querySelector(".userName");
            let psw = document.querySelector(".password");

            axios({
                url:"http://hmajax.itheima.net/api/register",
                method:"post",
                data:{
                    username:user.value,
                    password:psw.value
                }
            }).then((result)=>{
                alert(result.data.message)
                console.log(result)
            }).catch(error=>{
                console.log()
                alert(error.response.data.message);
            })
        })


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


接口文档

接口文档：描述接口的文档

接口：使用AJAX和服务器通讯时，使用的URL，请求方法以及参数

AJAX原理-XMLHttpRequest

  • 定义：XMLHttpRequest对象用语与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定的URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。
  • 与axios的关系：axios内部采用XMLHttpRequest与服务器交互
  • 步骤
    • 创建XMLHttpRequest对象
    • 配置请求方法和请求url地址
    • 监听loadend事件，接收响应结果
    • 发起请求
  • 使用XMLHttpRequest
javascript 复制代码 
        const xhr = new XMLHttpRequest();
        xhr.open("请求方法","资源路径")
        // 监听事件
				xhr.addEventListener('loadend',()=>{
            console.log(xhr.response)
        }) 
    		// 发起请求
      	xhr.send()
  • 数据提交
    • 请求头设置：Contend-Type：application/json
    • 请求体携带json字符串
javascript 复制代码 
        const xhr = new XMLHttpRequest();
        xhr.open("请求方法","资源路径")
        // 监听事件
				xhr.addEventListener('loadend',()=>{
            console.log(xhr.response)
        }) 
      	//告诉服务器传递的内容类型
      	xhr.setRequestHeader('Content-Type','application/json')
      	//准备数据并转成json字符串
      	const data={};
      	const data1=JSON.stringify(data);
    		// 发起请求
      	xhr.send(data1)

promise

  • 作用：用于表示一个异步操作的最终完成（或失败）及其结果值。
  • 语法
javascript 复制代码 
 
        // 创建promise对象
        const p = new Promise((resolve,reject)=>{
            // 执行异步任务并传递结果
            setTimeout(()=>{
            // 成功调用：resolve(值)触发then()执行
              resolve('模拟AJAX请求-成功结果') 
            // 失败调用:reject(值)触发catch()执行
              reject(new Error("模拟AJAX请求-失败结果"))
            },2000)
        }) 
        // 接收结果
        p.then(result=>{
            // 成功
            console.log(result)
        }).catch(error=>{
            // 失败
            console.log(error)
        })
  • 三种状态
    • pending--待定
    • fufilled--已兑现，操作成功
    • rejected--操作失败，操作失败

async函数和await

  • async函数是使用async关键字声明的函数，async函数是AsyncFunction构造函数的实例，并且其中允许使用await关键字。async和await关键字让我们可以用一种更加简洁的方式写出基于promise的雨布行为。
  • 在async函数内，使用await关键字取代then函数，等待获取Promise对象成功状态的结果值。
  • 示例：
html 复制代码 
<!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>
        
    </style>
</head>
<body>
    <div>
        <div>省份</div>
        <div class="province"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        getDefaultArea()
        async function getDefaultArea(){
            // 捕获错误
            try{
                const Pobj=await axios({url:"http://hmajax.itheima.net/api/province"})
                const pname = Pobj.data.list[0]
        
                // 显示到页面上
                document.querySelector('.province').innerHTML = pname
            }catch(error){
                //接收错误信息
                console.dir(error)
            }
        }
  </script>
</body>
</html>

Promise.all静态方法

  • 语法
javascript 复制代码 
const p = Promise.all([Promise对象,Promise对象,...,Promise对象])
p.then(result=>{

}).catch(erroe=>{

})

同步代码和异步代码

  • 同步代码：按照顺序逐行执行，原地等待结果后继续执行
  • 异步代码：调用后耗时，不阻塞代码继续执行，在将来完成后触发一个回调函数
相关推荐
cyr___6 分钟前
Unity教程（十六）敌人攻击状态的实现
学习·游戏·unity·游戏引擎
Code哈哈笑6 分钟前
【C++ 学习】多态的基础和原理（10）
java·c++·学习
nbsaas-boot29 分钟前
架构卡牌游戏：通过互动与挑战学习系统设计的创新玩法
学习·游戏·架构
QuantumYou37 分钟前
计算机视觉 对比学习 串烧二
人工智能·学习·计算机视觉
拥抱AGI1 小时前
我说大模型微调没啥技术含量，谁赞成谁反对？
人工智能·学习·语言模型·大模型学习·大模型入门·大模型教程
+码农快讯+1 小时前
Git入门学习（1）
git·学习·elasticsearch
小米里的大麦1 小时前
【C++】深入理解引用：从基础到进阶详解
c++·经验分享·笔记·引用·引用和指针
MowenPan19951 小时前
高等数学 3.5 函数的极值与最大值最小值
笔记·学习·高等数学
晚睡早起₍˄·͈༝·͈˄*₎◞ ̑̑1 小时前
苍穹外卖学习笔记(七)
java·windows·笔记·学习·mybatis
百里与司空2 小时前
学习CubeIDE——定时器开发
stm32·单片机·嵌入式硬件·学习
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04苍穹外卖面试总结05yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07软件工程从理论到实践客观题汇总(头歌第一章至第八章)08Coze扣子平台完整体验和实践（附国内和国际版对比）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文1051-2 万字长文，深度解读端到端自动驾驶的挑战和前沿