XMLHttpRequest

xhr是浏览器提供的js内置对象，通过它，可以请求服务器上的数据资源

使用xhr发起GET请求

1. 创建 xhr 对象
2. 调用 xhr.open（）函数
3. 调用 xhr.send（）函数
4. 监听 xhr.onreadystatechange事件

xhr对象的readyState属性

 XMLHttpRequest的readyState属性，用来表示当前Ajax请求所处的状态，每个Ajax请求必然处于一下状态中的一个

 使用xhr发起带参数的GET请求

只需在调用 xhr.open期间，为URL地址指定参数即可

这种在 URL 地址后面拼接的参数，叫做查询字符串 

查询字符串

定义：查询字符串（URL参数）是指在URL的末尾加上用于向服务器发送信息的字符串（变量）

格式：将英文 ？放在URL末尾，然后再加上参数=值，想加多个参数用&符号进行分隔

 

GET请求携带参数的本质

都是直接将参数以查询字符串的形式，追加到URL地址后面，发送到服务器的

URL编码与解码

URL地址中，只允许出现英文相关的字母，标点符号，数字，不允许出现中文字符

如果需要出现中文，则需要进行编码，编码原则是使用安全的字符去表示不安全的字符，也就是使用英文字符表示非英文字符

• encodeURL（）编码的函数
• decodeURL（）解码的函数

  使用xhr发起带参数的POST请求

1.  创建 xhr 对象
2. 调用xhr.open（）对象
3. 设置Content-Type属性
4. 调用 xhr.send（）函数，同时指定要发送的数据
5. 监听 xhr.onreadystatechange 事件

 数据交换格式

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

XML

可扩展标记语言

xml与html的区别

• html用来描述网页上的内容，是网页内容的载体
• xml用来传输和存储数据，是数据的载体
• 缺点：格式臃肿，体积大，传输效率低，在js中解析麻烦

 JSON

JavaScript对象表示法，JSON就是JavaScript对象和数组的字符串表示法，它使用文本表示一个js对象或数组的信息，JSON本质是字符串

作用：轻量级文本数据交换格式，用于存储和传输数据，比xml更小、更快、更易解析

JSON的两种结构

包含对象和数组两种结构，通过这两种结构相互嵌套，表示复杂的数据结构

• 对象结构

在JSON中被{}括起来的内容，数据结构为{key:value,key:value}的键值对结构，key必须是用英文的双引号包裹的字符串，value数据类型可以是数组，字符串，布尔，null，数组，对象六种

• 数组结构

【】括起来的内容，结构为["java","javascript",30]，数组中数据类型可以是数字、字符串、布尔值、null、数组、对象

注意事项：

1. 属性名必须用双引号包裹
2. 字符串类型的值必须用双引号包裹
3. JSON中不允许用单引号表示字符串
4. JSON中不能写注释
5. JSON的最外层必须是对象或数组格式
6. 不能用undefined或函数作为JSON的值

JSON作用：在计算机与网络之间存储和传输数据

JSON本质：用字符串表示JavaScript对象数据或数组数据

JSON和JS对象的关系

JSON和JS对象的相互转化

从JSON字符串转换为JS对象，使用JSON.parse（）方法

从JS对象转换为JSON字符串，使用JSON.stringify（）方法

序列化和反序列化

把数据对象转换为字符串的过程，叫序列化（JSON.stringfy（）） ，把字符串转化为数据对象的结构叫反序列化（JSON.parse（））

XMLHttpRequest Level2新特性

1、可以设置HTTP请求时限

xhr.timeout = 3000

与之配套的还有timeout事件，用来指定回调函数：

xhr.ontimeout = function(event) {
    alert('请求超时')
}

2、可以使用 FormData 对象管理表单数据

3、可以上传文件

1、定义UI结构

2、验证是否选择了文件

3、向FormData中追加文件

4、使用xhr发起上传文件的请求

5、监听onreadystatechange事件

6、可以获取数据传输的进度信息

 jQuery实现文件上传

 jQuery实现loading效果

1、ajaxStart（callback）

Ajax请求开始时，执行ajaxStart函数，可以在callback中显示loading效果

 注意：$(document).ajaxStart()函数会监听当前文档内所有Ajax请求

2、ajaxStop（callback）

Ajax请求结束时，执行ajaxStop函数，可以在callback中隐藏loading效果