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=>{

})

同步代码和异步代码

  • 同步代码：按照顺序逐行执行，原地等待结果后继续执行
  • 异步代码：调用后耗时，不阻塞代码继续执行，在将来完成后触发一个回调函数
相关推荐
长风清留扬2 小时前
我的创作纪念日
经验分享·学习·程序人生·生活·交友
Allen_LVyingbo2 小时前
Python 青铜宝剑十六维，破医疗数智化难关（上）
开发语言·笔记·python·健康医疗·集成学习
zhxueverme2 小时前
JAVA学习笔记_Redis进阶
java·笔记·学习
IT古董4 小时前
【机器学习】机器学习的基本分类-半监督学习-Ladder Networks
学习·机器学习·分类·半监督学习
胡西风_foxww7 小时前
【ES6复习笔记】ES6的模块化（18）
javascript·笔记·es6·module·模块化·import·export
霜雪殇璃8 小时前
2024.12.30（多点通信）
开发语言·学习
梨子串桃子_9 小时前
数据挖掘笔记 | 插值 | 拉格朗日插值 | 龙格现象 | 埃尔米特插值 | 分段三次埃尔米特插值
笔记·python·数学建模·数据挖掘
小王爱吃月亮糖9 小时前
QT-【常用容器类】-QList类& QLinkedList类
开发语言·windows·笔记·qt
四夕白告木贞9 小时前
stm32week1+2
stm32·单片机·嵌入式硬件·学习
黄思博呀10 小时前
win版ffmpeg的安装和操作
学习
热门推荐
01新手学习VR全景需要知道的几个问题02docker安装启动问题解决排查03HCIA-datacom数通题库和录播视频资料04【一文读懂】NTN（非地面网络）技术介绍05ZZ038 物联网应用与服务赛题第J套06玄机平台应急响应—webshell查杀07分布式训练原理总结（DP、PP、TP 、ZeRO）08Gitlab ci/cd09优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间10github pages + jekyll个人网页