数据的请求与发送

1. ajax原生js方法下数据的请求与发送

1.1 ajax的简介

ajax: Asynchronous Javascript And XML 异步JavaScript和XML

Ajax本身并不是一种技术，而是将现有的一些技术结合起来使用的方法：HTML、JS、XML、及其最重要的XMLHttpRequest对象。

使用Ajax后，异步特性使得它与服务器通信、交换数据并更新页面而无需刷新页面。

注：尽管Ajax中的x代表XML，但是轻量的JSON是首选。在Ajax中，JSON和XML都被用来包装信息。

1.2 发送HTTP请求

• 为了使用js向服务器发送一个HTTP请求，我们需要一个包含必要函数功能的对象实例。

  const httpRequest = new XMLHttpRequest();

• 为了将请求发送到服务器，我们需要调用实例对象的open()和send()方法。

  • httpRequest.open(method,url,async)用来创建http请求，开启数据传输通路

  • httpRequest.send(string)用来发送请求给服务器

• 为了判断请求是否发送到服务器，我们还需要调用实例对象的onreadystatechange属性

  readyState变化时就会触发这个事件

  redayState共有5个状态值，重点是最后一个readyStare==4状态，此时ajax异步对象完全接收到服务器的响应信息，但响应状态码未必是正确的。

  status == 200 / 404 / 500

  注意：onload事件只能监听到readyState==4的状态码，而onreadystatechange可以监听到2、3、4的状态码

1.3 发送POST请求

• 创建XMLHttpRequest实例

  const xhr = new XMLHttpRequest()

• 调用实例.open()创建请求

  xhr.open(method,url,async)

• 设置请求头: 这是唯一和get方法区分开的地方！！

  content-type属性再post请求中尤为重要，用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件。（毕竟你要传数据，你要告诉人家你穿的数据啥格式嘛~）

  常见的content-type属性值：

  • application/json：传递到后台的是序列化后的json字符串

    json: javascript obejct notation, 是一种按照js对象语法的数据格式，同时是一种轻量级的数据交互格式，常用于再网站上表示和传输数据。

  • application/x-www-form-urlencoded：表单数据被编码为key/value格式发送到服务器，也是表单默认的提交数据的格式。

  

2. jQuery封装后的ajax数据的请求与发送

2.1 $.ajax语法

$.ajax({

​ type：”请求方式”,

​ url：”发送请求的地址”，

​ data: “预期服务器返回的数据类型”，//post的时候，要求为Object或String类型的参数

​ contentType: “设置请求头里的内容类型”, //默认为”application/x-www-form-urlencoded”

​ async: “异步方式”，//默认都是true

​ success：’成功情况下的回调函数’，

​ error：’失败情况下的处理函数‘})

---

---

2.2 $.get语法

$.get(URL, [data, function(data,status)])

• function可以用来规定当前请求成功时运行的函数。参数中data：来自请求的结果数据；status：请求的状态

2.3 $.post语法

$.post(url, [data, function(data,status)])

3. axios

axios: 通过promise实现对ajax的封装

ajax本身是针对MVC编程，不符合现在MVVM的趋势，但是axios就可以很好的支持~且axios相比ajax在数据处理方面有更大的优势，提供了一些并发请求的接口、自动转换JSON数据。

【注：MVC v.s. MVVM】

• MVC代码架构设计模式：Model-View-Controller。Model数据层，View视图层，Controller主要控制视图层和数据层的关联，主要是通过监听DOM事件
• MVVM代码架构设计模式：Model-View-ViewModel。是MVC的改进版，支持自动且双向数据绑定。

3.1 axios.get语法

axios.get(‘url’, {params:{}}).then(callback)

3.2 axios.post语法

axios.post(‘url’, {传递的数据}).then(callback)

3.3 直接使用axios发请求

类比jquery的$.ajax()

axios({

​ method: ‘’,//注意jquery封装的时候是type

​ url: ‘’,

​ params: {//get参数}，

​ data: {//post传的数据}}).then(callback)

3.3 vue3.x中全局配置axios

在实际项目中几乎每个组件都会用axios发起数据请求，会碰到的问题：

• 每个组件都需要导入axios，代码臃肿
• 每次发请求需要填写完整的请求路径，不利于后期维护

全局配置axios

• 在main.js中，通过app.defaults.baseURL为axios配置请求的根路径
• 在main.js中，通过app.config.globalProperties全局挂载axios

4. 跨域问题与解决办法

reference：[(70条消息) 前端数据请求方式总结（前端数据请求方式，原生JS发送请求， axios， jQuery AJAX，同源策略，跨域）_前端发送请求的方式_魔术师ID的博客-CSDN博客](https://blog.csdn.net/qq_45585640/article/details/122728992#:~:text=前端数据请求方式 1 使用 form 表单的 action 向指定,的形式展示 5 使用