XMLHttpRequest 是浏览器提供一个javascript 对象 通过它 可以实现跟服务器的交互 实现数据传输
前所学的 jQuery 中的 Ajax 函数,就是基于 xhr 对象封装出来的
步骤
创建一个xhr对象
调用xhr.open函数
调用xhr.send函数
监听xhr.onreadystatechange事件
XMLHttpRequest 对象的 readyState 属性,用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求 必然处于以 下状态中的一个
使用xhr对象发起get请求时 在xhr.open()中 为url加入指定参数即可
定义:查询字符串(URL 参数)是指在 URL 的末尾加上用于向服务器发送信息的字符串(变量)。
格式:将英文的 ? 放在 URL 的末尾,然后再加上 参数=值 ,想加上多个参数的话,使用 & 符号进行分 隔。以 这个形式,可以将想要发送给服务器的数据添加到 URL 中。
创建 xhr 对象
调用 xhr.open() 函数
设置 Content-Type 属性(固定写法)
调用 xhr.send() 函数,同时指定要发送的数据
监听 xhr.onreadystatechange 事件
数据交换格式,就是服务器端与客户端之间进行数据传输与交换的格式
XML 和 JSON
XML 的英文全称是 EXtensible Markup Language ,即可扩展标记语言。因此, XML 和 HTML 类 似
XML 格式臃肿,和数据无关的代码多,体积大,传输效率低 在 Javascript 中解析 XML 比较麻烦
json 是一种轻量级的数据交换格式 他的本质是一个字符串
概念: JSON 的英文全称是 JavaScript Object Notation ,即“JavaScript 对象表示法”。简单来 讲, JSON 就是 Javascript 对象和数组的字符串表示法,它使用文本表示一个 JS 对象或数组的信息, 因此, JSON 的本质是字符串。
作用: JSON 是一种轻量级的文本数据交换格式,在作用上类似于 XML ,专门用于存储和传输数据,但 是 JSON 比 XML 更小、更快、更易解析。
现状: JSON 是在 2001 年开始被推广和使用的数据格式,到现今为止, JSON 已经成为了主流的数据 交 换格式
JSON 就是用字符串来表示 Javascript 的对象和数组。所以, JSON 中包含对象和数组两种结构,通 过这 两种结构的相互嵌套,可以表示各种复杂的数据结构。
对象结构
对象结构在 JSON 中表示为 { } 括起来的内容。数据结构为 { key: value, key: value, … } 的 键 值对结构。其中, key 必须是使用英文的双引号包裹的字符串, value 的数据类型可以是数字、字符 串、 布尔值、null、数组、对象6种类型。
数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ "java", "javascript", 30, true … ] 。 数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
序列化 json.stringfig() 把数据对象转换为json字符串的方式
反序列化 json.parse() 把json字符串转换为数据对象的方式
可以设置 HTTP 请求的时限
可以使用 FormData 对象管理表单数据
可以上传文件
可以获得数据传输的进度信息
Ajax 操作往往用来提交表单数据。为了方便表单处理, HTML5 新增了一个 FormData 对象,可以模拟 表单操作
FormData 对象也可以用来获取网页表单的值,示例代码如下:
步骤
① 定义 UI 结构
② 验证是否选择了文件
③ 向 FormData 中追加文件
④ 使用 xhr 发起上传文件的请求
⑤ 监听 onreadystatechange 事件
axios是专注于网络数据请求的库
相比于原生的 XMLHttpRequest 对象, axios 简单易用。 相比于 jQuery , axios 更加轻量化,只专注于网络数据请求。
axios 发起 get 请求的语法:
代码示例
axios 发起 get 请求的语法:
示例代码