Ajax

一、客户端与服务器

1.服务器

2.客户端

二、URL地址

1.概念

2.组成

三、分析网页的打开过程

1.客户端与服务器通信过程

2.基于浏览器的开发者工具分析

四、服务器对外提供了哪些资源

1.常见资源

2.数据也是一种资源

3.数据是网页的灵魂

4.网页中如何请求数据

5.资源的请求方式

五、Ajax

1.概念

Asynchronous Javascript And XML （异步Javascript 和XML）

通俗的理解：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax

最大的特点：可以在网页不刷新的情况下，向服务端发送http请求，得到http响应

AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

2.作用

Ajax能让我们轻松实现网页与服务器之间的数据交互

最大的优势：无刷新获取数据。

3.优缺点

优点：

• 可以无需刷新页面而与服务器端进行通信
• 允许你根据用户事件来更新部分页面内容

缺点：

• 没有浏览历史，不能回退
• 存在跨域问题（同源）
• SEO（搜索引擎优化）不友好

4.应用场景

• 用户名检测

• 搜索提示

• 数据分页显示

5.发送ajax的四种方式

六、原生AJAX

1.XMLHttpRequest概念

2.使用xhr发起GET请求

1. 创建xhr对象
2. 调用xhr.open()函数,并指定参数
3. 调用xhr.send()函数
4. 监听xhr.onreadystatechange事件 （监听xhr对象的请求状态和服务器响应的状态）

注意：

了解xhr对象的readyState属性

• 无参

• 带参

注意：

查询字符串

3.使用xhr发起POST请求

1. 创建xhr对象
2. 调用xhr.open()函数
3. 设置Content-Type属性（固定写法）
4. 调用xhr.send()函数，同时指定要发送的数据
5. 监听xhr.onreadystatechange事件 （监听xhr对象的请求状态和服务器响应的状态）

CONTENT-TYPE:application/x-www-form-urlencoded含义是表示客户端提交给服务器文本内容的编码方式 是URL编码，即除了标准字符外，每字节以双字节16进制前加个“%”表示

4.URL编码与解码

1.概念

2.如何对URL进行编码与解码

浏览器会自动编码，不需要程序员过多关注

七、XMLHttpRequest Level2的新特性

新旧对比

旧版XMLHttpRequest的缺点

• 只支持文本数据的传输，无法用来读取和上传文件
• 传送和接收数据时，没有进度信息，只能提示有没有完成

XML HttpRequest Level2新功能

• 可以设置HTTP请求的时限
• 可以使用FormData对象管理表单数据
• 可以上传文件
• 可以获得数据传输的进度信息

1.设置HTTP请求时限

2.FormData对象管理表单数据

• 用法一：

• 用法二：

3.上传文件

• 定义UI结构

• 验证是否选择了文件

• 向formdata中追加文件

• 发起上传文件请求并监听onreadystatechange事件

• 完整

4.显示文件上传进度

一些问题解决

1.IE缓存问题解决

url不一样，浏览器会认为是两次不同的请求

2.超时设置与网络异常

到超时时间之后会自动取消请求

3.AJAX取消请求

4.AJAX请求重复发送问题

八、jQuery中的Ajax

1.介绍

2.$.get()函数的语法

• 不带参

• 带参

3.$post()函数的语法

4.$ajax()函数的语法

$.ajax还有很多其他选项

• get

• post

九、Axios

1.概念

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

相比于原生的XMLHttpRequest对象，axios简单易用

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

• ajax和axios的区别

axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样。简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有。总结一句话就是axios是ajax，ajax不止axios。

2.axios发起get请求

3.axios发起post请求

4.直接使用axios发起请求

注意：get请求通过params传参，post请求通过data传参

可以有很多配置项

十、fetch

十一、封装自己的Ajax函数

1.要实现的目标

2.处理data参数

需要把data对象，转化成查询字符串的格式，从而提交给服务器，因此提前定义resolveData函数如下：

3.定义itheima函数

4.判断请求的类型

• 完整封装：

5.测试

• GET

• POST

十二、数据交换的格式

1.概念

数据交换格式，就是服务器与客户端之间进行数据传输与交换的格式。

前端领域，经常提及的两种数据交换格式分别是：XML和JSON。其中XML用的非常少，所以，我们重点要学习的数据交换格式就是JSON。

2.XML

(1)概念：

XML可扩展标记语言，HTML超文本标记语言

XML被设计用来传输和存储数据

XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据

(2)和HTML的区别（无任何关系）：

(3)缺点：

3.JSON

(1)概念

(2)JSON的两种结构

• 对象结构

• 数组结构

(3)JSON语法注意事项

(4)JSON和JS对象的关系

互转的方法：

• JSON -> JS

JSON.parse()

• JS -> JSON

JSON.stringify()

(5)序列化和反序列化

手动转化

自动转化

注意：

1. 原生ajax通过JSON.parse或者xhr.responseType指定请求体类型

2. jq封装的ajax，$.get和$.post通过设置第四个参数，$.ajax通过设置dataType

3. axios已经自动把请求体转为对象形式

十三、HTTP协议请求报文与响应文本结构

注意：请求报文是get的话，没有请求体

十四、跨域

• 同源策略：是浏览器的一种安全机制（ajax默认遵循同源策略）

• 同源：协议、主机、端口号 必须完全相同

• 违背同源策略就是跨域

十五、接口

1.概念

2.分析接口的请求过程

3.接口文档

十六、Form表单

1.概念

2.组成部分

3.< form >标签的属性

1. action

2. target

3. method

get方式将数据通过url地址提交

post方式将数据通过Form Data提交

注意：

get方式适合用来提交少量的、简单的数据

post方式适合用来提交大量的、复杂的、或包含文件上传的数据

4. enctype

涉及到表单中文件上传时，必须要用第二种，否则就用第一种（默认）

4.表单的同步提交及缺点

通过点击submit按钮，触发表单提交的操作，从而使页面跳转到action URL的行为，叫做表单的同步提交

十七、通过Ajax提交表单数据

1.监听表单的提交事件

2.阻止表单默认提交行为

event.preventDefault()

3.快速获取表单中的数据

通过serialize() 函数可以快速获取表单中的数据，而不需要一个一个获取DOM元素进行操作

注意：使用serialize（）函数一定要给每个表单元素添加name属性，且不能重名！！！