实现网页与服务器之间的数据交互

1、$.get()从服务器中获取数据 ✨

语法：$.get( url,[data],[callback] )

参数：

1. url   string类型 要请求的资源地址

2. data  object类型  请求资源期间要携带的参数

3. callback function   请求成功时的回调函数

示例：

发起带参数的GET

效果图：

2、$.post()从服务器中获取数据 ✨

语法：$.post(url,[data],[callback])

参数：

1. url   string类型 提交数据的地址

2. data  object类型  要提交的数据

3. callback function函数   数据提交成功时的回调函数

示例：

效果图：

3、$.ajax()从服务器中获取和提交数据 ✨

$.ajax()函数是一个功能比较综合的函数，他允许我们对Ajax请求进行更详细的配置

语法：

**$.ajax({

method:’ ’ , //请求的方式，例如 GET 或 post

url：’ ’ ,  //请求的URL地址

data：{ } , //这次请求要携带的数据

success: function(res) { }  //请求成功之后的回调函数

})**

示例：

发起GET请求

效果图：

二、XMLHttpRequest

================

2.1、什么是XMLHttpRequest？

---

简称xhr，是浏览器提供的Javascript对象，通过它，可以请求服务器上的数据资源，上面的Ajax就是基于xhr对象封装出来的

监听xhr.onreadystatechange事件，里面要注意的两个参数：

1. 监听xhr对象的请求状态 readystate；

2. 和服务器响应的状态 status

2.2、使用xhr发起get请求

---

步骤：

1. 创建xhr对象

2. 调用xhr.open()函数

3. 调用xhr.send()函数

4. 监听xhr.onreadystatechange事件 【如果发起请求成功则返回请求的数据资源

示例：

效果图：

2.3、使用xhr发起post请求

---

步骤：

1. 创建xhr对象

2. 调用xhr.open()函数

3. 设置Content-Type属性(固定写法)

4. 调用xhr.send()函数，同时指定要发送的数据

5. 监听xhr.onreadystatechange事件

示例：

效果图：

2.4、数据交换格式

---

从上面的效果图可以看出，所有的结果都是字符串的形式展示出来的，但是一般我们在运用其中的数据的时候，这个展示结果就不太直观，所有这里就要进行数据交换格式

数据交换格式就是服务器端和客服端之间进行数据传输与交换的格式；常见的两种数据交换格式是XML和JSON 其中前端用的最多的是JSON

接下来主要介绍的是JSON数据交换格式

2.4.1、JSON数据交换格式

1. 概念：JSON 英文是JavaScript Object Notation,即 JavaScript对象表示法，简单来讲，JSON就是Javascript对象和数组的字符串表示法，它使用文本表示一个js对象或数组的信息。因此，JSON的本质是字符串

2. 作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于XML，专门用于存储和传输数据，但是JSON比XML更小、更快、更易解析

3. 现状：JSON是在2001年开始被推广和使用的数据格式，到现在为止，JSON已经成为了主流的数据交换格式

两种结构：

1、对象结构

对象结构在JSON中表示为**{ }扩起来的内容，数据结构为{key:value,key:value,…}的键值对结构。其中，key必须是使用英文的双引号包裹的字符串**，value的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型，所有的字符串都是双引号表示

2、数组结构

数组结构在JSON中表示为**[ ]扩起来的内容。数据结构[ ] 扩起来的内容。数据结构[“java”,“javascript”,30,true]。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象**6种类型

注意事项：

1. 属性名必须使用双引号包裹

2. 字符串类型的值必须使用双引号包裹

3. JSON中不允许使用单引号表示字符串

4. JSON中不能写注释

5. JSON的最外层必须是对象或数组格式

6. 不能使用undefined或函数作为JSON的值

2.4.2、JSON和JS对象的相互转换

• JSON字符串转换为js对象

语法：**JSON.parse()**方法

var obj = JSON.parse(‘{“a”:“Hello”,“b”:“World”}’)

输出结果是：{a:‘Hello’,b:‘World’}

• js对象转换为JSON字符串

语法：**JSON.stringify()**方法

var obj = JSON.stringify({a:‘Hello’,b:‘World’})

输出结果是：{“a”:“Hello”,“b”:“World”}

三、axios

========

3.1、 什么是axios

---

• Axios是专注与网络数据请求的库

• 相比于原声的xhr对象，axios简单易用

• 相比于jQuery，axios更加轻量化，只专注于网络数据请求

3.2、使用axios发起GET请求

---

语法 axios.get(‘url’,{params:{参数}}).then(callback)

示例：

注意⚠️  ：    要注意的是此时的res打印出来的所有数据不全是服务器响应的数据 里面的data属性才是浏览器反馈的数据，其他的属性是axios封装的

发起GET请求

效果图：

3.2、使用axios发起POST请求

---

语法 axios.post(‘url’,{参数}).then(callback)

示例：

发起POST请求

效果图：

3.3、直接使用axios发起请求

---

类似于$.ajax()的函数

语法：

**axios({

methos:‘请求类型’

url:‘请求的地址’

data:{POST数据}

params:{GET参数}

}).then(callback)**

示例：

直接使用axios发起get请求
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可获取，包括答案解析。

力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-t6P0uls0-1713259189779)]

[外链图片转存中…(img-Mw3V5F27-1713259189780)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-C6vgnwUT-1713259189780)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可获取，包括答案解析。

[外链图片转存中…(img-j8ddmiPl-1713259189781)]