AJAX基本用法

🕗 发布于 2024-07-19 12:27 ajax 前端 javascript

1.axios

基本语法:

axios({
  url: '目标资源地址'
}).then((result) => {
  // 对服务器返回的数据做后续处理
})

查询参数（在params中设置）：

查询参数通常是指在URL中传递给服务器以获取动态数据或指定请求条件的一部分。它们位于URL中问号(?)后面，多个参数之间用&符号分隔。每个查询参数由键值对组成，键和值之间用等号(=)连接。下面是一个带有查询参数的URL示例：
https://example.com/search?q=query+string&category=technology&sort=date

axios({
  url: '目标资源地址',
  params: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

请求方法（默认为GET）：

axios({
  url: '目标资源地址',
  method: '请求方法',
  data: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

在这里插入图片描述

错误处理：

axios({
  // ...请求选项
}).then(result => {
  // 处理成功数据
}).catch(error => {
  // 处理失败错误
})

2.HTTP协议

请求报文

一个典型的HTTP请求由以下几个部分组成：

请求行（Request Line）：包括方法（如GET、POST）、请求URI（Uniform Resource Identifier）和协议版本。
请求头（Header Fields）：一系列键值对，提供了请求的附加信息，如User-Agent（客户端信息）、Accept-Language（可接受的语言）等。
空行：请求头结束的标志。
请求体（Request Body）：并非所有请求都有请求体，通常在POST请求中携带，用于提交表单数据、文件上传等。

响应报文

HTTP响应同样由几个部分构成：

状态行（Status Line）：包括协议版本、状态码（如200 OK、404 Not Found）和状态消息。
响应头（Header Fields）：类似请求头，提供了响应的元数据，如Content-Type（内容类型）、Content-Length（内容长度）等。
空行：响应头结束的标志。
响应体（Response Body）：包含了请求资源的实际数据，如HTML页面、图片数据等。

3.form-serialize批量获得表单数据

form-serialize 插件语法：

引入 form-serialize 插件到自己网页中
使用 serialize 函数
- 参数1：要获取的 form 表单标签对象（要求表单元素需要有 name 属性-用来作为收集的数据中属性名）
- 参数2：配置对象
  - hash：
    - true - 收集出来的是一个 JS 对象结构
    - false - 收集出来的是一个查询字符串格式
  - empty：
    - true - 收集空值
    - false - 不收集空值

  <--1. 把插件引入到自己网页中-->

  <script src="./lib/form-serialize.js"></script>
  
  const form = document.querySelector('.example-form')
  const data = serialize(form, { hash: true, empty: true })
  // const data = serialize(form, { hash: false, empty: true })
  // const data = serialize(form, { hash: true, empty: false })
  console.log(data)

4.XMLHttpRequest

基本语法：

const xhr = new XMLHttpRequest()//先创建xhr对象
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {
  // 响应结果
  console.log(xhr.response)
})
xhr.send()

设置请求头：

setRequestHeader() 方法是 XMLHttpRequest 对象的一个方法，用于设置即将发送的 HTTP 请求的 HTTP 头部信息。这在需要自定义请求头时非常有用，例如设置 Content-Type、Authorization 等。

//xhr.setRequestHeader(header, value); 基本用法

var xhr = new XMLHttpRequest();
xhr.open('POST', 'url');
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

var data = JSON.stringify({ key: 'value' });
xhr.send(data);

在调用 setRequestHeader() 之前，必须先调用 open() 方法初始化请求。否则，该方法可能不会生效或抛出异常。

查询参数：

直接在url地址后面拼接查询参数（要加？来连接）：

/**
 * 目标：使用XHR携带查询参数，展示某个省下属的城市列表
*/
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=辽宁省')
xhr.addEventListener('loadend', () => {
  console.log(xhr.response)
  const data = JSON.parse(xhr.response)
  console.log(data)
  document.querySelector('.city-p').innerHTML = data.list.join('<br>')
})
xhr.send()

5.URLSearchPrarms方法：

如果有多个查询参数，自己拼接很麻烦，这里用 URLSearchParams 把参数对象转成“参数名=值&参数名=值“格式的字符串，语法如下：

// 1. 创建 URLSearchParams 对象
const paramsObj = new URLSearchParams({
  参数名1: 值1,
  参数名2: 值2
})

// 2. 生成指定格式查询参数字符串
const queryString = paramsObj.toString()
// 结果：参数名1=值1&参数名2=值2

其他操作：

从查询字符串创建URLSearchParams 实例

const paramsString = "?q=query+string&category=technology&sort=date";
const searchParams = new URLSearchParams(paramsString);

读取参数

console.log(searchParams.get('q')); // 输出: query string
console.log(searchParams.getAll('category')); // 如果有多个相同的key，会返回所有值组成的数组，否则同get
console.log(searchParams.has('sort')); // 检查参数是否存在，输出: true/false
console.log(searchParams.keys()); // 返回一个迭代器，包含所有参数的键
console.log(searchParams.values()); // 返回一个迭代器，包含所有参数的值
console.log(searchParams.entries()); // 返回一个迭代器，包含[key, value]形式的数组

修改和添加参数

searchParams.set('sort', 'relevance'); // 设置或更新参数值
searchParams.append('filter', 'active'); // 添加新的参数
searchParams.delete('category'); // 删除参数

序列化为字符串

const updatedParamsString = searchParams.toString(); // 将修改后的参数序列化为字符串
console.log(updatedParamsString); // 输出: ?q=query+string&sort=relevance&filter=active

整合到URL

如果你想将这些参数整合回一个完整的URL，可以使用 URL 构造函数：

const baseURL = "https://example.com/search";
const fullURL = new URL(baseURL);
fullURL.search = searchParams.toString();
console.log(fullURL.href); // 输出完整的URL，包括查询参数

URLSearchParams 是处理查询字符串的强大工具，无论是用于前端还是在Node.js环境中处理HTTP请求时都非常有用。

6.promise

JavaScript中的Promise是一种处理异步操作的编程模式，它提供了更加优雅的方式来组织和管理异步代码，相较于传统的回调函数，Promise能够避免回调地狱（Callback Hell），使得代码更加清晰和易于维护。下面我会详细介绍Promise的基本概念、状态、用法以及一些关键方法。

基本概念

Promise是一个对象，代表一个异步操作的最终完成（或失败）及其结果。它有三种状态：

Pending（等待中）：初始状态，既没有完成也没有失败。
Fulfilled（已成功）：表示操作成功完成，此时Promise变为resolved状态。
Rejected（已失败）：表示操作失败，此时Promise变为rejected状态。

一旦Promise从Pending变为Fulfilled或Rejected，其状态就不可更改了，这称为Promise的不可变性。

创建Promise

使用new Promise()构造函数创建一个新的Promise实例：

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    if (/* 操作成功 */) {
      resolve("操作结果");
    } else {
      reject("操作失败的原因");
    }
  }, 2000);
});

消费Promise

使用.then()

当Promise处于fulfilled状态时，可以通过.then()方法注册一个或多个成功的回调函数：

myPromise.then((result) => {
  console.log(result); // 打印操作结果
});

使用.catch()

当Promise处于rejected状态时，可以使用.catch()方法注册一个错误处理回调：

myPromise.catch((error) => {
  console.error(error); // 处理错误
});

.catch()还可以捕获前面.then()链中抛出的异常。

使用.finally()

无论Promise最终状态如何（fulfilled或rejected），.finally()中的回调都会被执行，适合做清理

Promise.all 静态方法

概念：合并多个 Promise 对象，等待所有同时成功完成（或某一个失败），做后续逻辑

语法：

const p = Promise.all([Promise对象, Promise对象, ...])
p.then(result => {
  // result 结果: [Promise对象成功结果, Promise对象成功结果, ...]
}).catch(error => {
  // 第一个失败的 Promise 对象，抛出的异常对象
})

7.利用XHR和promise封装axios函数

function myAxios(config) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()

    if (config.params) {
      const paramsObj = new URLSearchParams(config.params)
      const queryString = paramsObj.toString()
      config.url += `?${queryString}`
    }
    xhr.open(config.method || 'GET', config.url)

    xhr.addEventListener('loadend', () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(JSON.parse(xhr.response))
      } else {
        reject(new Error(xhr.response))
      }
    })
    // 1. 判断有data选项，携带请求体
    if (config.data) {
      // 2. 转换数据类型，在send中发送
      const jsonStr = JSON.stringify(config.data)
      xhr.setRequestHeader('Content-Type', 'application/json')
      xhr.send(jsonStr)
    } else {
      // 如果没有请求体数据，正常的发起请求
      xhr.send()
    }
  })
}

8.回调地狱

在JavaScript中，当多个异步操作依赖于彼此的结果时，如果使用传统的回调函数处理，代码会迅速变得嵌套复杂，难以阅读和维护，这种现象被称为“回调地狱”（Callback Hell）。

例如，下面是一个简单的回调地狱示例：

doSomething(function(err, result1) {
    if (err) {
        console.error(err);
    } else {
        doSomethingElse(result1, function(err, result2) {
            if (err) {
                console.error(err);
            } else {
                doAnotherThing(result2, function(err, result3) {
                    if (err) {
                        console.error(err);
                    } else {
                        console.log(result3);
                    }
                });
            }
        });
    }
});

使用Promise解决

依靠 then() 方法会返回一个新生成的 Promise 对象特性，继续串联下一环任务，直到结束

Promise是JavaScript原生提供的解决异步编程的一种机制，它可以将复杂的嵌套回调链路扁平化，使得代码更加清晰和易于维护。

下面是使用Promise重写上述例子的方式：

function doSomething() {
    return new Promise((resolve, reject) => {
        // 异步操作...
        setTimeout(() => {
            resolve('result1');
        }, 1000);
    });
}

function doSomethingElse(result) {
    return new Promise((resolve, reject) => {
        // 异步操作...
        setTimeout(() => {
            resolve(`${result} - result2`);
        }, 1000);
    });
}

function doAnotherThing(result) {
    return new Promise((resolve, reject) => {
        // 异步操作...
        setTimeout(() => {
            resolve(`${result} - result3`);
        }, 1000);
    });
}

doSomething()
    .then(result1 => doSomethingElse(result1))
    .then(result2 => doAnotherThing(result2))
    .then(result3 => console.log(result3))
    .catch(err => console.error(err));

async/await进一步简化

ES2017引入了async/await语法，它基于Promise，提供了更加简洁的异步编程方式。使用async/await，可以让异步代码看起来像同步代码一样直观（用到了 try catch 捕获同步流程的错误）：

async function executeTasks() {
    try {
        const result1 = await doSomething();
        const result2 = await doSomethingElse(result1);
        const result3 = await doAnotherThing(result2);
        console.log(result3);
    } catch (error) {
        console.error(error);
    }
}

executeTasks();

在这个版本中，通过async关键字定义了一个异步函数，在该函数内部可以使用await关键字等待Promise的结果，从而避免了.then()链的嵌套，使代码更加简洁和易于理解。

9.事件循环

概念：执行代码和收集异步任务，在调用栈空闲时，反复调用任务队列里回调函数执行机制

作用：JavaScript 是单线程的，为了不阻塞 JS 引擎，设计执行代码的模型

原理：执行同步代码，遇到异步代码交给宿主浏览器环境执行
异步有了结果后，把回调函数放入任务队列排队
当调用栈空闲后，反复调用任务队列里的回调函数

宏任务：

浏览器执行的异步代码
例如：JS 执行脚本事件，setTimeout/setInterval，AJAX请求完成事件，用户交互事件等

微任务：

JS 引擎执行的异步代码
例如：Promise对象.then()的回调

宏任务在微任务之后执行，且每个宏任务结束后都会检查微任务队列。

原文地址：https://blog.csdn.net/2303_80137294/article/details/140515224

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：uni-app开发日志：unicloud使用时遇到的问题解决汇总（不断补充）
下一篇：力扣649.Dota2参议院

深入理解一致性算法：保障分布式系统的可靠基石
一致性算法是保障分布式系统可靠运行的关键技术之一。通过本文的介绍，我们了解了一致性算法的重要性、常见类型、工作原理、实际应用以及性能优化等方面的知识。在实际应用中，我们需要根据具体的业务需求和系统特点
阅读更多2024-11-09
GEE代码学习 day18
在这里，我们可以看到，低百分位合成图像描绘了较暗、低反射率的陆地特征，例如水和云或山丘阴影，而较高百分位数的合成图像（在我们的示例中> 70%）描绘了云以及与明亮反射率值对应的任何其他大气或陆地
阅读更多2024-11-09
鸿蒙的进击之路
为什么要写鸿蒙，因为她是华为的，为什么是华为就要写，因为华为背负了国人太多太多的包袱，或点赞或抨击。我是强烈支持华为的，但我会客观公正地去评价华为的产品，就比如这篇博文，要写的是华为鸿蒙系统的进击之路
阅读更多2024-11-09
目录树文件名映射深度1分组计数,tree(映射(目录A))
xxx
阅读更多2024-11-09
Java：数据结构-枚举
枚举概念：将一组常量组织起来，在这之前表示一组常量通常使用定义常量的方式。public static final int RED = 1; public static final int GREE
阅读更多2024-11-09
【数据结构与算法】第9课—数据结构之二叉树(链式结构)
2为底，n+1为对数，n为二叉树节点数。
阅读更多2024-11-09
C++虚继承演示
编译器不知道访问的A中的元素是经过B继承还是C继承。所以B、C在继承A时要用到虚继承virtual。是因为在继承时A出现两条分支：ABD、ACD。这种情况，B和C都继承了A，D继承了B、C。
阅读更多2024-11-09
重塑产研生态：AI技术如何驱动程序员与团队的协同进化
软件研发，这一看似由无数行代码堆砌而成的领域，实则蕴含着一条精密的流水线，它包括了需求分析、架构设计、详细设计、代码开发、质量保证以及部署发版这六大核心环节，每一环都紧密相连，共同驱动着软件产品的诞生
阅读更多2024-11-09
可视化建模与UML《顺序图实验报告》
旷野的规则是永不回头。
阅读更多2024-11-09
Swift 开发教程系列 - 第10章：泛型
泛型（Generics）是一种强大的特性，允许你编写灵活且可重用的代码，适用于多种类型，而无需重复编写代码。泛型在 Swift 中的应用非常广泛，适用于函数、结构体、枚举和类。通过本章的学习，你将掌握
阅读更多2024-11-09