理解Ajax：发起HTTP请求与Axios使用教程

"复习.md" 本文档主要复习了AJAX技术及其相关概念，包括发起HTTP请求的基本要素，如URL、请求方法以及使用第三方库axios进行AJAX请求的方法。 ### AJAX (Asynchronous JavaScript and XML) AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它允许网页与服务器进行异步通信，提升了用户体验，因为页面无需刷新就能获取和发送数据。 ### 请求必备参数 #### URL - **协议**：URL中定义了数据传输的协议，如HTTP或HTTPS，它们用于规定客户端与服务器之间的通信规则。 - **主机名**：代表IP地址，IP地址是互联网上设备的唯一标识。为了便于记忆，我们使用域名代替IP地址，通过DNS（Domain Name System）将域名解析为IP地址。 - **端口号**：服务器上运行的不同服务通过不同的端口号区分，范围在0到65535之间。HTTP默认使用80端口，HTTPS使用443端口。 #### Method 请求方法是HTTP协议定义的，用于指示对服务器资源的操作： - **GET**：获取数据，是最常见的请求方式。 - **POST**：提交数据，通常用于创建新资源。 - **DELETE**：删除指定资源。 - **PATCH**：局部修改资源的某个属性。 - **PUT**：整体修改资源，替换原有数据。 ### 使用别人封装好的AJAX库 **jQuery**、**axios**和**vue-resource**都是已经封装好的AJAX库，简化了开发者的工作。其中，axios因为其易用性和灵活性，成为当前前端开发中最常用的库。 #### Axios的基本使用 Axios提供了简单的API，以下是一个基本的使用示例： ```javascript axios({ url: 'http://www.xxxx.com/xxxxx', // 请求地址 method: 'GET', // 请求方式 params: {}, // 查询参数 data: {} // 请求体参数 }).then(function (res) { // res是返回的结果，服务器返回的数据在res.data属性下 }); ``` #### Axios的简化使用方式 Axios还提供了一些预定义的函数，对应于不同的HTTP请求方法，例如： ```javascript // 直接使用GET方法 axios.get('http://www.xxxx.com/xxxxx', {params: {}}) .then(function (res) { console.log(res.data); }); // POST请求 axios.post('http://www.xxxx.com/xxxxx', {data: {}}) .then(function (res) { console.log(res.data); }); ``` 这些简化方式使得编写AJAX请求更为便捷，且axios支持Promise，便于与其他Promise-based的库集成，如async/await。 总结来说，AJAX是前端开发中不可或缺的一部分，它通过异步通信优化了网页性能，而axios等库的出现进一步简化了AJAX的使用，提高了开发效率。了解并熟练掌握这些知识点对于任何前端开发者都至关重要。