ajax学习笔记

已于 2022-05-22 16:14:30 修改
阅读量128 收藏
点赞数
分类专栏： 学习笔记 文章标签： ajax javascript 学习
于 2022-05-12 19:27:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Stevetagelian/article/details/124737958
版权

Ajax

概念

一种使用js来异步获取xml格式数据的技术

请求方式

  1. 操作服务器上的数据除了需要使用url地址，还需要指定请求方式
  2. 操作服务器上的数据时
    1. 获取服务器上的数据，需要GET
    2. 新增数据，需要POST
    3. 删除数据，需要DELETE
    4. 完整修改（更新）数据，需要PUT
    5. 修改（更新）部分数据，需要PATCH

axios

说明

  • 是前端最火的，专注于数据请求的库

使用方式

  1. 引入axios

  2. 数据查询

    axios({
    method:'get',//请求类型
    url:'',//请求地址
    params:{//查询参数
        id:1
    },//查询id=1的数据
}).then((result)=>{
 console.log(result);
});

//简写形式1
axios.get(url,{params:{参数}}).then(result => {
    console.log(result)
})
//简写形式2----拼接url
axios.get(url).then(result => {
    console.log(result)
})

  3. 数据添加

    axios({
    method:'POST',//请求类型
    url:'',//请求地址
    data: {
        bookname: 'xx',
        author: 'xx',
        publisher: 'xx'
    }
}).then((result)=>{
    console.log(result);
});

//POST请求中，data还可以接收字符串格式类型
axios({
    method:'POST',//请求类型
    url:'',//请求地址
    data: 'bookname=xx&author=xx&publisher=xx'
}).then((result)=>{
    console.log(result);
});

//简写形式1
axios.post(url,{参数}).then(result => {
    console.log(result)
})
//简写形式2 -- 参数 = bookname=xx&author=xx&publisher=xx
axios.post(url,'参数').then(result => {
    console.log(result)
})

  4. 数据删除

    axios({
            method: "DELETE",
            url: "",//请求地址
            params: {
                //请求参数
            },
          }).then((result) => {
            console.log(result);
          });

  5. 数据修改

    axios({
            method: "patch",
            url: "",//请求地址
            data: {
                //请求参数
            },
          }).then((result) => {
            console.log(result);
          });

序列化

  • 是一个把对象或者数组转成字符串格式的过程 如JSON.stringfy()

反序列化

  • 是一个把字符串格式转成对象或者数组的过程 如 JSON.parse()

获取表单内input的值

  1. 普通方法

    //query 只能传入 form标签的选择器
function getForm(query){
    const inputs = document.querySelectorAll(query + ' input[name]');
    const obj = {};
    inputs.forEach(item => {
        obj[item.name] = item.value;
    });
    return obj;
}

  2. 使用JQ

    //$('表单元素的选择器').serialize()
const data = $('form').serialize()
console.log(data)// key1=value1&key2=value2

  3. 自己实现

    //formdata 碰到多选框时不适合使用 
const formDom = document.querySelector("form");
      const btnDom = document.querySelector("button");
      btnDom.addEventListener("click", () => {
        const formData = new FormData(formDom);
        //以url拼接参数返回
        const usp = new URLSearchParams(formData);
        console.log(usp.toString()); //username=XianCheng666&password=123513215
        //以对象的形式返回
        const obj = {};
        formData.forEach((value, key) => {
          obj[key] = value;
        });
        console.log(obj); //{username: 'q964813950', password: '543243'}
      });

上传图片

//<input type="file" accept="image/*"/>
//<img src=''/>

const input = document.querySelector('input');
const img = document.querySelector('img');
input.addEventListener('change',()=>{
    const file = input.files[0];//要上传的文件对象
    const src = URL.createObjectURL(file);//把浏览器内存中图片文件的地址获取出来
    img.src = src;
    
    const formdata = new FormData();//创建一个空formdata对象
    formdata.append('avatar',file);//接口要求，把文件追加到 formdata对象
    axios.post(url,formdata).then(result =>{
        console.log(result);
    });
});

拦截器

定义

是用来全局拦截axios的每一次请求与响应

使用

  1. 添加请求拦截器

    axios.interceptors.request.use(
    function (config) {
        //在发送请求前应该做什么
        return config
    },
    function (error) {
        //对请求错误做些什么
        return Promise.reject(error)
    }
)

  2. 添加响应拦截器

    axios.interceptors.response.use(
    function (response) {
        //在响应后应该做什么
        return response
    },
    function (error) {
        //对响应错误做些什么
        return Promise.reject(error)
    }
)

请求报文

定义

  • 规定了客户端以什么格式把数据发送给服务器
  • 请求报文由请求行，请求头，请求体组成
  • 请求行：请求方式 请求地址 协议类型
  • 请求头： 用来描述这次请求的基本信息
  • 请求体：要发送给服务器的数据

响应报文

定义

  • 规定了服务器以什么格式把数据响应给客户端
  • 由状态行，响应头部，响应体组成

http响应状态码

  • 2xx-----成功
  • 3xx----重定向
  • 4xx----客户端错误，即代码错误
  • 5xx----后端错误

axios的实现原理

基本写法

//1 创建xhr对象
const xhr = new XMLHttpRequest();
//2 调用open方法
xhr.open('请求类型','请求地址');
//3 发送出去
xhr.send();
//4 监听 数据响应事件
xhr.addEventListener('load',function(){
    console.log(this.response);
    //字符串转对象
    const obj = JSON.parse(this.response);
    console.log(obj);
});

原生携带参数的GET请求

const xhr = new XMLHttpRequest();
xhr.open('get','请求地址?请求参数1&请求参数2');//见注1
xhr.send();
xhr.addEventListener('load',function(){
    console.log(this.response);
    const obj = JSON.parse(this.response);
    console.log(obj);
});

//注1    请求参数n格式：key=value

原生携带参数的POST请求

const xhr = new XMLHttpRequest();
xhr.open('post','请求地址');
const data = {
        bookname: '1从入门到精通1',
        author: '我自己',
        publisher: '黑马出版社',
        appkey: 'wanshao1234',
      };
//把data转成 a=b&c=d   URLSearchParams
const usp = new URLSearchParams(data);
const query = usp.toString();
//设置对应的content-type
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//传递 a=b&c=d 
xhr.send(query);
xhr.addEventListener('load',function(){
    console.log(this.response);
    const obj = JSON.parse(this.response);
    console.log(obj);
});

原生-POST-携带参数JSON格式字符串

const xhr = new XMLHttpRequest();
xhr.open('post','请求地址');
const data = {
        bookname: '1从入门到精通1',
        author: '我自己',
        publisher: '黑马出版社',
        appkey: 'wanshao1234',
      };
//设置对应的content-type
xhr.setRequestHeader("Content-type","application/json");
const str =JSON.stringify(data);
xhr.send(str);
xhr.addEventListener('load',function(){
    console.log(this.response);
    const obj = JSON.parse(this.response);
    console.log(obj);
});

原生-POST-携带参数formdata

const input = document.querySelector('input');
      input.addEventListener('change', function () {
        const file = this.files[0];//获取要上传文的件对象
        const formdata = new FormData();
        //添加key value
        formdata.append('avatar', file);
        const xhr = new XMLHttpRequest();
        xhr.open('post', 'http://www.itcbc.com:3006/api/formdata');
        // 不用设置 content-type
        xhr.send(formdata);
        xhr.addEventListener('load', function () {
          console.log(this.response);
        });
      });

防抖和节流

防抖

  • 定义

    频繁触发某个操作是，只执行最后一次

  • 个人理解

    有一个异步操作fun(),他的执行过程是A->B->C,我的需求是点击十次，除非某一次执行了完整过程，那么只有最后一次点击执行该操作

  • 代码

    let id = null
btn.addEventlistenner('click',() => {
    clearTimeout(id);//清除之前的定时器
    id = setTimeout(()=>{
        //相关需求。。
    },500)
})

节流

  • 定义

    单位时间内，频繁触发同一个操作，只会触发一次(第一次)

  • 代码

    let flag = true //表示可以执行

btn.addEventlistenner('click',() => {
    if (!flag) return;
    flag = false;
   	//相关异步操作
    //如果执行成功则使flag = true
})
Stevetagelian
关注
专栏目录
Ajax学习笔记
2301_82244607的博客
04-28 1095
XMLHttpRequest()：创建 XHR 对象的构造函数status：响应状态码值，如 200、404statusText：响应状态文本，如 ’ok‘、‘not found’readyState：标识请求状态的只读属性 0-1-2-3-4onreadystatechange：绑定 readyState 改变的监听responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应response：响应体数据，类型取决于 responseType 的指定。
史上最详细Ajax学习笔记
楠黎倾风的博客
09-19 8083
史上最强Ajax学习笔记
AJAX学习笔记
weixin_44497507的博客
11-10 663
【代码】AJAX学习笔记。
黑马---ajax学习笔记
texry的博客
11-25 385
ajax
16ajax学习笔记1
08-08
在本篇16ajax学习笔记1中，我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求： Ajax的首要任务是创建XMLHttpRequest对象，这是浏览器提供的API。在JavaScript中，我们可以通过new ...
jquery中ajax学习笔记4
10-28
### jQuery中Ajax学习笔记4：缓存问题与中文问题详解 #### 缓存问题解析 在Web开发过程中，经常会遇到浏览器缓存导致的数据更新问题。本文档将详细讲解如何识别和解决缓存问题。 ##### 什么是缓存问题？ 缓存...
Ajax学习笔记个人总结
09-12
### Ajax学习笔记个人总结 #### 一、XMLHttpRequest对象简介 **XMLHttpRequest** 对象是 AJAX 技术的核心，它负责在客户端与服务器之间发送异步请求，无需刷新整个页面即可实现局部数据更新。要使用 ...
ajax嵌套ajax实现不刷新表单并向指定页面二次提交数据
2302_79553009的博客
10-13 258
利用jq定位表单位置后执行阻止表单提交代码。当获取到表单数据后进行向指定页面提交操作。提交成功后将表单置空且再次利用ajax提交该表单完成二次提交。
【JAVA开源】基于Vue和SpringBoot的高校学科竞赛平台
杨荧的CSDN博客
10-10 1470
教师功能有个人中心，题目类型管理，竞赛题库管理，竞赛类型管理，竞赛信息管理，报名信息管理，竞赛评分管理，参赛名单管理，晋级名单管理，获奖名单管理，竞赛总结管理，报销清单管理，成绩申诉管理，参赛信息管理，参赛信息管理，往年成绩管理，获奖情况管理。
使用 Redis 在 Spring Boot 中实现排行榜功能
fudaihb的博客
10-10 1594
在现代的应用程序中，排行榜功能广泛应用于游戏、社交网络、电商等领域，用于展示用户的排名情况。为了在大并发的环境下快速、高效地实现排行榜功能，Redis 提供了强大的数据结构 `Sorted Set`（有序集合），能够以 O(log N) 的时间复杂度进行元素插入和查询，非常适合排行榜这种场景。 本文将详细介绍如何在 Spring Boot 中使用 Redis 实现排行榜功能。我们将介绍 Redis 的 `Sorted Set` 数据结构，结合具体代码演示如何实现排行榜的增、删、查、改，并讨论排行榜的一些
npm 和 npx 的区别和使用场景
Dou_Hua6的博客
10-09 704
自动下载和缓存：如果本地未安装所需包，npx会自动下载并执行，执行完毕后可以选择保留或删除。脚本运行：通过package.json中的scripts字段定义和运行自定义脚本。依赖管理：管理项目的dependencies和devDependencies。简化命令行工具的使用：临时执行命令，避免全局安装带来的版本冲突或污染。npm 全称：Node Package Manager。发布包：将自己的包发布到npm注册表供他人使用。：无需全局安装即可运行npm包中的可执行文件。
【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）
m0_66584716的博客
10-11 1341
- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 596
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 528
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
最新发布
源码好优多
10-16 443
请联系我获取更详细的演示视频。
如何使用Python爬虫处理JavaScript动态加载的内容？
Z_suger7的博客
10-11 774
JavaScript动态加载的内容为爬虫带来了挑战，但也提供了新的机遇。通过使用Selenium、分析API请求或Pyppeteer，我们可以有效地爬取这些动态内容。这些方法各有优势，Selenium适合模拟复杂的用户交互，API请求适合直接获取数据，而Pyppeteer则提供了更强大的JavaScript控制能力。在实际应用中，开发者应根据目标网站的特点和需求选择合适的方法。随着技术的不断发展，我们也需要不断学习和适应新的工具和方法，以保持在数据获取领域的竞争力。复制再试一次分享。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值